# hazrat-ali9/manufacturer-client architecture

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

- Interactive diagram: https://gitdiagram.com/hazrat-ali9/manufacturer-client
- Repository: https://github.com/hazrat-ali9/manufacturer-client

## Overview

Hazrat Ali is a React storefront for mobile accessories, with public product and informational pages, Firebase-backed user access, purchasing, reviews, and role-based dashboards. The principal customer workflow is browse products, view a product, place an order, and access order/payment features; administrators also manage products, users, and fulfillment. The graph preserves documented public pages and the major dashboard stages. Some implementation files were not excerpted, so their internal behavior and connections are not asserted.

Main entry points: [`src/App.js`](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/App.js) (Route shell), [`src/Component/Dashboard/Dashboard.js`](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Dashboard.js) (Dashboard shell), [`src/Component/Home/Home.js`](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Home/Home.js) (Home page), [`src/Component/User/Register.js`](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Register.js) (Registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Route shell<br/>[App.js]"]
end

subgraph group_store["Storefront"]
  node_home["Home page<br/>[Home.js]"]
  node_catalog["Product catalog<br/>[Product.js]"]
  node_productcard["Product card<br/>[ProductCard.js]"]
  node_reviews["Reviews<br/>[Reviews.js]"]
  node_addreview["Write review<br/>[AddReview.js]"]
  node_reviewcard["Review display<br/>[ReviewCard.js]"]
  node_about["About page<br/>[About.js]"]
  node_portfolio["Portfolio page<br/>[Portfolio.js]"]
  node_blog["Blog page<br/>[Blog.js]"]
  node_contact["Contact page<br/>[Contact.js]"]
end

subgraph group_identity["Identity"]
  node_register["Registration<br/>[Register.js]"]
  node_login["Login<br/>[Login.js]"]
  node_social["Social sign-in<br/>[Social.js]"]
  node_authguard["Authentication guard<br/>[RequireAuth.js]"]
  node_userhook["Current-user lookup<br/>[useUser.js]"]
  node_firebase[("Firebase Auth<br/>[firebase.init.js]")]
end

subgraph group_commerce["Commerce"]
  node_details["Product details<br/>[ProductDetails.js]"]
  node_order["Place order<br/>[Order.js]"]
  node_orders["Customer orders<br/>[Orders.js]"]
  node_payment["Payment<br/>[Payment.js]"]
end

subgraph group_admin["Dashboard"]
  node_allorders["All orders<br/>[AllOrders.js]"]
  node_dashboard["Dashboard shell<br/>[Dashboard.js]"]
  node_manageproducts["Manage products<br/>[ManageProduct.js]"]
  node_addproduct["Add product<br/>[AddProduct.js]"]
  node_users["Manage users<br/>[AllUsers.js]"]
  node_profile["User profile<br/>[Profile.js]"]
end

node_visitor(("Visitor"))
node_backend["Application API"]
node_imgbb["Image upload service"]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_details
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_register
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_reviews
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_portfolio
node_app -->|"routes to"| node_blog
node_app -->|"routes to"| node_contact
node_home -->|"fetches products"| node_backend
node_home -->|"fetches reviews"| node_backend
node_home -->|"renders"| node_productcard
node_home -->|"renders"| node_reviewcard
node_catalog -->|"renders"| node_productcard
node_details -->|"renders"| node_order
node_app -->|"protects routes"| node_authguard
node_authguard -->|"checks identity"| node_firebase
node_register -->|"creates account"| node_firebase
node_register -->|"uploads image"| node_imgbb
node_register -->|"creates user profile"| node_backend
node_register -->|"renders"| node_social
node_login -->|"authenticates"| node_firebase
node_login -->|"renders"| node_social
node_social -->|"authenticates"| node_firebase
node_app -->|"loads current user"| node_userhook
node_userhook -->|"reads auth state"| node_firebase
node_userhook -->|"fetches user"| node_backend
node_dashboard -->|"checks role"| node_userhook
node_dashboard -->|"shows customer orders"| node_orders
node_dashboard -->|"shows admin orders"| node_allorders
node_dashboard -->|"routes to"| node_manageproducts
node_dashboard -->|"routes to"| node_addproduct
node_dashboard -->|"routes to"| node_users
node_dashboard -->|"routes to"| node_profile
node_dashboard -->|"routes to"| node_payment
node_orders -->|"renders payment"| node_payment
node_allorders -->|"renders payment"| node_payment
node_allorders -->|"manages orders"| node_backend
node_reviews -->|"fetches reviews"| node_backend
node_reviews -->|"renders form"| node_addreview
node_reviews -->|"renders cards"| node_reviewcard
node_addreview -->|"submits review"| node_backend

click node_app "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/App.js"
click node_home "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Home/Home.js"
click node_catalog "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/Product.js"
click node_productcard "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/ProductCard.js"
click node_details "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/ProductDetails.js"
click node_order "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/Order.js"
click node_orders "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Orders.js"
click node_allorders "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AllOrders.js"
click node_payment "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Payment.js"
click node_dashboard "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Dashboard.js"
click node_manageproducts "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/ManageProduct.js"
click node_addproduct "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AddProduct.js"
click node_users "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AllUsers.js"
click node_profile "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Profile.js"
click node_reviews "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/Reviews.js"
click node_addreview "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/AddReview.js"
click node_reviewcard "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/ReviewCard.js"
click node_about "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/About/About.js"
click node_portfolio "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Portfolio/Portfolio.js"
click node_blog "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Blog/Blog.js"
click node_contact "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Contact/Contact.js"
click node_register "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Register.js"
click node_login "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Login.js"
click node_social "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Social.js"
click node_authguard "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/RequireAuth/RequireAuth.js"
click node_userhook "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Hook/useUser.js"
click node_firebase "https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Firebase/firebase.init.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_app toneBlue
class node_home,node_catalog,node_productcard,node_reviews,node_addreview,node_reviewcard,node_about,node_portfolio,node_blog,node_contact toneAmber
class node_register,node_login,node_social,node_authguard,node_userhook,node_firebase,node_backend toneMint
class node_details,node_order,node_orders,node_payment toneRose
class node_allorders,node_dashboard,node_manageproducts,node_addproduct,node_users,node_profile,node_visitor,node_imgbb toneIndigo
```

## Components

### Application

- [Route shell](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/App.js): `src/App.js`

### Storefront

- [Home page](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Home/Home.js): `src/Component/Home/Home.js`
- [Product catalog](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/Product.js): `src/Component/Product/Product.js`
- [Product card](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/ProductCard.js): `src/Component/Product/ProductCard.js`
- [Reviews](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/Reviews.js): `src/Component/Review/Reviews.js`
- [Write review](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/AddReview.js): `src/Component/Review/AddReview.js`
- [Review display](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Review/ReviewCard.js): `src/Component/Review/ReviewCard.js`
- [About page](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/About/About.js): `src/Component/About/About.js`
- [Portfolio page](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Portfolio/Portfolio.js): `src/Component/Portfolio/Portfolio.js`
- [Blog page](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Blog/Blog.js): `src/Component/Blog/Blog.js`
- [Contact page](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Contact/Contact.js): `src/Component/Contact/Contact.js`

### Identity

- [Registration](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Register.js): `src/Component/User/Register.js`
- [Login](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Login.js): `src/Component/User/Login.js`
- [Social sign-in](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/User/Social.js): `src/Component/User/Social.js`
- [Authentication guard](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/RequireAuth/RequireAuth.js): `src/Component/RequireAuth/RequireAuth.js`
- [Current-user lookup](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Hook/useUser.js): `src/Component/Hook/useUser.js`
- [Firebase Auth](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Firebase/firebase.init.js): `src/Component/Firebase/firebase.init.js`

### Commerce

- [Product details](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/ProductDetails.js): `src/Component/Product/ProductDetails.js`
- [Place order](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Product/Order.js): `src/Component/Product/Order.js`
- [Customer orders](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Orders.js): `src/Component/Dashboard/Orders.js`
- [Payment](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Payment.js): `src/Component/Dashboard/Payment.js`

### Dashboard

- [All orders](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AllOrders.js): `src/Component/Dashboard/AllOrders.js`
- [Dashboard shell](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Dashboard.js): `src/Component/Dashboard/Dashboard.js`
- [Manage products](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/ManageProduct.js): `src/Component/Dashboard/ManageProduct.js`
- [Add product](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AddProduct.js): `src/Component/Dashboard/AddProduct.js`
- [Manage users](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/AllUsers.js): `src/Component/Dashboard/AllUsers.js`
- [User profile](https://github.com/hazrat-ali9/manufacturer-client/blob/main/src/Component/Dashboard/Profile.js): `src/Component/Dashboard/Profile.js`

### Other components

- **Visitor**
- **Application API**
- **Image upload service**

## Connections

- Visitor → Route shell: opens (evidence: `src/App.js`)
- Route shell → Home page: routes to (evidence: `src/App.js`)
- Route shell → Product catalog: routes to (evidence: `src/App.js`)
- Route shell → Product details: routes to (evidence: `src/App.js`)
- Route shell → Dashboard shell: routes to (evidence: `src/App.js`)
- Route shell → Registration: routes to (evidence: `src/App.js`)
- Route shell → Login: routes to (evidence: `src/App.js`)
- Route shell → Reviews: routes to (evidence: `src/App.js`)
- Route shell → About page: routes to (evidence: `src/App.js`)
- Route shell → Portfolio page: routes to (evidence: `src/App.js`)
- Route shell → Blog page: routes to (evidence: `src/App.js`)
- Route shell → Contact page: routes to (evidence: `src/App.js`)
- Home page → Application API: fetches products (evidence: `src/Component/Home/Home.js`)
- Home page → Application API: fetches reviews (evidence: `src/Component/Home/Home.js`)
- Home page → Product card: renders (evidence: `src/Component/Home/Home.js`)
- Home page → Review display: renders (evidence: `src/Component/Home/Home.js`)
- Product catalog → Product card: renders (evidence: `src/Component/Product/Product.js`)
- Product details → Place order: renders (evidence: `src/Component/Product/ProductDetails.js`)
- Route shell → Authentication guard: protects routes (evidence: `src/App.js`)
- Authentication guard → Firebase Auth: checks identity (evidence: `src/Component/RequireAuth/RequireAuth.js`)
- Registration → Firebase Auth: creates account (evidence: `src/Component/User/Register.js`)
- Registration → Image upload service: uploads image (evidence: `src/Component/User/Register.js`)
- Registration → Application API: creates user profile (evidence: `src/Component/User/Register.js`)
- Registration → Social sign-in: renders (evidence: `src/Component/User/Register.js`)
- Login → Firebase Auth: authenticates (evidence: `src/Component/User/Login.js`)
- Login → Social sign-in: renders (evidence: `src/Component/User/Login.js`)
- Social sign-in → Firebase Auth: authenticates (evidence: `src/Component/User/Social.js`)
- Route shell → Current-user lookup: loads current user (evidence: `src/App.js`)
- Current-user lookup → Firebase Auth: reads auth state (evidence: `src/Component/Hook/useUser.js`)
- Current-user lookup → Application API: fetches user (evidence: `src/Component/Hook/useUser.js`)
- Dashboard shell → Current-user lookup: checks role (evidence: `src/Component/Dashboard/Dashboard.js`)
- Dashboard shell → Customer orders: shows customer orders (evidence: `src/App.js`)
- Dashboard shell → All orders: shows admin orders (evidence: `src/App.js`)
- Dashboard shell → Manage products: routes to (evidence: `src/App.js`)
- Dashboard shell → Add product: routes to (evidence: `src/App.js`)
- Dashboard shell → Manage users: routes to (evidence: `src/App.js`)
- Dashboard shell → User profile: routes to (evidence: `src/App.js`)
- Dashboard shell → Payment: routes to (evidence: `src/App.js`)
- Customer orders → Payment: renders payment (evidence: `src/Component/Dashboard/Orders.js`)
- All orders → Payment: renders payment (evidence: `src/Component/Dashboard/AllOrders.js`)
- All orders → Application API: manages orders (evidence: `src/Component/Dashboard/AllOrders.js`)
- Reviews → Application API: fetches reviews (evidence: `src/Component/Review/Reviews.js`)
- Reviews → Write review: renders form (evidence: `src/Component/Review/Reviews.js`)
- Reviews → Review display: renders cards (evidence: `src/Component/Review/Reviews.js`)
- Write review → Application API: submits review (evidence: `src/Component/Review/AddReview.js`)