How ragunathdev/indianbrand-e_commerce works
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: App.tsx App coordinator · store.ts Zustand store · CartView.tsx Cart · CheckoutView.tsx Checkout
Components 19
Frontend Runtime
- Vite build/dev · Builds and serves the client-side SPA.
vite.config.ts - React bootstrap
src/main.tsx - Global styling
src/index.css
Application Shell
- App coordinator · Selects marketplace, auth, checkout, success, and dashboard experiences from UI state.
src/App.tsx - Header
src/components/Header.tsx - Footer
src/components/Footer.tsx - Zustand store · Owns session, roles, catalog, cart, wishlist, and orders.
src/store.ts - Domain types
src/types.ts - Mock inventory
src/mockData.ts
Customer Purchase Flow
- Home & catalog · Supports search, filters, categories, and ratings.
src/components/ProductsView.tsx - Home view
src/components/HomeView.tsx - Product detail · Adds products to cart or wishlist.
src/components/ProductDetailView.tsx - Cart
src/components/CartView.tsx - Checkout · Converts cart selections into a local order.
src/components/CheckoutView.tsx - Order success
src/components/OrderSuccessView.tsx
Role Portals
- Authentication · Updates local session and selected role without an identity provider.
src/components/AuthView.tsx - Customer dashboard · Shows loyalty and order-focused information.
src/components/CustomerDashboard.tsx - Seller dashboard · Manages catalog, stock, and orders.
src/components/SellerDashboard.tsx - Admin dashboard · Covers approvals, verification, metrics, and audit controls.
src/components/AdminDashboard.tsx
Connections 26
- 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