E commerce

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager
• git

Setup Instructions

1. Clone the repository:

   git clone https://github.com/Amitrajit007/e-commerce
   cd e-commerce #if needed

2. Install dependencies:

3. For frontend

cd client
npm install

2. For backend

cd server
npm install

3. Start the development server:
4. start the server

cd server
npm run dev

1. start the server

cd server
npm run dev

1. start the frontend

cd client
npm run dev

Usage

Getting Started

1. Open your browser and navigate to http://localhost:5173 (or the port shown in terminal)
2. Explore
3. page routes are:

"/" = home page
"/checkout" = checkout page
"/orders" = orders page
"/track" = tracking page

4. explore all

Key Features Usage

• Sending Messages: Type in the input field and press Enter
• Viewing History: Scroll through the message list to see previous conversations

Client

tech stack

1. react
2. vite
3. tailwind

config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Development Tools

• Axios - Promise-based HTTP client
• npm - Package manager
• ESLint - Code linting
• Git - Version control
• nodemon - Testing server
• Prettier - Code formatter

Server

pages

Products, Delivery Options

• GET /api/products
• GET /api/delivery-options

Cart

• GET /api/cart-items
• POST /api/cart-items
• PUT /api/cart-items/:productId
• DELETE /api/cart-items/:productId

Orders

• GET /api/orders
• POST /api/orders
• GET /api/orders/:orderId

Payment Summary, Reset

• GET /api/payment-summary
• POST /api/reset

GET /api/products

Returns a list of products.

Query Parameters:

• search=... (optional): Search term to find products by name or keywords

Response:

[
  {
    "id": "uuid",
    "image": "string",
    "name": "string",
    "rating": {
      "stars": "number",
      "count": "number"
    },
    "priceCents": "number",
    "keywords": ["string"]
  }
]

GET /api/delivery-options

Returns a list of all delivery options.

Query Parameters:

• expand=estimatedDeliveryTime (optional): includes estimated delivery times

Response:

[
  {
    "id": "string",
    "deliveryDays": "number",
    "priceCents": "number",
    // Only included when expand=estimatedDeliveryTime
    "estimatedDeliveryTimeMs": "number"
  }
]

GET /api/cart-items

Returns all items in the cart.

Query Parameters:

• expand=product (optional): include full product details

Response:

[
  {
    "productId": "uuid",
    "quantity": "number",
    "deliveryOptionId": "string",
      // product object, only when expand=product
    "product": "object"
  }
]

POST /api/cart-items

Adds a product to the cart.

Request:

{
  "productId": "uuid",
  // Must be between 1 and 10
  "quantity": "number"
}

Response:

{
  "productId": "uuid",
  "quantity": "number",
  "deliveryOptionId": "string",
}

PUT /api/cart-items/:productId

Updates a cart item.

URL Parameters:

• productId: ID of the product to update

Request:

{
   // Optional, must be ≥ 1
  "quantity": "number",

   // Optional
  "deliveryOptionId": "string"
}

Response:

{
  "productId": "uuid",
  "quantity": "number",
  "deliveryOptionId": "string",
}

DELETE /api/cart-items/:productId

Removes an item from the cart.

URL Parameters:

• productId: ID of the product to remove

Response:

• Status: 204 (No response)

GET /api/orders

Returns all orders, sorted by most recent first.

Query Parameters:

• expand=products (optional): include full product details

Response:

[
  {
    "id": "uuid",
    "orderTimeMs": "number",
    "totalCostCents": "number",
    "products": [
      {
        "productId": "uuid",
        "quantity": "number",
        "estimatedDeliveryTimeMs": "number",
         // product object, only when expand=products
        "product": "object"
      }
    ]
  }
]

POST /api/orders

Creates a new order from the current cart items.

Response:

{
  "id": "uuid",
  "orderTimeMs": "number",
  "totalCostCents": "number",
  "products": [
    {
      "productId": "uuid",
      "quantity": "number",
      "estimatedDeliveryTimeMs": "number",
    }
  ]
}

• Side effect: Cart is emptied

GET /api/orders/:orderId

Returns a specific order.

URL Parameters:

• orderId: ID of the order

Query Parameters:

• expand=products (optional): include full product details

Response:

{
  "id": "uuid",
  "orderTimeMs": "number",
  "totalCostCents": "number",
  "products": [
    {
      "productId": "uuid",
      "quantity": "number",
      "estimatedDeliveryTimeMs": "number",
        // product object, only when expand=products
      "product": "object"
    }
  ]
}

GET /api/payment-summary

Calculates and returns the payment summary for the current cart.

Response:

{
  "totalItems": "number",
  "productCostCents": "number",
  "shippingCostCents": "number",
  "totalCostBeforeTaxCents": "number",
  "taxCents": "number",
  "totalCostCents": "number"
}

POST /api/reset

Resets the database to its default state.

Response:

• Status: 204 No Response

file structure

e-commerce
├───.gitignore
├───README.md
│
├───client
│   │   eslint.config.js
│   │   index.html
│   │   package.json
│   │   vite.config.js
│   │
│   ├───data
│   │       products.js
│   │
│   ├───images
│   │   ├───icons
│   │   ├───products
│   │   └───ratings
│   │
│   ├───public
│   └───src
│       │   App.jsx
│       │   index.css
│       │   main.jsx
│       │
│       ├───components
│       │       AllContext.jsx
│       │       AppContextProvider.jsx
│       │       CartItemCard.jsx
│       │       CheckoutCartItem.jsx
│       │       Header.jsx
│       │       HomeCard.jsx
│       │
│       ├───pages
│       │       Home.jsx
│       │       Checkout.jsx
│       │       Orders.jsx
│       │       Tracking.jsx
│       │
│       └───utils
│               deliveryDateFormating.js
│               formatCurrency.js
│               percentage.js
│               shippingText.js
│
└───server
    │   .env
    │   package.json
    │   server.js
    │
    ├───backend
    │       cart.json
    │       deliveryOptions.json
    │       orders.json
    │       products.json
    │
    ├───defaultData
    │       defaultCart.js
    │       defaultDeliveryOptions.js
    │       defaultOrders.js
    │       defaultProducts.js
    │
    ├───images
    │   ├───icons
    │   ├───products
    │   └───ratings
    │
    ├───models
    │       CartItem.js
    │       DeliveryOption.js
    │       Order.js
    │       Product.js
    │       index.js
    │
    └───routes
            cartItems.js
            deliveryOptions.js
            orders.js
            paymentSummary.js
            products.js
            reset.js