/DreamBaths-E-Commerce-App

DreamBaths is an E-Commerce website that sells personal care and beauty products

Primary LanguageJavaScript

Dreambaths

Project: make a E-Commerce Website

DreamBaths is an E-Commerce websitr that sells personal care and beauty products ..

    In this project I have tried to make a E-Commerce Website. With all the efforts and the technology stack, that I have learned till now in the masai school.

Technology Stack Used

  • HTML
  • CSS
  • JavaScript
  • React
  • Redux
  • Chakra-Ui

Flow of the website

USERSIDE

  • When You land on hompage you should login first , for that click on login if already login in then just enter your ID and password. And if you are new then just create you credentials.
  • After that you see all variety of products on navbar of landing page.
  • After that you sort the items by price, sub-category and also by rating and then you can add to cart from there.
  • After adding items to the cart you will click on the cart to go into the cart page.
  • On cart page you can see all the items that you have added. You can delete the item from cart page if you want.
  • Add payment detail and proceed to pay.
  • Then you will select address and entre the coupon as "Flat30%off" then you will get 30rs discount on your total amount.
  • After clicking on next you will redirected to payment page where you can entre all your payment details , after clicking on payment your order will complete.
  • When You land on hompage you should login first , for that click on login if already login in then just enter your ID and password. And if you are new then just create you credentials.

ADMINSIDE

  • If you have admin credentials you login and redirected to admin page.
  • Admin page has Dashboard, Category, Add product and edit product option.
  • Dashboard gives stats by graphs and piecharts showing total of products.
  • Categegory section shown deatailed information on category and sub-category.
  • In Add Product you can add product into the database.
  • In Edit Product you can edit any product parameters into the database.

Snapshots 📷

  • Landing Page (UserSide):

  • Product Page (UserSide):

  • Cart Page (UserSide):

  • Payment Page (UserSide):

  • Dasboard section (AdminSide):

  • Category Section (AdminSide):

  • Add Production Section (AdminSide):

  • Edit Product Section (AdminSide):

  • Orders Section (AdminSide):

End Notes 📑

In this project we were tried to achieve all the functionality we see on a E-coommerce Website. This entire journey of has given us experiences and we have learned lots of things by applying to the real website and it gave us a lot of confidence.

Team Members and Contributors 😇 :