Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/m-sehrawat/mini-store

This project is about building an online E-commerce web application with backend integration including a lot of functionalities
https://github.com/m-sehrawat/mini-store

axios chakra-ui express javascript mongodb mongoose nodejs react react-router-dom redux redux-thunk

Last synced: about 1 month ago
JSON representation

This project is about building an online E-commerce web application with backend integration including a lot of functionalities

Awesome Lists containing this project

README 

        
Mini Store
 



It's a MERN Stack E-commerce web application with all the major functionalities








    reactjs

    redux

    chakra-ui

    restAPI

    css3   

    nodejs

    expressjs

    mongodb




Want to see live preview »



 

    
✧

    View Demo   ✧  

    Report Bug    ✧

    Getting Started ✧ Installing ✧    

    Author ✧

  


  

  Mini-Store is an e-commerce web application that allows you to buy shoes & clothes online. It has a variety of categories, just visit the product listing page and you will see all the products, apply filters as per your need and in just a few clicks you can buy any products from the website.

  

 

  

  ![1](https://user-images.githubusercontent.com/91532881/168818920-09cbf179-2ac5-489c-9cdf-e99653f9a5b9.png)

  

  


  

  ## Screens ( All screens are responsive along with Dark Mode)

   - Homepage

   - Product Listing Page with Filters

   - Product Description Page

   - Cart Management

   - Wishlist/Favourites Management

   - Checkout - Address Management

   - Login / Logout

   - Signup

   - Order Summary



![2](https://user-images.githubusercontent.com/91532881/168818963-328399b4-c459-472f-b452-7ce6a91adcf6.png)

![3](https://user-images.githubusercontent.com/91532881/168818970-ef2e11a5-9409-408e-ad43-961b238d0ec1.png)







## 🚀 Features

- Login/Signup User Account

- Product Sorting Based on Price, Ratings, Namings

- Product Filters Based on Gender, Category, Grid View

- Products Pagination (Default 6 Products Per Page)

- Products Pagination Change Button (can set 4 products, 6 products or 8 products per page)

- Wishlist Add/Remove Items

- From wishlist to directly Add-to-Cart feature

- Cart Add/Remove Items

- Cart Update Quantities

- Address Management

- Order Summary

- Coupons are provided for the discount

- Order details of all ordered item

- Dark mode is available







## Glimpses of Mini-Store 🙈 :



  

    home

    signup

  

  

    products

    product-details

  

  

    wishlist

    cart

  

  

    checkout

    order-summary

  







## Test Coupon Codes

```

MINISTORE5     (for 5% Off)



MINISTORE10    (for 10% Off)



MINISTORE15    (for 15% Off)



MINISTORE20    (for 15% Off)



MINISTORE25    (for 25% Off)



MINISTORE30    (for 30% Off)



LUCKYDAY       (for 40% Off)



MONDAYSALE     (for 20% Off)



WEEKENDOFF     (for 20% Off)



MASAI30        (for 30% Off)

```





## Demo



[Check here to see the presentation video of this project](https://www.linkedin.com/posts/m-sehrawat_programming-marketing-computerscience-activity-6932731204051816448-q0vg?utm_source=linkedin_share&utm_medium=member_desktop_web)







## Getting Started



This project was built using React v 17.0.2, Redux v 4.1.1, Chakra UI, CSS, JavaScript, Rest API, Node JS, Express and MongoDB. It is an e-commerce web application and for running on your local environment you should follow these guidelines.



### Prerequisites



- NPM 

- Node JS

- MongoDB



### Setup



The project repository can be found in [GitHub link](https://github.com/m-sehrawat/Mini-Store) or just clone the project using this command. 



```

Using HTTPS



# git clone  https://github.com/m-sehrawat/Mini-Store.git

```



+ Open terminal on your workspace with



```

cd /home/workspace/Mini-Store

```



## Install



Install NPM



Check that you have node and npm installed



To check if you have Node.js installed, run this command in your terminal:



```

node -v

```



To confirm that you have npm installed you can run this command in your terminal:



```

npm -v

```



To confirm that you have MongoDB installed you can run this command in your terminal:



```

mongo -v

```



To install all the dependences of the project, run the following command:



```

cd client



npm install



cd ../



cd server



npm install

```



To run the application got to the client folder and run the following command:



```

npm start

```



### Environment Variables



To run this project, you will need to add the following environment variables to your .env file in server folder



`JWT_ACCESS_KEY`



`MONGO_PATH`



### Tools used on this project



- Visual Studio Code

- create-react-app template

- MongoDB compass







## Contact



If you want to contact me, you can reach me through below handles.



[![linkedin](https://img.shields.io/badge/Mohit_Sehrawat-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/m-sehrawat/)

[![Twitter](https://img.shields.io/badge/Mohit_Sehrawat-20232A?style=for-the-badge&logo=Github&logoColor=white)](https://github.com/m-sehrawat/)



© 2022 Mohit Sehrawat



## Show your support



Give a ⭐️ if you like this project!