Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/m-sehrawat/nike-clone
It’s my major project where I've used MERN stack to make the clone of Nike website along with backend integration and payment gateway integration.
https://github.com/m-sehrawat/nike-clone
chakra-ui css express html javascript mongodb node-js payment-integration razorpay react redux rest-api
Last synced: about 1 month ago
JSON representation
It’s my major project where I've used MERN stack to make the clone of Nike website along with backend integration and payment gateway integration.
- Host: GitHub
- URL: https://github.com/m-sehrawat/nike-clone
- Owner: m-sehrawat
- Created: 2022-03-29T17:26:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-21T12:04:03.000Z (11 months ago)
- Last Synced: 2024-01-22T13:46:16.694Z (11 months ago)
- Topics: chakra-ui, css, express, html, javascript, mongodb, node-js, payment-integration, razorpay, react, redux, rest-api
- Language: JavaScript
- Homepage: https://mohit-nikeclone.vercel.app/
- Size: 764 KB
- Stars: 43
- Watchers: 1
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Nike Clone
It's a MERN Stack E-commerce web application with all the major functionalities
🖥️ Tech Stack
Frontend:
Backend:
Payment Gateway:
Deployed On:
Want to see live preview »
✧
View Demo ✧
Report Bug ✧
Getting Started ✧
Installing ✧
Author ✧
Nike Clone is MERN Stack e-commerce web application that allows you to buy shoes & clothes online with payment gateway integration. 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. This project is just for educational purpose.
## Screens ( All screens are responsive along with Dark Mode)
- Homepage / Landing Page
- Product Listing Page with Filters
- Product Description Page
- Cart Management Page
- Wishlist/Favourites Management Page
- Checkout with Address Management Page
- Login / Logout Page
- Signup Page
- Order Summary Page
## 🚀 Features
- Login and Signup User Account
- JWT (Json Web Token) Authentication and BcryptJS Password Hashing
- Product Filters Based on Price, Category, Size, Color and Gender
- Product Sorting Based on Price, Rating and Name
- Product Filtering and Sorting works together
- My Orders Section for details of all ordered item
- Wishlist Add and Remove Items
- Cart Add and Remove Items
- Cart Update Quantities
- Address Management
- Order Summary
- Coupons provided for discount
- Razorpay Payment Gateway
- Darkmode available
## Glimpses of Nike-Clone 🙈 :
## Test Coupon Codes
```
NIKE5 (for 5% Off)
NIKE10 (for 10% Off)
NIKE15 (for 15% Off)
NIKE20 (for 15% Off)
NIKE25 (for 25% Off)
NIKE30 (for 30% Off)
```
## Razorpay test payment Cards
[Click here to use the razorpay testing payment methods](https://razorpay.com/docs/payments/payments/test-card-upi-details/)
Demo
[Click here to see the presentation video of this project](https://www.linkedin.com/posts/m-sehrawat_reactjs-nike-nikecareers-activity-6947552300534042624-me2_?utm_source=linkedin_share&utm_medium=member_desktop_web)
## Getting Started
This project was built using React, Redux, Chakra UI, HTML, CSS, JavaScript, Rest API, Node JS, Express and MongoDB with JWT and RazorPay integration. 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/Nike-Clone) or just clone the project using this command.
```
Using HTTPS
# git clone https://github.com/m-sehrawat/Nike-Clone.git
```
+ Open terminal on your workspace with
```
cd /home/workspace/Nike-Clone
```
## 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`
`RAZORPAY_KEY_ID`
`RAZORPAY_KEY_SECRET`
### Tools used on this project
- Visual Studio Code
- Vite-JS template
- MongoDB compass
- Razorpay Dashboard to monitor payments
## Contact
If you want to contact me, you can reach me through below handles.
[](https://www.linkedin.com/in/m-sehrawat/)
[](https://github.com/m-sehrawat/)
© 2022 Mohit Sehrawat
## Show your support
Give a ⭐️ if you like this project!