Shoe Shoppee

📃 About The Project

An E-Commerece App to buy your favourite brand shoes and make your footwear collection grow.

More images are located inside documentation directory

---

💫 Features

Implemented

• Shopping cart with checkout process.
• User profile with user's previous orders.
• Products pagination, search, place order, and review.
• Seed data (products & users) from the seeder file present.
• Admin functionality to manage and edit user, products and orders.

Not Implemented

• Responsive UI.
• Online Payment functionality.
• Delete a User without being admin.
• Filter products based on type and category.
• Image upload when adding a new Product by Admin.

🏗️ Built With

• ⚛️ React
• 🎨 Ant Design
• 📡 NodeJs
• 🗃 MongoDB
• 🏷 TypeScript

---

🧩 Getting Started

To get a local copy up and running follow these simple steps.

Starting the development server with docker 🐳

Prerequisites

Make sure you have Docker and docker-compose installed on your machine.

Steps to start the server

1. Add environment variable MONGO_URI in backend directory.

2. Run the following command in the project directory itself.

   docker-compose up --build

3. Open http://localhost:8080 to view it in the browser.

Starting the development server without docker 📡

Prerequisites

Make sure you have Node and TypeScript installed on your machine.

NOTE:

The project was made with node version 14.15.

Steps to start the server

1. Add environment files in both backend and frontend/web directories.

   backend/.env file

   NODE_ENV = development
   PORT = 5000
   MONGO_URI = <URI>
   JWT_SECRET = <Secret Key>

   frontend/web/.env file

   NODE_ENV = "development"
   REACT_APP_PRODUCTION_API_ENDPOINT = "production_url"
   REACT_APP_DEVELOPMENT_API_ENDPOINT = "http://localhost:5000"

2. To install all the dependencies run the following command in both backend and frontend/web directory.

   yarn install

3. Change the import in index.css file to default ant design styles or customize your css in the theme.less file and generate your css with the following command in the frontend/web/src/styles directory.

   lessc --js theme.less theme.css

   NOTE: Make sure you have installed less globally

4. Run the following command in the backend directory to start both server and React app.

   yarn dev

5. Open http://localhost:3000 to view it in the browser.

🔐 License

This project is licensed under the MIT License - see the LICENSE.md file for details

👏 Acknowledgements

• Anish Kargoankar's article for React starter template -> link to article
• Brad Traversy's Proshop repository for the backend and frontend flow -> link to repo