# ragunathdev/indianbrand-e_commerce architecture

> Architecture diagram of the GitHub repository ragunathdev/indianbrand-e_commerce, 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/ragunathdev/indianbrand-e_commerce
- Repository: https://github.com/ragunathdev/indianbrand-e_commerce

## Overview

#### Purpose and runtime
IndianBrand.in is a client-side, high-fidelity marketplace prototype for Indian products and heritage sellers. It runs as a React + TypeScript single-page application built and served by Vite; no backend, API client, database, or server-side source is present. Primary bootstrap: `src/main.tsx`, `src/App.tsx`, `vite.config.ts`.

#### Application shell and navigation
`App.tsx` is the likely view/router coordinator, selecting marketplace, authentication, checkout, order-success, and role-dashboard experiences from centralized UI state. Shared shell elements provide persistent navigation and footer treatment. Paths: `src/App.tsx`, `src/components/Header.tsx`, `src/components/Footer.tsx`.

#### Centralized domain state
A Zustand store owns cross-view session and marketplace state: login/logout, role selection, products, cart, wishlist, and order history/updates. This is the principal control boundary between otherwise view-oriented components; state is retained in-memory for the simulated platform. Domain shapes are defined separately. Paths: `src/store.ts`, `src/types.ts`, `src/mockData.ts`.

#### Customer marketplace flow
Customers enter through the home/catalog surfaces, discover products through search/filter/category/rating controls, inspect a product, add it to cart or wishlist, and proceed through checkout to confirmation. The flow is entirely local and uses store-backed mock inventory rather than payment or fulfillment integrations. Paths: `src/components/HomeView.tsx`, `src/components/ProductsView.tsx`, `src/components/ProductDetailView.tsx`.

#### Cart, checkout, and order completion
Cart state is presented and mutated in `CartView`; checkout simulates UPI/payment completion and converts cart selections into an order state, then transitions to a success confirmation. These screens define the purchase transaction boundary, but not a real payment boundary. Paths: `src/components/CartView.tsx`, `src/components/CheckoutView.tsx`, `src/components/OrderSuccessView.tsx`.

#### Identity and role-specific portals
Authentication is a simulated UI/state transition rather than an external identity provider. After authentication, the application can switch among customer, seller, and administrator roles. Customer views expose loyalty and order-oriented information; seller views manage catalog/stock and orders; admin views cover approvals, verification, metrics, and audit-like controls. Paths: `src/components/AuthView.tsx`, `src/components/CustomerDashboard.tsx`, `src/components/SellerDashboard.tsx`, `src/components/AdminDashboard.tsx`.

#### Presentation and deployment context
The interface is a responsive, visually branded frontend using Tailwind-oriented styling, Framer Motion animations, and global CSS. Vite is the build/dev runtime; the README identifies deployed previews on Google Cloud Run, though deployment definitions are absent from the repository. Paths: `src/index.css`, `index.html`, `package.json`.

Main entry points: [`src/App.tsx`](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/App.tsx) (App coordinator), [`src/store.ts`](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/store.ts) (Zustand store), [`src/components/CartView.tsx`](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CartView.tsx) (Cart), [`src/components/CheckoutView.tsx`](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CheckoutView.tsx) (Checkout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Frontend Runtime"]
  node_vite{{"Vite build/dev<br/>build runtime<br/>[vite.config.ts]"}}
  node_bootstrap["React bootstrap<br/>entry point<br/>[main.tsx]"]
  node_styles["Global styling<br/>Tailwind CSS<br/>[index.css]"]
end

subgraph group_shell["Application Shell"]
  node_app["App coordinator<br/>view router<br/>[App.tsx]"]
  node_header["Header<br/>shared navigation<br/>[Header.tsx]"]
  node_footer["Footer<br/>shared shell<br/>[Footer.tsx]"]
  node_store[("Zustand store<br/>in-memory domain state<br/>[store.ts]")]
  node_types["Domain types<br/>TypeScript models<br/>[types.ts]"]
  node_mock_data["Mock inventory<br/>local seed data<br/>[mockData.ts]"]
end

subgraph group_marketplace["Customer Purchase Flow"]
  node_catalog["Home &amp; catalog<br/>discovery views<br/>[ProductsView.tsx]"]
  node_home["Home view<br/>discovery view<br/>[HomeView.tsx]"]
  node_product_detail["Product detail<br/>product view"]
  node_cart["Cart<br/>[CartView.tsx]"]
  node_checkout["Checkout<br/>simulated payment flow<br/>[CheckoutView.tsx]"]
  node_order_success["Order success<br/>confirmation view"]
end

subgraph group_portals["Role Portals"]
  node_auth["Authentication<br/>simulated identity view<br/>[AuthView.tsx]"]
  node_customer_dashboard["Customer dashboard<br/>customer portal"]
  node_seller_dashboard["Seller dashboard<br/>seller portal"]
  node_admin_dashboard["Admin dashboard<br/>admin portal<br/>[AdminDashboard.tsx]"]
end

node_vite -->|"serves/builds"| node_bootstrap
node_bootstrap -->|"mounts"| node_app
node_styles -->|"styles"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_footer
node_app -->|"reads state"| node_store
node_store -->|"uses"| node_types
node_mock_data -->|"seeds catalog"| node_store
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_catalog
node_catalog -->|"selects product"| node_product_detail
node_home -->|"opens product"| node_product_detail
node_product_detail -->|"updates cart/wishlist"| node_store
node_cart -->|"mutates cart"| node_store
node_app -->|"routes to"| node_cart
node_cart -->|"proceeds to"| node_checkout
node_checkout -->|"creates local order"| node_store
node_checkout -->|"confirms"| node_order_success
node_app -->|"routes to"| node_auth
node_auth -->|"sets session and role"| node_store
node_app -->|"customer role"| node_customer_dashboard
node_app -->|"seller role"| node_seller_dashboard
node_app -->|"admin role"| node_admin_dashboard
node_customer_dashboard -->|"reads orders"| node_store
node_seller_dashboard -->|"manages catalog/orders"| node_store
node_admin_dashboard -->|"reviews platform state"| node_store

click node_vite "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/vite.config.ts"
click node_bootstrap "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/main.tsx"
click node_styles "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/index.css"
click node_app "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/App.tsx"
click node_header "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/Header.tsx"
click node_footer "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/Footer.tsx"
click node_store "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/store.ts"
click node_types "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/types.ts"
click node_mock_data "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/mockData.ts"
click node_catalog "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/ProductsView.tsx"
click node_home "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/HomeView.tsx"
click node_product_detail "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/ProductDetailView.tsx"
click node_cart "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CartView.tsx"
click node_checkout "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CheckoutView.tsx"
click node_order_success "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/OrderSuccessView.tsx"
click node_auth "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/AuthView.tsx"
click node_customer_dashboard "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CustomerDashboard.tsx"
click node_seller_dashboard "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/SellerDashboard.tsx"
click node_admin_dashboard "https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/AdminDashboard.tsx"

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_bootstrap,node_styles toneBlue
class node_app,node_header,node_footer,node_store,node_types,node_mock_data toneAmber
class node_catalog,node_home,node_product_detail,node_cart,node_checkout,node_order_success toneMint
class node_auth,node_customer_dashboard,node_seller_dashboard,node_admin_dashboard toneRose
```

## Components

### Frontend Runtime

- [Vite build/dev](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/vite.config.ts): build runtime · Builds and serves the client-side SPA. · `vite.config.ts`
- [React bootstrap](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/main.tsx): entry point · `src/main.tsx`
- [Global styling](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/index.css): Tailwind CSS · `src/index.css`

### Application Shell

- [App coordinator](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/App.tsx): view router · Selects marketplace, auth, checkout, success, and dashboard experiences from UI state. · `src/App.tsx`
- [Header](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/Header.tsx): shared navigation · `src/components/Header.tsx`
- [Footer](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/Footer.tsx): shared shell · `src/components/Footer.tsx`
- [Zustand store](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/store.ts): in-memory domain state · Owns session, roles, catalog, cart, wishlist, and orders. · `src/store.ts`
- [Domain types](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/types.ts): TypeScript models · `src/types.ts`
- [Mock inventory](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/mockData.ts): local seed data · `src/mockData.ts`

### Customer Purchase Flow

- [Home & catalog](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/ProductsView.tsx): discovery views · Supports search, filters, categories, and ratings. · `src/components/ProductsView.tsx`
- [Home view](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/HomeView.tsx): discovery view · `src/components/HomeView.tsx`
- [Product detail](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/ProductDetailView.tsx): product view · Adds products to cart or wishlist. · `src/components/ProductDetailView.tsx`
- [Cart](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CartView.tsx): cart view · `src/components/CartView.tsx`
- [Checkout](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CheckoutView.tsx): simulated payment flow · Converts cart selections into a local order. · `src/components/CheckoutView.tsx`
- [Order success](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/OrderSuccessView.tsx): confirmation view · `src/components/OrderSuccessView.tsx`

### Role Portals

- [Authentication](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/AuthView.tsx): simulated identity view · Updates local session and selected role without an identity provider. · `src/components/AuthView.tsx`
- [Customer dashboard](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/CustomerDashboard.tsx): customer portal · Shows loyalty and order-focused information. · `src/components/CustomerDashboard.tsx`
- [Seller dashboard](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/SellerDashboard.tsx): seller portal · Manages catalog, stock, and orders. · `src/components/SellerDashboard.tsx`
- [Admin dashboard](https://github.com/ragunathdev/indianbrand-e_commerce/blob/main/src/components/AdminDashboard.tsx): admin portal · Covers approvals, verification, metrics, and audit controls. · `src/components/AdminDashboard.tsx`

## Connections

- Vite build/dev → React bootstrap: serves/builds
- React bootstrap → App coordinator: mounts
- Global styling → App coordinator: styles
- App coordinator → Header: renders
- App coordinator → Footer: renders
- App coordinator → Zustand store: reads state
- Zustand store → Domain types: uses
- Mock inventory → Zustand store: seeds catalog
- App coordinator → Home view: routes to
- App coordinator → Home & catalog: routes to
- Home & catalog → Product detail: selects product
- Home view → Product detail: opens product
- Product detail → Zustand store: updates cart/wishlist
- Cart → Zustand store: mutates cart
- App coordinator → Cart: routes to
- Cart → Checkout: proceeds to
- Checkout → Zustand store: creates local order
- Checkout → Order success: confirms
- App coordinator → Authentication: routes to
- Authentication → Zustand store: sets session and role
- App coordinator → Customer dashboard: customer role
- App coordinator → Seller dashboard: seller role
- App coordinator → Admin dashboard: admin role
- Customer dashboard → Zustand store: reads orders
- Seller dashboard → Zustand store: manages catalog/orders
- Admin dashboard → Zustand store: reviews platform state