Nike Clone

screenshot of Nike Clone
express
react
chakra-ui

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.

Overview:

Nike Clone is a MERN Stack e-commerce web application that allows users to buy shoes and clothes online. It integrates a payment gateway for secure transactions. The application features various categories, a product listing page with filters, a product description page, cart and wishlist management pages, checkout with address management, login, signup, and order summary pages.

Features:

  • Login and Signup User Account: Users can create an account and authenticate themselves using JWT (Json Web Token).
  • Product Filters: Users can filter products based on price, category, size, color, and gender.
  • Product Sorting: Users can sort products based on price, rating, and name.
  • My Orders Section: Users can view detailed information about their past orders.
  • Wishlist Management: Users can add and remove items from their wishlist.
  • Cart Management: Users can add and remove items from their shopping cart and update quantities.
  • Address Management: Users can manage their addresses for checkout.
  • Order Summary: Users can view a summary of their order before proceeding to payment.
  • Coupons: Coupons are provided for discounts on purchases.
  • Razorpay Payment Gateway: Integration with Razorpay payment gateway for secure and convenient online payments.
  • Dark Mode: The application supports dark mode for better user experience.

Prerequisites:

  • Node.js and NPM should be installed.
  • MongoDB should be installed.
  • Visual Studio Code, Vite-JS template, and MongoDB Compass should be installed.

Setup:

  1. Clone the project from the GitHub repository.
  2. Open a terminal in your workspace and navigate to the project directory.
  3. Install the project dependencies by running the following command:
npm install
  1. To run the application, go to the client folder and run the following command:
npm start
  1. Add the following environment variables to your .env file in the server folder:
JWT_ACCESS_KEY
MONGO_PATH
RAZORPAY_KEY_ID
RAZORPAY_KEY_SECRET

Summary:

Nike Clone is an e-commerce web application that enables users to purchase shoes and clothes online. It offers a variety of features such as user authentication, product filtering and sorting, cart and wishlist management, order management, address management, and secure payment integration. The application is built using the MERN Stack and utilizes React, Redux, Chakra UI, HTML, CSS, JavaScript, Rest API, Node JS, Express, and MongoDB with JWT and RazorPay integration. With its intuitive design and functionality, Nike Clone provides an excellent platform for online shopping.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.