Nike Shop

Nike Shop is an e-commerce web app built with React.js and hosted on Netlify. This website imitates a real-world market where visitors can view products under different categories, select product for favoraite collection, serach products, add products to cart, confirm order, and see ordered products in profile page.

View Live🔷 Report Bug

📑 Table of Contents

1. About
2. Tech Stack
3. Getting Started
   • 3.2 Installation
4. Folder Structure
5. Features

1. About

Nike shop is an fully resposive e-commerce web app built with React.js and hosted on Netlify. The Backend api created by node js, express and mongoDB. This website imitates a real-world market. guest users just can view products, serach products, and add products to cart. signed-in users also can confirm order, select products for favoraite collection and see ordered with favorites products in profile page.

Back to Top ⤴️

2. Tech Stack

Back to Top ⤴️

3. Getting Started

Getting started with Nike Shop is fairly easy and simple. Follow the instructions as stated below -

3.1 Prerequisites

• You need to have Node.js installed on your computer beforehand to run this project. Follow this link to install Node.js on your computer.

3.2 Installation

1. Clone the repo

   git clone https://github.com/sasanaryan/nike.client.git

2. Install npm packages

   npm install

3. Start the development server

   npm start

Back to Top ⤴️

4. Folder Structure

. (Root)
├── public
├── src
│   ├── components    #(folder: Contains all components )
│   ├── context    #(folder: Contain Alert system that used context format in the project )
│   ├── data    #(folder: Including static and mock data )
│   ├── feature    #(folder: Including costum hooks)
│   ├── pages   #(folder: Including pages that used in routing)
│   ├── route   #(folder: Manages routing logic in application )
│   ├── services   #(folder: Api calling for user authentication )
│   ├── store    #(folder: Including user slice, cart slice   )
│   ├── theme    #(folder: Incuding MUI theme and styled components breakpoints)
│   ├── type    #(folder: Including Global type)
│   ├── App.tsx
│   ├── config.ts   # baseUrl for non-Token requests
│   └── index.tsx
│
├── .gitignore
├── craco.config.js
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.json

Back to Top ⤴️

5. Features

• Home: display of all Categories . Also includes displays products belonging to that Categories.
• Authentication: Register and login page for user sign-in and get user info with AccessToken and RefreshToken.
• Search: Search Section is used to search among products and showing result, finally by pressing the Enter key the search result is transferred to a separate page with a filters options.
• Categories: Categories page displaying all products related to the category with filters options.
• Product: Product page displaying product information that include title, images, price, description and size section for choosing size also include favorite and add to cart button.
• Cart: Displays a list of products added to the Cart.
• Profile: Displays ordered and favorite products.

Back to Top ⤴️