# kameshwar736/ecommerce-site architecture

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

- Interactive diagram: https://gitdiagram.com/kameshwar736/ecommerce-site
- Repository: https://github.com/kameshwar736/ecommerce-site

## Overview

#### Purpose and Runtime
SHOP.CO is a client-facing e-commerce storefront built with Next.js 16 App Router, React, Tailwind CSS, and React Context. It presents a static local product catalog, supports browsing/filtering/detail views, and maintains a browser-persisted cart via LocalStorage. Static media is served from `public/products`, `public/images`, and `public/icons`; no backend, database, payment provider, or external commerce API is represented.

#### Application Entry and Shell
The App Router routes are rooted in `src/app/layout.js`, which establishes the shared application shell and global styling from `src/app/globals.css`. Shared chrome is decomposed into navigation, promotional banner, newsletter, and footer components: `src/components/layout/Navbar.jsx`, `src/components/layout/TopBanner.jsx`, and `src/components/layout/Footer.jsx`.

#### Route-Level Experience
The home route at `src/app/page.js` composes marketing and product-discovery sections, notably `src/components/home/Hero.jsx`, `src/components/home/NewArrival.jsx`, and `src/components/home/TopSelling.jsx`. Browsing occurs at `src/app/category/page.js`; the dynamic product-detail boundary is `src/app/product/[id]/page.js`, where an ID selects a catalog item. Cart review and modification is isolated to `src/app/cart/page.js`. Missing routes/items are handled by `src/app/notFound.js`.

#### Catalog and Product Discovery
Local catalog records originate in `src/data/products.js`, with supporting style/testimonial datasets in `src/data/dressStyle.js` and `src/data/testimonialData.js`. Category browsing couples `src/components/category/FilterSidebar.jsx` for filter controls with `src/components/category/ProductGrid.jsx` for responsive, paginated results. The primary flow is catalog data → product context/filter state → grid/detail links; filtering remains frontend-only rather than querying a service.

#### Shared State Boundaries
`src/contexts/ProductContext.jsx` provides product-oriented shared state to home, category, and detail surfaces. `src/contexts/CartContext.jsx` owns cart mutations, quantities, and LocalStorage synchronization. This is the main client-state boundary: product selection and cart actions propagate through React Context rather than server actions or an API layer.

#### Product-to-Cart Flow
A user selects a product from category or home listings, navigates to `src/app/product/[id]/page.js`, chooses variant-related options and quantity, then adds it through cart context. Cart rendering is divided among `src/components/carts/CartItems.jsx` for line-item updates/removal, `src/components/carts/OrderSummary.jsx` for totals, and `src/components/carts/CouponForm.jsx` for coupon UI. There is no checkout or payment execution boundary.

#### Deployment and Assets
The project is configured as a standard Next.js application through `next.config.mjs` and is demonstrated on Vercel. Product imagery and UI assets are repository-managed under `public/products`, `public/images`, and `public/icons`, making the application deployable without an asset CDN or runtime content dependency.

Main entry points: [`src/app/layout.js`](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/layout.js) (Root Layout), [`src/app/cart/page.js`](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/cart/page.js) (Cart), [`src/contexts/CartContext.jsx`](https://github.com/kameshwar736/ecommerce-site/blob/main/src/contexts/CartContext.jsx) (Cart Context), [`src/app/product/[id]/page.js`](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/product/%5Bid%5D/page.js) (Product Detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["App Router"]
  node_shell["Root Layout<br/>Next.js layout<br/>[layout.js]"]
  node_styles["Global Styles<br/>Tailwind CSS<br/>[globals.css]"]
  node_chrome["Shared Chrome<br/>layout components<br/>[Navbar.jsx]"]
  node_home["Home<br/>route<br/>[page.js]"]
  node_category["Category Browse<br/>route<br/>[page.js]"]
  node_detail["Product Detail<br/>dynamic route<br/>[page.js]"]
  node_cart_page["Cart<br/>route<br/>[page.js]"]
  node_not_found["Not Found<br/>fallback route<br/>[notFound.js]"]
  node_home_sections["Home Sections<br/>home components<br/>[Hero.jsx]"]
end

subgraph group_catalog["Catalog Discovery"]
  node_catalog_data[("Product Catalog<br/>local data<br/>[products.js]")]
  node_product_context{{"Product Context<br/>React context<br/>[ProductContext.jsx]"}}
  node_filters["Filter Sidebar<br/>category component<br/>[FilterSidebar.jsx]"]
  node_product_grid["Product Grid<br/>category component<br/>[ProductGrid.jsx]"]
end

subgraph group_cart["Cart State"]
  node_cart_context{{"Cart Context<br/>React context<br/>[CartContext.jsx]"}}
  node_local_storage[("Browser LocalStorage<br/>browser storage")]
  node_cart_items["Cart Items<br/>cart component<br/>[CartItems.jsx]"]
  node_order_summary["Order Summary<br/>cart component<br/>[OrderSummary.jsx]"]
  node_coupon_form["Coupon Form<br/>cart component<br/>[CouponForm.jsx]"]
end

subgraph group_assets["Static Assets"]
  node_media["Static Media<br/>public assets"]
  node_next_config["Next.js Config<br/>deployment config<br/>[next.config.mjs]"]
end

node_shell -->|"loads"| node_styles
node_shell -->|"composes"| node_chrome
node_shell -->|"hosts route"| node_home
node_shell -->|"hosts route"| node_category
node_shell -->|"hosts route"| node_detail
node_shell -->|"hosts route"| node_cart_page
node_home -->|"composes"| node_home_sections
node_home_sections -->|"features products"| node_catalog_data
node_category -->|"renders"| node_filters
node_category -->|"renders"| node_product_grid
node_catalog_data -->|"supplies catalog"| node_product_context
node_product_context -->|"drives filters"| node_filters
node_product_context -->|"supplies results"| node_product_grid
node_product_grid -->|"links by ID"| node_detail
node_detail -->|"looks up item"| node_catalog_data
node_detail -->|"adds product"| node_cart_context
node_cart_context -->|"synchronizes"| node_local_storage
node_cart_page -->|"renders"| node_cart_items
node_cart_page -->|"renders"| node_order_summary
node_cart_page -->|"renders"| node_coupon_form
node_cart_context -->|"provides cart state"| node_cart_items
node_cart_context -->|"provides totals input"| node_order_summary
node_home_sections -->|"uses"| node_media
node_product_grid -->|"renders imagery"| node_media
node_next_config -.->|"configures application"| node_shell

click node_shell "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/layout.js"
click node_styles "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/globals.css"
click node_chrome "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/layout/Navbar.jsx"
click node_home "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/page.js"
click node_category "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/category/page.js"
click node_detail "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/product/%5Bid%5D/page.js"
click node_cart_page "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/cart/page.js"
click node_not_found "https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/notFound.js"
click node_home_sections "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/home/Hero.jsx"
click node_catalog_data "https://github.com/kameshwar736/ecommerce-site/blob/main/src/data/products.js"
click node_product_context "https://github.com/kameshwar736/ecommerce-site/blob/main/src/contexts/ProductContext.jsx"
click node_filters "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/category/FilterSidebar.jsx"
click node_product_grid "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/category/ProductGrid.jsx"
click node_cart_context "https://github.com/kameshwar736/ecommerce-site/blob/main/src/contexts/CartContext.jsx"
click node_cart_items "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/CartItems.jsx"
click node_order_summary "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/OrderSummary.jsx"
click node_coupon_form "https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/CouponForm.jsx"
click node_media "https://github.com/kameshwar736/ecommerce-site/tree/main/public/products"
click node_next_config "https://github.com/kameshwar736/ecommerce-site/blob/main/next.config.mjs"

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_shell,node_styles,node_chrome,node_home,node_category,node_detail,node_cart_page,node_not_found,node_home_sections toneBlue
class node_catalog_data,node_product_context,node_filters,node_product_grid toneAmber
class node_cart_context,node_local_storage,node_cart_items,node_order_summary,node_coupon_form toneMint
class node_media,node_next_config toneRose
```

## Components

### App Router

Route entry points and shared shell.

- [Root Layout](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/layout.js): Next.js layout · Establishes shared shell and global styling. · `src/app/layout.js`
- [Global Styles](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/globals.css): Tailwind CSS · `src/app/globals.css`
- [Shared Chrome](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/layout/Navbar.jsx): layout components · Navigation, promotion banner, newsletter, and footer. · `src/components/layout/Navbar.jsx`
- [Home](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/page.js): route · Marketing and product discovery landing page. · `src/app/page.js`
- [Category Browse](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/category/page.js): route · `src/app/category/page.js`
- [Product Detail](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/product/%5Bid%5D/page.js): dynamic route · Selects a catalog item by product ID. · `src/app/product/[id]/page.js`
- [Cart](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/cart/page.js): route · Cart review and modification surface. · `src/app/cart/page.js`
- [Not Found](https://github.com/kameshwar736/ecommerce-site/blob/main/src/app/notFound.js): fallback route · Handles missing routes or catalog items. · `src/app/notFound.js`
- [Home Sections](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/home/Hero.jsx): home components · Hero, new arrivals, and top-selling sections. · `src/components/home/Hero.jsx`

### Catalog Discovery

Local catalog and browsing state.

- [Product Catalog](https://github.com/kameshwar736/ecommerce-site/blob/main/src/data/products.js): local data · Static product records used throughout the storefront. · `src/data/products.js`
- [Product Context](https://github.com/kameshwar736/ecommerce-site/blob/main/src/contexts/ProductContext.jsx): React context · Shares product-oriented selection and filter state. · `src/contexts/ProductContext.jsx`
- [Filter Sidebar](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/category/FilterSidebar.jsx): category component · Frontend-only filter controls. · `src/components/category/FilterSidebar.jsx`
- [Product Grid](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/category/ProductGrid.jsx): category component · Responsive paginated catalog results and detail links. · `src/components/category/ProductGrid.jsx`

### Cart State

Browser-persisted cart workflow.

- [Cart Context](https://github.com/kameshwar736/ecommerce-site/blob/main/src/contexts/CartContext.jsx): React context · Owns cart mutations, quantities, and persistence. · `src/contexts/CartContext.jsx`
- **Browser LocalStorage**: browser storage · Persists cart state on the client.
- [Cart Items](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/CartItems.jsx): cart component · Updates quantities and removes line items. · `src/components/carts/CartItems.jsx`
- [Order Summary](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/OrderSummary.jsx): cart component · Calculates and displays cart totals. · `src/components/carts/OrderSummary.jsx`
- [Coupon Form](https://github.com/kameshwar736/ecommerce-site/blob/main/src/components/carts/CouponForm.jsx): cart component · Coupon UI only; no checkout execution. · `src/components/carts/CouponForm.jsx`

### Static Assets

Repository-managed storefront media.

- [Static Media](https://github.com/kameshwar736/ecommerce-site/tree/main/public/products): public assets · Product imagery and UI assets served locally. · `public/products`
- [Next.js Config](https://github.com/kameshwar736/ecommerce-site/blob/main/next.config.mjs): deployment config · Standard Next.js application configuration. · `next.config.mjs`

## Connections

- Root Layout → Global Styles: loads
- Root Layout → Shared Chrome: composes
- Root Layout → Home: hosts route
- Root Layout → Category Browse: hosts route
- Root Layout → Product Detail: hosts route
- Root Layout → Cart: hosts route
- Home → Home Sections: composes
- Home Sections → Product Catalog: features products
- Category Browse → Filter Sidebar: renders
- Category Browse → Product Grid: renders
- Product Catalog → Product Context: supplies catalog
- Product Context → Filter Sidebar: drives filters
- Product Context → Product Grid: supplies results
- Product Grid → Product Detail: links by ID
- Product Detail → Product Catalog: looks up item
- Product Detail → Cart Context: adds product
- Cart Context → Browser LocalStorage: synchronizes
- Cart → Cart Items: renders
- Cart → Order Summary: renders
- Cart → Coupon Form: renders
- Cart Context → Cart Items: provides cart state
- Cart Context → Order Summary: provides totals input
- Home Sections → Static Media: uses
- Product Grid → Static Media: renders imagery
- Next.js Config → Root Layout: configures application