Bath Specials

Bath Specials is a global leader in personal care and home fragrance, including the #1 selling collections for fine fragrance mist, body lotion and body cream, 3-wick candles, home fragrance diffusers and liquid hand soap.

🛠 Built with

Technologies used in the project:

💻 Screenshots

Landing Page:

Product Page:

Cart Page:

Payment Page:

Dashboard section (admin side):

Category section (admin side):

Add product section (admin side):

Edit product section (admin side):

Orders section (admin side):

✨ Features

• User side:-

  • Register and Login page
  • Authentication using email & password
  • Products page
  • Sorting & filtering: by price, by rating, by sub-category
  • Add to cart
  • Payment page
  • Data fetching using deployed api

• Admin side:-

  • Login using admin credentials
  • Pages: Dashboard, category, add product and edit product
  • Dashboard gives stats by graphs and piecharts showing total of products
  • Detailed information of category and sub-category products on category page
  • CRUD functionality

🚀 Demo

Front-end deployed URL:

https://bathspecials.netlify.app/

📁 Folder structure

• public - This holds all of our static files

• src

  • assets - This folder holds assets such as images, docs, and fonts

  • components - This folder holds all of the different components that will make up our pages

  • pages - These represent a unique page on the website i.e. Home or About.

  • redux - It consists of store, reducer, action and actiontypes and is responsible for global state management of our app.

  • App.js - This is what renders all of our browser routes and different pages

  • index.js - This is what renders the react app by rendering App.js.

• package.json - Defines npm behaviors and packages for the client

README - This file!

Installation

Clone the project

git clone https://github.com/sbj1198/Bath-Specials.git

Client-side usage

Go to the project directory

$ yarn # or npm i    // npm install packages
$ npm run start        // run it locally

// deployment for client app
$ npm run build // this will compile the react code using webpack and generate a folder called docs in the root level

✍ Author

• @sbj1198