Amazon E-Commerce Website

Abstract

Electronic Commerce is that the process of conducting business on internet. The person sitting in his house ahead of the personal computer can pierce all websites to shop or vend these products. As compared traditional trade requires one to perform task similar as carrying the products etc., ecommerce experience has made the client to do no such task therefore saving precious time. E-Commerce launched in the early 1990s has taken an enormous shift within the computer world, but the reality has hindered the expansion of e-commerce security. Security is an e-commerce challenge now and important progress has been made in the security sector. The great betterment of ecommerce over conventional trading is that the user can browse online stores, analogize costs, and order home- grounded deals on his personal computer. Accelerating e-commerce use in developing nations B2Be-commerce is employed to ameliorate access to global enterprises of enterprises in developing nations. For a developing nations advancement in the e-commerce sector is pivotal. The exploration strategy demonstrates the significance of ecommerce in developing nations with business operations. Electronic Commerce covers a broad range of distinct kinds of companies, from consumer- grounded marketing traffic, through sales or music websites, to the commercialization of merchandise and services between companies. It\'s presently one of the most significant internet features to arise.

Introduction

I. INTRODUCTION

E-commerce (electronic commerce or EC) is the purchase and trade of products and services, and/or the transfer of finances or data, by internet. This business sale takes place as a business-to- business, business-to-buyer, buyer-to-buyer or buyer to- business. E-commerce stores become a part of our diurnal lives. Advances in technology have made it possible for people to measure during a comfortable terrain in their homes and shop online without having to travel to any store. The design is astronomically divided into two main modules Sellers and Guests/ Users. The shop director and staff work as Sellers. They will have the ability to add, edit, review products or, remove products therefore being suitable to change brand titles, change costs, add, or take off products. The client can search the merchandise selection, make changes to the wain, remove the products from the wain and go in the store. The client is additionally ready to update their information similar as titles, address, and other diverse data. The user can only browse the web store and add the merchandise to the wain. User is restricted to using the store.

II. PROPOSED SYSTEM

Our website can be divided into two main modules: User module and admin module. A seller can sell the products platform by creating an item, this will be displayed in the main page of the website. Anyone can register as seller or user and sell or buy products.

III. METHODOLOGY

This model is universally accepted, and, in this case, we followed the different stages of religious software development. It is a continuous model in which we develop a website by following step-by-step instructions for analysis of requirements and design.

V. SYSTEM DESIGN

For frontend we used technologies such as Bootstrap 5.1 framework along with HTML, CSS and For backend we used technologies such as Angular and Typescript.

A. HTML

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags but use them to interpret the content of the page.

B.  CSS

CSS (Cascading Style Sheets) is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

C. Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular application is defined by a set of NgModules. An application always has at least a root module that enables bootstrapping, and typically has many more feature modules.

1.  Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data

2. Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

Modules, components and services are classes that use decorators. These decorators mark their type and provide metadata that tells Angular how to use them.

a. The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.

b. The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI)

An application's components typically define many views, arranged hierarchically. Angular provides the ‘ Router ‘ service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.

D. Typescript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.

V. FRAMEWORKS

A. Bootstrap 5.1

Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive website.

Responsive design makes it possible for a web page or app to detect the visitors screen size and orientation and automatically adapt the display accordingly; the portfolio website approach assumes that smartphones, tablets and task-specific Mobile apps are employees' primary tools for getting work done and addresses the requirements of those technologies in design.

VI. OUTPUT

A. Homepage

The website is a user-friendly website. When the user opens the website, they will be directed to the home page. Home Page can be divided into three parts the header , body and footer  . The header contains a nav bar and nav bar contain All Categories , Clothing , Electronics , Jewelery , Faq , Chat with us , amazon prime and login & sign-up form. The body contain a slider and some cards . The footer contain website information.

B.  All Categories

All Categories can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a slider and products and his description , price & photo. The footer contain website information.

C. Clothing

Clothing can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a slider and products and his description , price & photo. The footer contain website information.

D. Electronics

Electronics can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a slider and products and his description , price & photo. The footer contain website information.

E. Jewelery

Jewelery can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a slider and products and his description , price & photo. The footer contain website information.

F.  Faq

Faq can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a information about website and product related information. The footer contain website information.

G. Chat with Us

Chat with us can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a chatting feature and calling features. The footer contain website information.

H. Amazon Prime

Amazon prime can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a  information about amazon prime his prices. The footer contain website information.

I. Login and Sign-Up Form

Login and Sign up form can be divided into three parts the header , body and footer . The header contains a nav bar . The body contains a  Login and Sign up form. The footer contain website information.

VII. ACKNOWLEDGEMENT

I would like to thanks Mr Ajay Patil (Assistant Prof.Department of CSE , MIT ADT University ,PUNE) with his valuable suggestions and comments that helped to improve the work , this support is greatly appeciated

Conclusion

This research paper provides insight into the phases involved in development of a low complexity website, we did it by choosing the easiest programming language to read and write Html , Css ,Angular , Typescript and Bootstrap framework. Advantage of this website is this is user friendely with any devices . The low complexity and zero to zero maintenance website make perfect choice for self-hosting customers

References

[1] https://www.amazon.in/ [2] https://getbootstrap.com/docs/5.0/getting-started/introduction/ [3] https://realfavicongenerator.net/ [4] https://tablericons.com/ [5] https://angular.io/ [6] Github Link:- https://ravicodinglife.github.io/Amazon-Angular-/

Copyright

Copyright © 2022 Sachin Saurabh. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.