MANHATTAN D

A mock e-commerce website specialising in selling mid-high fashion clothing.

Table of Contents

• About
• Features
• Tech Stack
• Installation
• Website Wireframe
• Screenshots
• API Endpoints
• Next Steps
• Contact

About

MANHATTAN D offers a diverse range of clothing inclusive of tops, bottoms, shoes, bags and accessories. Our intuitive design and secure payment systems ensure a smooth shopping experience for our users.

Features

• Display of products within their relevant categories i.e. tops, bottoms, shoes, bags, accessories
• Display of individual product details via modal
• Shopping cart functionalities
  • Listing out of items that were added to cart
  • Calculation of total cart value
• Checkout functionalities
  • Acceptance of user inputs i.e. name, email address, address, and storage in database
  • Secure payment gateway integration
  • Decrement of relevant stocks once payment intent is made i.e. after user keys in shipping details

Tech Stack

Front-end: React

Back-end: Node.js, Express.js

UI Components: Material UI

Payment: Stripe.js

Routing: React Router

Database: MongoDB

Installation

1. Clone the Repository

Copy code
git clone https://github.com/di-wee/Project-Manhatten-D.git
cd Project-Manhatten-D

2. Backend Setup Navigate to the backend directory:

Copy code
cd Backend

Install the required npm packages:

npm init -y
npm i express mongoose dotenv stripe

3. Frontend Setup Navigate to the frontend directory: React

Copy code
cd React

Install the required npm packages:

Copy code
npm install react-router-dom
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
npm install stripe

4. Environment Variables Create a .env file in the root of your backend directory and fill in the required variables, for instance:

Copy code
DB_CONNECTION_STRING=your_mongodb_connection_string
STRIPE_SECRET_KEY=your_stripe_secret_key

Replace placeholders like your_mongodb_connection_string with the actual details.

5. Starting the Application

Backend:

From the backend directory, run:

Copy code
npm run dev

By default, the backend might run on http://localhost:5000 unless you've set it up differently.

Frontend:

From the frontend directory, run:

Copy code
npm run dev

By default, this will start the React development server, typically on http://localhost:3000.

Website Wireframe

Screenshots

Landing Page

Product Category Page

Product Details Modal

Shopping Cart

Checkout

Payment

Order Confirmation

FAQ

API Endpoints

Method	Endpoint	Description
GET	/api/product	Get all products
GET	/api/:productId	Get 1 product by its ID
POST	/api/:product	Add a new product
PUT	/api/:productId	Update a product by its ID
DELETE	/api/:productId	Delete a product by its ID
PUT	/api/address	Add a new address
GET	/api/address	Get all addresses
POST	/api/address/:id	Get an address by its ID
PATCH	/api/address/:id	Update an address by its ID
DELETE	/api/address/:id	Delete a product by its ID
POST	/api/cart	Create an empty cart
GET	/api/cart/:id	Get item in the cart
PUT	/api/cart	Add item in cart
PATCH	/api/cart	Update items in cart
DELETE	/api/cart	Delete item from cart
POST	/api/payment/intent/:cartId	Create new payment
GET	/api/payment/:paymentIntentId	Get payment

Next Steps

• User authentication and profile management
• Product search and filtering function
• Responsive design for mobile and desktop users
• Admin dashboard for product and order management

Contact

LinkedIn LinkedIn LinkedIn LinkedIn