# muntasir-wsx/shopnest-client architecture

> Architecture diagram of the GitHub repository muntasir-wsx/shopnest-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/muntasir-wsx/shopnest-client
- Repository: https://github.com/muntasir-wsx/shopnest-client

## Overview

1. **What this repo is**
   - This tree is a **React/Vite single-page frontend** for the ShopNest grocery platform.
   - The README describes a broader full-stack system, but in this repository the visible code is mainly the **client app**, with Firebase and HTTP hooks acting as the integration layer to external services.

2. **Application shell**
   - `src/main.jsx`, `src/App.jsx`, `src/router/router.jsx`, and `src/Layouts/MainLayouts.jsx` form the top-level app composition.
   - Routing appears to be centralized in `src/router`, with shared layout wrappers for the public-facing site and separate admin/user areas.

3. **Authentication and user state**
   - `src/Context/AuthProvider.jsx`, `UseAuth.jsx`, and `src/AuthPages/Signin.jsx` / `SignUp.jsx` handle login and registration flows.
   - Firebase is configured in `src/firebase/firebase.config.js`, so authentication is likely Firebase-backed on the client side.
   - Role-aware access is supported by `src/Context/useAdmin.jsx`, which likely feeds route protection and dashboard visibility.

4. **Stateful shopping domains**
   - Cart and wishlist are managed through dedicated context providers: `CartProvider.jsx`, `useCart.jsx`, and `WishlistProvider.jsx`.
   - This suggests the app keeps shopping state in a shared client store rather than passing it through page props.

5. **Public storefront experience**
   - The customer-facing content is split into reusable feature sections under `src/HomeComponents` and shop pages under `src/OtherPages/ShopMain`.
   - `Home.jsx` assembles marketing and discovery blocks such as banner, categories, featured products, discounts, testimonials, FAQ, blog teaser, and newsletter signup.
   - `ShopMain.jsx`, `ProductCard.jsx`, `SideBar.jsx`, `ShopDetails.jsx`, and `ShopDetailsBanner.jsx` form the product-browsing and product-detail flow.

6. **Commerce flow**
   - The cart path lives in `src/OtherPages/Cart/CartMain`, including cart review, checkout form, and a success page.
   - This indicates a linear flow from product selection → cart → checkout → confirmation.
   - `src/OtherPages/UserProfile` contains order and invoice views, so purchased orders are surfaced in account history after checkout.

7. **AI/chatbot integration**
   - `src/OtherPages/ShopMain/ProductChatBot.jsx` is the clearest signal of the Gemini-assisted shopping assistant described in the README.
   - Architecturally, this is a feature boundary inside the shop experience: product discovery UI can hand off to an AI assistant for recommendations, likely using product/catalog context from the frontend or backend API.

8. **Admin dashboard boundary**
   - The admin area is isolated under `src/Admin` with its own layout: `AdminLayout.jsx`.
   - Subpages include product management, user management, order management, analytics, newsletter messaging, and posting products.
   - This is a separate operational surface from the shopper UI, consistent with role-based access control.

9. **User account area**
   - `src/OtherPages/UserProfile` groups the customer account surfaces: personal info, orders, and invoices.
   - `src/OtherPages/Tracking/TrackingOrder.jsx` adds post-purchase order visibility, which sits between checkout and account management.

10. **Data access layer**
   - `src/Hooks/useAxiosPublic.jsx` and `useAxiosSecure.jsx` are the main network abstraction points.
   - The separation strongly implies two backend interaction modes: unauthenticated/public requests and authenticated/authorized requests using secure headers or tokens.

11. **Static/local data sources**
   - `public/features.json` and `public/productCard.json` suggest some parts of the UI are backed by static JSON fixtures or seeded content.
   - These likely feed marketing sections, product cards, or demo content without requiring a live backend call.

12. **Shared presentation components**
   - `src/Shared Components` contains the cross-cutting UI chrome: navbar, footer, logo variants, loader, branding, and error page.
   - These are the outer frame around all routes, so they belong in the diagram as shared infrastructure rather than feature-specific logic.

13. **Key architectural boundary to capture in a diagram**
   - The main split is between:
     - **Public/customer storefront**
     - **Authenticated customer account flows**
     - **Protected admin dashboard**
   - Cross-cutting concerns are auth/role context, secure API access, and shared layout components.

14. **What is not in this repo**
   - There is no visible Express/MongoDB backend code here, even though the README references it.
   - For an accurate architecture diagram, treat those as **external services** consumed by this frontend, not as components inside this repository.

Main entry points: [`src/App.jsx`](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/App.jsx) (App), [`src/Hooks/useAxiosPublic.jsx`](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Hooks/useAxiosPublic.jsx) (API hooks), [`src/OtherPages/ShopMain/ShopMain.jsx`](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/ShopMain/ShopMain.jsx) (Shop), [`src/Admin/AdminLayout.jsx`](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AdminLayout.jsx) (Admin layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core shell"]
  node_main["main.jsx<br/>entry<br/>[main.jsx]"]
  node_app["App<br/>shell<br/>[App.jsx]"]
  node_router["Router<br/>routing<br/>[router.jsx]"]
  node_layout["Main layout<br/>[MainLayouts.jsx]"]
  node_auth["Auth state<br/>context<br/>[AuthProvider.jsx]"]
  node_cart["Cart state<br/>context<br/>[CartProvider.jsx]"]
  node_wishlist["Wishlist<br/>context"]
  node_adminrole["Role guard<br/>access control<br/>[useAdmin.jsx]"]
end

subgraph group_storefront["Storefront"]
  node_home["Home<br/>storefront page<br/>[Home.jsx]"]
  node_shop["Shop<br/>catalog<br/>[ShopMain.jsx]"]
  node_chatbot(("Chatbot<br/>ai assistant<br/>[ProductChatBot.jsx]"))
  node_cartflow["Checkout<br/>commerce flow<br/>[Cart.jsx]"]
end

subgraph group_account["Customer area"]
  node_profile["Profile<br/>account area<br/>[UserProfile.jsx]"]
  node_tracking["Tracking<br/>order status<br/>[TrackingOrder.jsx]"]
end

subgraph group_admin["Admin area"]
  node_adminhome["Admin layout<br/>dashboard shell<br/>[AdminLayout.jsx]"]
  node_catalogmgmt["Catalog mgmt<br/>admin module<br/>[AllProducts.jsx]"]
  node_ops["Operations<br/>admin module<br/>[AllUsers.jsx]"]
end

subgraph group_integrations["Integrations"]
  node_api["API hooks<br/>http layer<br/>[useAxiosPublic.jsx]"]
  node_firebase["Firebase<br/>auth backend<br/>[firebase.config.js]"]
  node_sharedui["Shared UI<br/>chrome<br/>[NavBar.jsx]"]
  node_fixtures["Static data<br/>json content<br/>[features.json]"]
end

node_main -->|"mounts"| node_app
node_app -->|"uses"| node_router
node_app -->|"wraps"| node_layout
node_app -->|"provides"| node_auth
node_app -->|"provides"| node_cart
node_app -->|"provides"| node_wishlist
node_auth -->|"authenticates"| node_firebase
node_router -->|"guards"| node_adminrole
node_router -->|"composes"| node_sharedui
node_sharedui -->|"frames"| node_layout
node_home -->|"renders from"| node_fixtures
node_home -->|"uses"| node_sharedui
node_shop -->|"extends"| node_chatbot
node_shop -->|"adds to cart"| node_cart
node_shop -->|"saves"| node_wishlist
node_shop -->|"fetches"| node_api
node_cartflow -->|"submits"| node_api
node_profile -->|"loads"| node_api
node_tracking -->|"tracks"| node_api
node_adminhome -->|"contains"| node_catalogmgmt
node_adminhome -->|"contains"| node_ops
node_adminhome -->|"mutates"| node_api
node_adminhome -->|"protected by"| node_adminrole

click node_main "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/main.jsx"
click node_app "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/App.jsx"
click node_router "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/router/router.jsx"
click node_layout "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Layouts/MainLayouts.jsx"
click node_auth "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/AuthProvider.jsx"
click node_cart "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/CartProvider.jsx"
click node_wishlist "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/WishlistProvider.jsx"
click node_adminrole "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/useAdmin.jsx"
click node_api "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Hooks/useAxiosPublic.jsx"
click node_firebase "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/firebase/firebase.config.js"
click node_sharedui "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Shared Components/NavBar.jsx"
click node_home "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/HomeComponents/Home.jsx"
click node_shop "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/ShopMain/ShopMain.jsx"
click node_chatbot "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/ShopMain/ProductChatBot.jsx"
click node_cartflow "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/Cart/CartMain/Cart.jsx"
click node_profile "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/UserProfile/UserProfile.jsx"
click node_tracking "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/Tracking/TrackingOrder.jsx"
click node_adminhome "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AdminLayout.jsx"
click node_catalogmgmt "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AllProducts/AllProducts.jsx"
click node_ops "https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AllUsers/AllUsers.jsx"
click node_fixtures "https://github.com/muntasir-wsx/shopnest-client/blob/main/public/features.json"

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_main,node_app,node_router,node_layout,node_auth,node_cart,node_wishlist,node_adminrole toneBlue
class node_home,node_shop,node_chatbot,node_cartflow toneAmber
class node_profile,node_tracking toneMint
class node_adminhome,node_catalogmgmt,node_ops toneRose
class node_api,node_firebase,node_sharedui,node_fixtures toneIndigo
```

## Components

### Core shell

Application composition, routing, shared layout, and global state.

- [main.jsx](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/main.jsx): entry · Vite entry that bootstraps the React app. · `src/main.jsx`
- [App](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/App.jsx): shell · Top-level app composition and route mounting. · `src/App.jsx`
- [Router](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/router/router.jsx): routing · Central route definitions for public, account, and admin views. · `src/router/router.jsx`
- [Main layout](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Layouts/MainLayouts.jsx): layout · Shared public-facing frame around routes. · `src/Layouts/MainLayouts.jsx`
- [Auth state](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/AuthProvider.jsx): context · Authentication provider and auth hooks for user session state. · `src/Context/AuthProvider.jsx`
- [Cart state](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/CartProvider.jsx): context · Shared cart state and cart actions. · `src/Context/CartProvider.jsx`
- [Wishlist](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/WishlistProvider.jsx): context · Shared wishlist state for saved products. · `src/Context/WishlistProvider.jsx`
- [Role guard](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Context/useAdmin.jsx): access control · Admin/user role detection for protected routes and dashboard visibility. · `src/Context/useAdmin.jsx`

### Storefront

Public shopping and discovery experience.

- [Home](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/HomeComponents/Home.jsx): storefront page · Landing page assembled from marketing and discovery sections. · `src/HomeComponents/Home.jsx`
- [Shop](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/ShopMain/ShopMain.jsx): catalog · Product browsing, filtering, detail view, and AI assistant boundary. · `src/OtherPages/ShopMain/ShopMain.jsx`
- [Chatbot](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/ShopMain/ProductChatBot.jsx): ai assistant · Gemini-assisted product recommendation and shopping help. · `src/OtherPages/ShopMain/ProductChatBot.jsx`
- [Checkout](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/Cart/CartMain/Cart.jsx): commerce flow · Cart review, checkout form, and success confirmation flow. · `src/OtherPages/Cart/CartMain/Cart.jsx`

### Customer area

Authenticated user profile, orders, and tracking.

- [Profile](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/UserProfile/UserProfile.jsx): account area · Customer account hub for personal info, orders, and invoices. · `src/OtherPages/UserProfile/UserProfile.jsx`
- [Tracking](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/OtherPages/Tracking/TrackingOrder.jsx): order status · Post-purchase order visibility outside the profile screen. · `src/OtherPages/Tracking/TrackingOrder.jsx`

### Admin area

Protected dashboard for catalog and operations.

- [Admin layout](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AdminLayout.jsx): dashboard shell · Protected admin shell wrapping operational subpages. · `src/Admin/AdminLayout.jsx`
- [Catalog mgmt](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AllProducts/AllProducts.jsx): admin module · Product listing, posting, and inventory-facing management views. · `src/Admin/AllProducts/AllProducts.jsx`
- [Operations](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Admin/AllUsers/AllUsers.jsx): admin module · User, order, analytics, and newsletter management views. · `src/Admin/AllUsers/AllUsers.jsx`

### Integrations

External services and shared data access boundaries.

- [API hooks](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/Hooks/useAxiosPublic.jsx): http layer · Public and secure Axios wrappers for backend requests. · `src/Hooks/useAxiosPublic.jsx`
- [Firebase](https://github.com/muntasir-wsx/shopnest-client/blob/main/src/firebase/firebase.config.js): auth backend · Client Firebase configuration used for authentication integration. · `src/firebase/firebase.config.js`
- [Shared UI](https://github.com/muntasir-wsx/shopnest-client/blob/HEAD/src/Shared%20Components/NavBar.jsx): chrome · Navbar, footer, branding, loader, and error page components. · `src/Shared Components/NavBar.jsx`
- [Static data](https://github.com/muntasir-wsx/shopnest-client/blob/main/public/features.json): json content · Local JSON fixtures used for seeded UI content. · `public/features.json`

## Connections

- main.jsx → App: mounts · Bootstraps the React application.
- App → Router: uses · Delegates page selection to the router.
- App → Main layout: wraps · Provides the shared public shell.
- App → Auth state: provides · Makes auth state available across the app.
- App → Cart state: provides · Makes cart state available across shopping flows.
- App → Wishlist: provides · Makes wishlist state available across shopping flows.
- Auth state → Firebase: authenticates · Uses Firebase as the client auth backend.
- Router → Role guard: guards · Applies role-aware access control for protected areas.
- Router → Shared UI: composes · Uses shared chrome around routed screens.
- Shared UI → Main layout: frames · Supports the site-wide visual shell.
- Home → Static data: renders from · Can consume local seeded content for sections.
- Home → Shared UI: uses · Relies on shared navbar/footer/branding.
- Shop → Chatbot: extends · Adds AI-assisted shopping help inside catalog browsing.
- Shop → Cart state: adds to cart · Sends selected products into shared cart state.
- Shop → Wishlist: saves · Supports saving products for later.
- Shop → API hooks: fetches · Loads product and catalog data through HTTP hooks.
- Checkout → API hooks: submits · Sends checkout and order requests.
- Profile → API hooks: loads · Fetches account, order, and invoice data.
- Tracking → API hooks: tracks · Loads current order status through the backend layer.
- Admin layout → Catalog mgmt: contains · Hosts product administration screens.
- Admin layout → Operations: contains · Hosts operational admin screens.
- Admin layout → API hooks: mutates · Performs protected management requests.
- Admin layout → Role guard: protected by · Requires admin role access.