# abidev2003/ecommerce-react-ssd architecture

> Architecture diagram of the GitHub repository abidev2003/ecommerce-react-ssd, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abidev2003/ecommerce-react-ssd
- Repository: https://github.com/abidev2003/ecommerce-react-ssd

## Overview

1. This repository contains a full e-commerce application split into three main areas: a Node backend API, a current React/Vite frontend, and an older JavaScript frontend kept under `old-projects/` as a legacy/reference copy.

2. The backend lives in `ecommerce-backend-ai-main/backend` and is organized around four core domain entities: products, cart items, delivery options, and orders. Those shapes are formalized in `models/`, with matching seed/default data in `defaultData/`.

3. The backend persistence model is file-based rather than database-backed. Runtime state is stored in JSON files such as `products.json`, `cart.json`, `orders.json`, and `deliveryOptions.json`, with `reset` support to restore the state from the default fixtures.

4. The backend API surface is split by resource under `routes/`: `products`, `cartItems`, `deliveryOptions`, `orders`, `paymentSummary`, and `reset`. This suggests a request flow where the client reads product/catalog data, mutates cart state, submits or reads orders, and asks the server to compute payment totals.

5. `server.js` is the backend entry point and likely wires the route modules together into a single HTTP service. The `paymentSummary` route is an important service boundary because it centralizes cart/order pricing logic instead of leaving it entirely in the UI.

6. The frontend in `ecommerce-project` is a TypeScript React app built with Vite. Its architecture is page-oriented: `HomePage`, `CheckoutPage`, `OrdersPage`, `TrackingPage`, and `NotFoundPage` represent the main user journeys, with `App.tsx` acting as the shell/router host.

7. UI composition on the frontend is layered. Shared structure is handled by `Header`, while feature-specific subcomponents live under the relevant page folders, especially the checkout area (`CartItemDetails`, `DeliveryOptions`, `DeliveryDate`, `OrderSummery`, `PaymentSummery`) and orders area (`OrdersGrid`, `OrderHeader`, `OrderDetailGrid`).

8. Data flow in the frontend is centered on commerce workflows: browse products on the home page, assemble a cart, choose a delivery option during checkout, view payment/order summaries, then navigate to order history and tracking views. The page and component names show that the UI mirrors the backend domain model closely.

9. Static assets are part of the delivery boundary for both apps. Product and rating images are stored under image folders in the backend and in the frontend’s `public/images`, indicating the app depends on image assets being served as static files rather than fetched from an external media service.

10. Shared business logic is minimal but explicit. The frontend has `src/utils/money.ts` for formatting/calculation helpers, while the backend owns the canonical data and summary computation. That separation keeps presentation concerns in the client and state/aggregation concerns on the server.

11. Testing is built into both layers. The frontend uses Vitest and component tests alongside the pages/components, while the backend includes supporting files and patches for its runtime dependencies. The presence of tests near each feature folder suggests the project is organized by feature slice rather than by technical layer alone.

12. The `old-projects/ecommerce-project-js` tree is a full earlier version of the frontend in plain JavaScript. It mirrors the current TypeScript app’s structure very closely, so it is best treated as legacy code or a migration checkpoint, not a separate runtime system.

13. Overall, the architecture is a two-tier commerce system: a file-backed REST API for catalog/cart/order state, and a client-side React application that renders the shopping flows and consumes that API. The most important diagram boundaries are client UI, backend service/routes, JSON persistence, and static asset storage.

Main entry points: [`ecommerce-backend-ai-main/server.js`](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/server.js) (Server), [`ecommerce-project/src/App.tsx`](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/App.tsx) (App Shell), [`ecommerce-backend-ai-main/routes/orders.js`](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/orders.js) (Orders API), [`ecommerce-backend-ai-main/models/index.js`](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/models/index.js) (Domain Models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend API"]
  node_backend_server["Server<br/>HTTP entry<br/>[server.js]"]
  node_backend_routes_products["Products API<br/>route<br/>[products.js]"]
  node_backend_routes_cart["Cart API<br/>route<br/>[cartItems.js]"]
  node_backend_routes_delivery["Delivery API<br/>route<br/>[deliveryOptions.js]"]
  node_backend_routes_orders["Orders API<br/>route<br/>[orders.js]"]
  node_backend_routes_summary["Pricing API<br/>route<br/>[paymentSummary.js]"]
  node_backend_routes_reset["Reset API<br/>route<br/>[reset.js]"]
  node_backend_models["Domain Models<br/>schema layer<br/>[index.js]"]
  node_backend_defaults["Default Data<br/>fixtures"]
  node_backend_state[("JSON Store<br/>file state")]
  node_backend_images["Media Assets<br/>static assets"]
end

subgraph group_frontend["React Frontend"]
  node_frontend_app["App Shell<br/>React shell<br/>[App.tsx]"]
  node_frontend_header["Header<br/>shared UI<br/>[Header.tsx]"]
  node_frontend_home["Home Page<br/>[HomePage.jsx]"]
  node_frontend_checkout["Checkout Page<br/>[CheckoutPage.jsx]"]
  node_frontend_orders["Orders Page<br/>[OrdersPage.jsx]"]
  node_frontend_tracking["Aux Pages<br/>page set<br/>[TrackingPage.jsx]"]
  node_frontend_money["Money Utils<br/>client util<br/>[money.ts]"]
  node_frontend_public_images["Public Images<br/>static assets"]
end

subgraph group_legacy["Legacy Frontend"]
  node_legacy_app["Legacy App<br/>React shell<br/>[App.jsx]"]
  node_legacy_pages["Legacy Pages<br/>page set"]
  node_legacy_money["Legacy Money<br/>client util<br/>[money.js]"]
end

node_backend_server -->|"mounts"| node_backend_routes_products
node_backend_server -->|"mounts"| node_backend_routes_cart
node_backend_server -->|"mounts"| node_backend_routes_delivery
node_backend_server -->|"mounts"| node_backend_routes_orders
node_backend_server -->|"mounts"| node_backend_routes_summary
node_backend_server -->|"mounts"| node_backend_routes_reset
node_backend_server -->|"uses"| node_backend_models
node_backend_server -->|"persists"| node_backend_state
node_backend_server -.->|"seeds from"| node_backend_defaults
node_backend_routes_products -->|"reads"| node_backend_models
node_backend_routes_cart -->|"reads/writes"| node_backend_models
node_backend_routes_cart -->|"stores"| node_backend_state
node_backend_routes_delivery -->|"reads"| node_backend_models
node_backend_routes_delivery -->|"stores"| node_backend_state
node_backend_routes_orders -->|"reads/writes"| node_backend_models
node_backend_routes_orders -->|"stores"| node_backend_state
node_backend_routes_summary -->|"reads"| node_backend_state
node_backend_routes_summary -->|"uses"| node_backend_models
node_backend_routes_reset -->|"loads"| node_backend_defaults
node_backend_routes_reset -->|"overwrites"| node_backend_state
node_frontend_app -->|"composes"| node_frontend_header
node_frontend_app -->|"routes to"| node_frontend_home
node_frontend_app -->|"routes to"| node_frontend_checkout
node_frontend_app -->|"routes to"| node_frontend_orders
node_frontend_app -->|"routes to"| node_frontend_tracking
node_frontend_app -->|"uses"| node_frontend_money
node_frontend_home -->|"fetches"| node_backend_routes_products
node_frontend_home -->|"renders"| node_frontend_public_images
node_frontend_checkout -->|"fetches"| node_backend_routes_cart
node_frontend_checkout -->|"fetches"| node_backend_routes_delivery
node_frontend_checkout -->|"fetches"| node_backend_routes_summary
node_frontend_checkout -->|"submits"| node_backend_routes_orders
node_frontend_orders -->|"fetches"| node_backend_routes_orders
node_frontend_tracking -->|"fetches"| node_backend_routes_orders
node_legacy_app -->|"composes"| node_legacy_pages
node_legacy_app -->|"uses"| node_legacy_money

click node_backend_server "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/server.js"
click node_backend_routes_products "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/products.js"
click node_backend_routes_cart "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/cartItems.js"
click node_backend_routes_delivery "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/deliveryOptions.js"
click node_backend_routes_orders "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/orders.js"
click node_backend_routes_summary "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/paymentSummary.js"
click node_backend_routes_reset "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/reset.js"
click node_backend_models "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/models/index.js"
click node_backend_defaults "https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/defaultData"
click node_backend_state "https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/backend"
click node_backend_images "https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/images"
click node_frontend_app "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/App.tsx"
click node_frontend_header "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/components/Header.tsx"
click node_frontend_home "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/home/HomePage.jsx"
click node_frontend_checkout "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/checkout/CheckoutPage.jsx"
click node_frontend_orders "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/orders/OrdersPage.jsx"
click node_frontend_tracking "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/TrackingPage.jsx"
click node_frontend_money "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/utils/money.ts"
click node_frontend_public_images "https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-project/public/images"
click node_legacy_app "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/old-projects/ecommerce-project-js/src/App.jsx"
click node_legacy_pages "https://github.com/abidev2003/ecommerce-react-ssd/tree/main/old-projects/ecommerce-project-js/src/pages"
click node_legacy_money "https://github.com/abidev2003/ecommerce-react-ssd/blob/main/old-projects/ecommerce-project-js/src/utils/money.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_backend_server,node_backend_routes_products,node_backend_routes_cart,node_backend_routes_delivery,node_backend_routes_orders,node_backend_routes_summary,node_backend_routes_reset,node_backend_models,node_backend_defaults,node_backend_state,node_backend_images toneBlue
class node_frontend_app,node_frontend_header,node_frontend_home,node_frontend_checkout,node_frontend_orders,node_frontend_tracking,node_frontend_money,node_frontend_public_images toneAmber
class node_legacy_app,node_legacy_pages,node_legacy_money toneMint
```

## Components

### Backend API

Node service, route handlers, schema models, and file-backed persistence.

- [Server](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/server.js): HTTP entry · Bootstraps the backend and wires routes. · `ecommerce-backend-ai-main/server.js`
- [Products API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/products.js): route · Catalog read endpoint. · `ecommerce-backend-ai-main/routes/products.js`
- [Cart API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/cartItems.js): route · Cart item state mutations and reads. · `ecommerce-backend-ai-main/routes/cartItems.js`
- [Delivery API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/deliveryOptions.js): route · Delivery option catalog and selection flow. · `ecommerce-backend-ai-main/routes/deliveryOptions.js`
- [Orders API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/orders.js): route · Order creation and history endpoints. · `ecommerce-backend-ai-main/routes/orders.js`
- [Pricing API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/paymentSummary.js): route · Central payment and totals calculation boundary. · `ecommerce-backend-ai-main/routes/paymentSummary.js`
- [Reset API](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/routes/reset.js): route · Restores runtime state from fixtures. · `ecommerce-backend-ai-main/routes/reset.js`
- [Domain Models](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-backend-ai-main/models/index.js): schema layer · Canonical shapes for products, cart items, delivery options, and orders. · `ecommerce-backend-ai-main/models/index.js`
- [Default Data](https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/defaultData): fixtures · Seed data used to repopulate file state. · `ecommerce-backend-ai-main/defaultData`
- [JSON Store](https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/backend): file state · Runtime persistence for catalog, cart, orders, and delivery data. · `ecommerce-backend-ai-main/backend`
- [Media Assets](https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-backend-ai-main/images): static assets · Backend-served product and rating images. · `ecommerce-backend-ai-main/images`

### React Frontend

Current TypeScript/Vite commerce UI and shared client utilities.

- [App Shell](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/App.tsx): React shell · Client router and top-level composition. · `ecommerce-project/src/App.tsx`
- [Header](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/components/Header.tsx): shared UI · Global navigation and site chrome. · `ecommerce-project/src/components/Header.tsx`
- [Home Page](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/home/HomePage.jsx): page · Browse products and add to cart. · `ecommerce-project/src/pages/home/HomePage.jsx`
- [Checkout Page](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/checkout/CheckoutPage.jsx): page · Cart review, delivery choice, and purchase summary. · `ecommerce-project/src/pages/checkout/CheckoutPage.jsx`
- [Orders Page](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/orders/OrdersPage.jsx): page · Order history and detail views. · `ecommerce-project/src/pages/orders/OrdersPage.jsx`
- [Aux Pages](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/pages/TrackingPage.jsx): page set · Tracking and not-found routes. · `ecommerce-project/src/pages/TrackingPage.jsx`
- [Money Utils](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/ecommerce-project/src/utils/money.ts): client util · Client-side formatting and money helpers. · `ecommerce-project/src/utils/money.ts`
- [Public Images](https://github.com/abidev2003/ecommerce-react-ssd/tree/main/ecommerce-project/public/images): static assets · Frontend-served product and rating images. · `ecommerce-project/public/images`

### Legacy Frontend

Older JavaScript version kept as a reference/migration checkpoint.

- [Legacy App](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/old-projects/ecommerce-project-js/src/App.jsx): React shell · Older JavaScript frontend entrypoint. · `old-projects/ecommerce-project-js/src/App.jsx`
- [Legacy Pages](https://github.com/abidev2003/ecommerce-react-ssd/tree/main/old-projects/ecommerce-project-js/src/pages): page set · Previous checkout, home, orders, and auxiliary views. · `old-projects/ecommerce-project-js/src/pages`
- [Legacy Money](https://github.com/abidev2003/ecommerce-react-ssd/blob/main/old-projects/ecommerce-project-js/src/utils/money.js): client util · Old formatting helper kept alongside the legacy app. · `old-projects/ecommerce-project-js/src/utils/money.js`

## Connections

- Server → Products API: mounts · Server exposes the catalog endpoint.
- Server → Cart API: mounts · Server exposes cart state endpoints.
- Server → Delivery API: mounts · Server exposes delivery option endpoints.
- Server → Orders API: mounts · Server exposes order endpoints.
- Server → Pricing API: mounts · Server exposes pricing summary endpoints.
- Server → Reset API: mounts · Server exposes reset support.
- Server → Domain Models: uses · Request handlers rely on the canonical domain shapes.
- Server → JSON Store: persists · Server reads and writes the JSON-backed runtime state.
- Server → Default Data: seeds from · Reset flow restores state from fixtures.
- Products API → Domain Models: reads · Catalog responses are shaped by product models.
- Cart API → Domain Models: reads/writes · Cart items are validated against the domain model.
- Cart API → JSON Store: stores · Cart mutations are serialized to JSON files.
- Delivery API → Domain Models: reads · Delivery options follow the shared schema.
- Delivery API → JSON Store: stores · Delivery selection is kept in file state.
- Orders API → Domain Models: reads/writes · Orders are created from the shared order model.
- Orders API → JSON Store: stores · Orders are persisted in JSON.
- Pricing API → JSON Store: reads · Pricing uses the current cart/order state.
- Pricing API → Domain Models: uses · Totals are computed from domain entities.
- Reset API → Default Data: loads · Reset endpoint reloads fixture data.
- Reset API → JSON Store: overwrites · Reset endpoint restores runtime JSON files.
- App Shell → Header: composes · Global shell includes shared header chrome.
- App Shell → Home Page: routes to · One main journey is product browsing.
- App Shell → Checkout Page: routes to · One main journey is checkout.
- App Shell → Orders Page: routes to · One main journey is order history.
- App Shell → Aux Pages: routes to · Auxiliary navigation pages are hosted here.
- App Shell → Money Utils: uses · Shared money helpers support UI calculations.
- Home Page → Products API: fetches · Home page loads the catalog from the API.
- Home Page → Public Images: renders · Product imagery is served from local static assets.
- Checkout Page → Cart API: fetches · Checkout reads and updates cart state.
- Checkout Page → Delivery API: fetches · Checkout loads delivery choices.
- Checkout Page → Pricing API: fetches · Checkout displays pricing totals from the server.
- Checkout Page → Orders API: submits · Checkout completes the order workflow.
- Orders Page → Orders API: fetches · Orders page loads order history.
- Aux Pages → Orders API: fetches · Tracking views depend on order data.
- Legacy App → Legacy Pages: composes · Legacy shell hosts the older page set.
- Legacy App → Legacy Money: uses · Legacy UI uses the older money helper.