Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sbj1198/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.
https://github.com/sbj1198/bath-specials

chakra-ui ecommerce-webapp react react-redux react-router-v6 redux redux-thunk

Last synced: about 2 months ago
JSON representation

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.

Awesome Lists containing this project

README

        

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:

![Javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![React-Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white)

![Chakra-UI](https://img.shields.io/badge/Chakra--UI-319795?style=for-the-badge&logo=chakra-ui&logoColor=white)

## 💻 Screenshots

**Landing Page:**
![Landing Page](https://user-images.githubusercontent.com/49484642/220926119-971a7845-2a00-4ea9-8125-7ffc0f1fae9a.png)

**Product Page:**
![Product Page](https://user-images.githubusercontent.com/105644684/202831467-fe6e0554-02e2-42b1-affe-3c0814dfe733.JPG)

**Cart Page:**
![Cart Page](https://user-images.githubusercontent.com/105644684/202831469-85e878e3-1b9a-4b6a-a0b4-bcd2eaad9470.JPG)

**Payment Page:**
![Payment Page](https://user-images.githubusercontent.com/105644684/202831471-f3e256e4-fff0-4acf-8faf-7ab5045c25b5.JPG)

**Dashboard section (admin side):**
![Dashboard section (admin side)](https://user-images.githubusercontent.com/105644684/202831472-65eb3730-0696-4f10-9721-f8c91ef0d449.JPG)

**Category section (admin side):**
![Category section (admin side)](https://user-images.githubusercontent.com/105644684/202831473-73ad6639-8848-42c5-8eff-a3d494200c75.JPG)

**Add product section (admin side):**
![Add product section (admin side)](https://user-images.githubusercontent.com/105644684/202831474-10b6dd09-6fbf-407f-92fe-8dbbf65ba7aa.JPG)

**Edit product section (admin side):**
![Add product section (admin side)](https://user-images.githubusercontent.com/105644684/202831476-a3b00510-314e-42a1-a267-040561ca7654.JPG)

**Orders section (admin side):**
![Orders section (admin side)](https://user-images.githubusercontent.com/105644684/202831480-054525e8-e7a5-4c14-a424-bbc2357a6cc9.JPG)

## ✨ 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
```bash
git clone https://github.com/sbj1198/Bath-Specials.git
```
## Client-side usage

Go to the project directory

```bash
$ 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](https://github.com/sbj1198)

##