Online shopping is the process whereby consumers directly buy dresses or accessories from online shop, without an intermediary service, over the Internet using a web browser . It is a form of electronic commerce. An online shop, or web shop evokes the physical analogy of buying products or services in a shopping centre.
The Online Shopping System (OSS) for clothes is intended to provide complete solutions for customers through a single get way using the internet. It will enable customers to browse through the shop and purchase them online without having to visit the shop physically.
Ecommerce online shopping web based app with frontend implemented using React, backend and database using firebase realtime database and hosting on surge
This app is hosted on surge.sh and can be accessed by entering the following URL in Your Browser Installed On Your Pc
http://onlineshoppingstore.surge.sh/
- Home Screen: This is the main navigation page. In this screen, page shows a menubar. Each button will redirect the user to a new link to pages of dresses, accessories, login, contact, home, orders, cart and wishlist.
- Dresses Screen: In this screen user can see a number of dresses and can view their respective details, add them to cart or to your wishlist.
- Accessories Screen: In this screen user can see a number of accessories, view their details, add them to cart or to their wishlist.
- Details Screen: User can view details of any item present in the product list, add item to cart or wishlist.
- Login: User can login using credentials for procceding with their orders.
- Cart: It shows a list of selected items, user can increment or decrement quantity also delete items from their cart.
- Wishlist: It shows a list of selected items, that the user may buy in future, user can add it to their cart, view its detail or remove it from wishlist.
- Checkout: Here user enter respective details for checkout.
Following are the required documents for the project.
Software Requirement Specifications Document
A Simple Shopping Application using React JS, a JavaScript library to make awesome UI by Facebook. This application uses React JS component oriented UI creation paradigm. All components are written in JSX and ES6 style and are
combined to get a single build for production purpose using Webpack 5. ES6 module creation along with import /export is used. Babel is used to transpile all JSX code to vanilla JavaScript code. To install all the dependecies npm is used.
- Code is rewritten with React JS 17 and Node JS 14
- Latest features of JavaScript i.e. ES6, ES7 is used
- React JS Hooks are used with Functional components
- It is a Full Stack Application
- All the user orders are saved in firebase realtime database.
- Login as well as Logout feature is added.
- Error will be shown if the credentials are not correct.
- for simplicity passwords are not encrypted
- Detail of a specific product will be shown on clicking the corresponding item
- Product item ca added to cart or wishlist
- Orders can be made after adding contact details.
- navigations can be done through navigation bar, advertisements or footer.
- Login / Logout status are shown by the login symbol
Clone the repository:
git clone https://github.com/MishaAkram/Ecommerce-online-shopping-system.git
Navigate inside the directory:
cd Ecommerce-online-shopping-system
Install all the necessary dependecies
npm install
Now run the project
npm start
Some screens of the application is given below for better understanding.
Home Screen
Products Screen
submitting credentials
Cart Screen
Wishlist
Details screen
Orders screen
Contact us screen
About us
- Web app developed on Visual studio code with React, Javascript.
- Firebase used for SignIn Authentication, Realtime Database and Push and get orders details.
- Surge used for hosting the app.
