# g1thub-05/e-commerce-app architecture

> Architecture diagram of the GitHub repository g1thub-05/e-commerce-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-06). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/g1thub-05/e-commerce-app
- Repository: https://github.com/g1thub-05/e-commerce-app

## Overview

#### Purpose and Runtime
A client-side React e-commerce SPA for browsing FakeStore products, filtering/searching inventory, viewing details, and managing a simulated cart. It runs through Vite and is deployed as static hosting (README links to Vercel). Core runtime dependencies include React, React Router DOM, Axios, Context API, and React Toastify.

Paths: `src/main.jsx`, `src/App.jsx`, `vite.config.js`, `index.html`.

#### Application Bootstrap and Routing
`main.jsx` mounts the React application; `App.jsx` is the composition root for global providers, router-driven page selection, shared navigation, and app-level styling. Route protection is centralized rather than embedded in individual pages.

Paths: `src/main.jsx`, `src/App.jsx`, `src/components/ProtectedRoute/ProtectedRoute.jsx`.

#### Authentication Boundary
Authentication state and auth operations are separated from page UI in an Auth context plus an auth module. Login is its dedicated page; protected navigation passes through `ProtectedRoute`, creating the access-control boundary for routes that require an authenticated user.

Paths: `src/context/AuthContext.jsx`, `src/context/auth.js`, `src/pages/Login/Login.jsx`, `src/components/ProtectedRoute/ProtectedRoute.jsx`.

#### Product Data Integration
The service layer is the boundary between UI and the external FakeStore REST API, using Axios. Product-oriented pages consume this data to render catalog and detail views; the client owns presentation-level filtering rather than a backend domain service.

Paths: `src/services/api.js`, `src/pages/Home/Home.jsx`, `src/pages/ProductDetails/ProductDetails.jsx`.

#### Catalog Discovery Flow
Home is the catalog orchestration page: it obtains products, applies search/category selection, and renders reusable product cards. Search and category controls are independent UI components, allowing discovery state to remain coordinated by the catalog page.

Paths: `src/pages/Home/Home.jsx`, `src/components/SearchBar/SearchBar.jsx`, `src/components/CategoryFilter/CategoryFilter.jsx`, `src/components/ProductCard/ProductCard.jsx`.

#### Cart State and Checkout Simulation
Cart state is shared application-wide through `CartContext`. Product cards/details add products into that state; the Cart page renders line items and supports cart mutation through `CartItem`. Currency formatting is isolated for consistent price display. No payment, order, or server-side cart system is indicated.

Paths: `src/context/CartContext.jsx`, `src/pages/Cart/Cart.jsx`, `src/components/CartItem/CartItem.jsx`, `src/utils/currency.js`.

#### Shared UI and External Services
`Navbar` connects global navigation, authentication-aware access, and cart-oriented navigation across pages. Toastify provides user feedback for actions. The only described external business-data dependency is FakeStore API; Vercel is the documented deployment target.

Paths: `src/components/Navbar/Navbar.jsx`, `src/services/api.js`, `package.json`.

Main entry points: [`src/context/CartContext.jsx`](https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/CartContext.jsx) (Cart context), [`src/App.jsx`](https://github.com/g1thub-05/e-commerce-app/blob/main/src/App.jsx) (App composition), [`src/pages/Home/Home.jsx`](https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Home/Home.jsx) (Home catalog), [`src/context/AuthContext.jsx`](https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/AuthContext.jsx) (Auth context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_vite{{"Vite static host<br/>build runtime<br/>[vite.config.js]"}}
  node_html["HTML entry<br/>document<br/>[index.html]"]
  node_main["React bootstrap<br/>entrypoint<br/>[main.jsx]"]
  node_app["App composition<br/>router shell<br/>[App.jsx]"]
  node_navbar["Navbar<br/>shared UI<br/>[Navbar.jsx]"]
end

subgraph group_access["Authentication"]
  node_auth_context["Auth context<br/>global state<br/>[AuthContext.jsx]"]
  node_auth_module["Auth operations<br/>auth module<br/>[auth.js]"]
  node_protected_route["Protected route<br/>route guard<br/>[ProtectedRoute.jsx]"]
  node_login["Login<br/>page<br/>[Login.jsx]"]
end

subgraph group_catalog["Catalog"]
  node_api["API service<br/>Axios service<br/>[api.js]"]
  node_fakestore{{"FakeStore API<br/>external REST API"}}
  node_home["Home catalog<br/>page<br/>[Home.jsx]"]
  node_search["Search bar<br/>catalog control<br/>[SearchBar.jsx]"]
  node_category_filter["Category filter<br/>catalog control<br/>[CategoryFilter.jsx]"]
  node_product_card["Product card<br/>shared UI<br/>[ProductCard.jsx]"]
  node_product_details["Product details<br/>page<br/>[ProductDetails.jsx]"]
end

subgraph group_cart["Cart"]
  node_cart_context["Cart context<br/>global state<br/>[CartContext.jsx]"]
  node_cart["Cart<br/>page<br/>[Cart.jsx]"]
  node_cart_item["Cart item<br/>cart UI<br/>[CartItem.jsx]"]
  node_currency["Currency formatter<br/>[currency.js]"]
end

node_vite -->|"builds"| node_html
node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"provides"| node_auth_context
node_app -->|"provides"| node_cart_context
node_app -->|"renders"| node_navbar
node_app -->|"guards routes with"| node_protected_route
node_protected_route -->|"checks"| node_auth_context
node_login -->|"authenticates through"| node_auth_module
node_auth_module -->|"updates"| node_auth_context
node_navbar -->|"uses auth state"| node_auth_context
node_navbar -->|"shows cart access"| node_cart_context
node_home -->|"fetches products"| node_api
node_product_details -->|"fetches product"| node_api
node_api -->|"requests"| node_fakestore
node_home -->|"coordinates"| node_search
node_home -->|"coordinates"| node_category_filter
node_home -->|"renders"| node_product_card
node_product_card -->|"adds products"| node_cart_context
node_product_details -->|"adds products"| node_cart_context
node_cart -->|"reads and mutates"| node_cart_context
node_cart -->|"renders"| node_cart_item
node_cart_item -->|"mutates line"| node_cart_context
node_cart_item -->|"formats price"| node_currency

click node_vite "https://github.com/g1thub-05/e-commerce-app/blob/main/vite.config.js"
click node_html "https://github.com/g1thub-05/e-commerce-app/blob/main/index.html"
click node_main "https://github.com/g1thub-05/e-commerce-app/blob/main/src/main.jsx"
click node_app "https://github.com/g1thub-05/e-commerce-app/blob/main/src/App.jsx"
click node_navbar "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/Navbar/Navbar.jsx"
click node_auth_context "https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/AuthContext.jsx"
click node_auth_module "https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/auth.js"
click node_protected_route "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/ProtectedRoute/ProtectedRoute.jsx"
click node_login "https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Login/Login.jsx"
click node_api "https://github.com/g1thub-05/e-commerce-app/blob/main/src/services/api.js"
click node_home "https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Home/Home.jsx"
click node_search "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/SearchBar/SearchBar.jsx"
click node_category_filter "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/CategoryFilter/CategoryFilter.jsx"
click node_product_card "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/ProductCard/ProductCard.jsx"
click node_product_details "https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/ProductDetails/ProductDetails.jsx"
click node_cart_context "https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/CartContext.jsx"
click node_cart "https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Cart/Cart.jsx"
click node_cart_item "https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/CartItem/CartItem.jsx"
click node_currency "https://github.com/g1thub-05/e-commerce-app/blob/main/src/utils/currency.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_vite,node_html,node_main,node_app,node_navbar toneBlue
class node_auth_context,node_auth_module,node_protected_route,node_login toneAmber
class node_api,node_fakestore,node_home,node_search,node_category_filter,node_product_card,node_product_details toneMint
class node_cart_context,node_cart,node_cart_item,node_currency toneRose
```

## Components

### Runtime

- [Vite static host](https://github.com/g1thub-05/e-commerce-app/blob/main/vite.config.js): build runtime · Builds the SPA for static deployment. · `vite.config.js`
- [HTML entry](https://github.com/g1thub-05/e-commerce-app/blob/main/index.html): document · `index.html`
- [React bootstrap](https://github.com/g1thub-05/e-commerce-app/blob/main/src/main.jsx): entrypoint · `src/main.jsx`
- [App composition](https://github.com/g1thub-05/e-commerce-app/blob/main/src/App.jsx): router shell · Composes providers, routes, navigation, and app styling. · `src/App.jsx`
- [Navbar](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/Navbar/Navbar.jsx): shared UI · `src/components/Navbar/Navbar.jsx`

### Authentication

- [Auth context](https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/AuthContext.jsx): global state · `src/context/AuthContext.jsx`
- [Auth operations](https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/auth.js): auth module · `src/context/auth.js`
- [Protected route](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/ProtectedRoute/ProtectedRoute.jsx): route guard · Central access-control boundary for protected routes. · `src/components/ProtectedRoute/ProtectedRoute.jsx`
- [Login](https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Login/Login.jsx): page · `src/pages/Login/Login.jsx`

### Catalog

- [API service](https://github.com/g1thub-05/e-commerce-app/blob/main/src/services/api.js): Axios service · UI boundary for FakeStore REST data. · `src/services/api.js`
- **FakeStore API**: external REST API
- [Home catalog](https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Home/Home.jsx): page · Coordinates product retrieval, search, category filtering, and cards. · `src/pages/Home/Home.jsx`
- [Search bar](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/SearchBar/SearchBar.jsx): catalog control · `src/components/SearchBar/SearchBar.jsx`
- [Category filter](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/CategoryFilter/CategoryFilter.jsx): catalog control · `src/components/CategoryFilter/CategoryFilter.jsx`
- [Product card](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/ProductCard/ProductCard.jsx): shared UI · `src/components/ProductCard/ProductCard.jsx`
- [Product details](https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/ProductDetails/ProductDetails.jsx): page · `src/pages/ProductDetails/ProductDetails.jsx`

### Cart

- [Cart context](https://github.com/g1thub-05/e-commerce-app/blob/main/src/context/CartContext.jsx): global state · Shared simulated cart state; no server-side checkout. · `src/context/CartContext.jsx`
- [Cart](https://github.com/g1thub-05/e-commerce-app/blob/main/src/pages/Cart/Cart.jsx): page · `src/pages/Cart/Cart.jsx`
- [Cart item](https://github.com/g1thub-05/e-commerce-app/blob/main/src/components/CartItem/CartItem.jsx): cart UI · Renders and mutates a cart line item. · `src/components/CartItem/CartItem.jsx`
- [Currency formatter](https://github.com/g1thub-05/e-commerce-app/blob/main/src/utils/currency.js): utility · `src/utils/currency.js`

## Connections

- Vite static host → HTML entry: builds
- HTML entry → React bootstrap: loads
- React bootstrap → App composition: mounts
- App composition → Auth context: provides
- App composition → Cart context: provides
- App composition → Navbar: renders
- App composition → Protected route: guards routes with
- Protected route → Auth context: checks
- Login → Auth operations: authenticates through
- Auth operations → Auth context: updates
- Navbar → Auth context: uses auth state
- Navbar → Cart context: shows cart access
- Home catalog → API service: fetches products
- Product details → API service: fetches product
- API service → FakeStore API: requests
- Home catalog → Search bar: coordinates
- Home catalog → Category filter: coordinates
- Home catalog → Product card: renders
- Product card → Cart context: adds products
- Product details → Cart context: adds products
- Cart → Cart context: reads and mutates
- Cart → Cart item: renders
- Cart item → Cart context: mutates line
- Cart item → Currency formatter: formats price