# muradhosenrafi/dashboard-e-commerce architecture

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

- Interactive diagram: https://gitdiagram.com/muradhosenrafi/dashboard-e-commerce
- Repository: https://github.com/muradhosenrafi/dashboard-e-commerce

## Overview

ARMANE is a browser-based account registration, email-OTP verification, login, and password-reset frontend; its Express/MongoDB backend is external. Users enter through routed registration or login forms, with pending verification resumable in the same tab; successful verification leads to login. The graph preserves documented reset and home routes, but their implementation details are not sampled. Edges reflect sampled imports/calls and README API contracts; backend behavior is not represented as inspected source.

Main entry points: [`src/login.jsx`](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/login.jsx) (Login page), [`src/Registion.jsx`](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/Registion.jsx) (Registration page), [`src/App.jsx`](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/App.jsx) (Route application), [`src/OtpModal.jsx`](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/OtpModal.jsx) (OTP verification)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and pages"]
  node_app["Route application<br/>[App.jsx]"]
  node_home["Home page<br/>[HomePage.jsx]"]
end

subgraph group_auth["Account workflows"]
  node_registration["Registration page<br/>[Registion.jsx]"]
  node_otp_page["OTP route page<br/>[OtpPage.jsx]"]
  node_otp_modal["OTP verification<br/>[OtpModal.jsx]"]
  node_login["Login page<br/>[login.jsx]"]
  node_forgot["Reset request dialog<br/>[otppopup.jsx]"]
  node_reset["Reset password page"]
end

subgraph group_shared["Form and session support"]
  node_layout["Auth layout<br/>[AuthLayout.jsx]"]
  node_field["Form fields<br/>[FormField.jsx]"]
  node_form_hook["Auth form hook<br/>[useAuthForm.js]"]
  node_validation["Auth validation<br/>[authValidation.js]"]
  node_expiry["Expiry countdown<br/>[useExpiry.js]"]
  node_session[("Pending verification")]
end

subgraph group_services["API and state"]
  node_api["Auth API client<br/>[authApi.js]"]
  node_user_slice["User info slice<br/>[userinfoslices.js]"]
end

node_user(("Visitor"))
node_backend["Auth backend"]

node_user -->|"opens routes"| node_app
node_app -->|"routes to"| node_registration
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_otp_page
node_app -->|"routes to"| node_forgot
node_app -->|"routes to"| node_reset
node_app -->|"routes to"| node_home
node_registration -->|"renders in"| node_layout
node_registration -->|"renders"| node_field
node_registration -->|"uses"| node_form_hook
node_registration -->|"checks deadline"| node_expiry
node_registration -->|"reads and writes"| node_session
node_registration -->|"submits registration"| node_api
node_registration -->|"navigates to"| node_otp_page
node_otp_page -->|"renders"| node_otp_modal
node_otp_page -->|"checks pending entry"| node_session
node_otp_modal -->|"submits code"| node_api
node_otp_modal -->|"checks deadline"| node_expiry
node_otp_modal -->|"clears verified entry"| node_session
node_login -->|"renders in"| node_layout
node_login -->|"renders"| node_field
node_login -->|"uses"| node_form_hook
node_login -->|"submits login"| node_api
node_login -->|"stores pending entry"| node_session
node_login -->|"resumes verification"| node_otp_page
node_login -->|"opens dialog"| node_forgot
node_login -->|"dispatches action"| node_user_slice
node_form_hook -->|"validates fields"| node_validation
node_registration -->|"registration request"| node_backend
node_login -->|"login request"| node_backend
node_otp_modal -->|"verification request"| node_backend
node_login -->|"reset request"| node_backend

click node_app "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/App.jsx"
click node_registration "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/Registion.jsx"
click node_otp_page "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/OtpPage.jsx"
click node_otp_modal "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/OtpModal.jsx"
click node_login "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/login.jsx"
click node_forgot "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/container/otppopup.jsx"
click node_reset "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/ResetPasswordPage.jsx"
click node_home "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/page/HomePage.jsx"
click node_layout "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/AuthLayout.jsx"
click node_field "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/FormField.jsx"
click node_form_hook "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/useAuthForm.js"
click node_validation "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/authValidation.js"
click node_expiry "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/useExpiry.js"
click node_session "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/verificationSession.js"
click node_api "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/authApi.js"
click node_user_slice "https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/slices/userinfoslices.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,node_home toneBlue
class node_registration,node_otp_page,node_otp_modal,node_login,node_forgot,node_reset toneAmber
class node_layout,node_field,node_form_hook,node_validation,node_expiry,node_session toneMint
class node_api,node_user_slice toneRose
class node_user,node_backend toneIndigo
```

## Components

### Routing and pages

- [Route application](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/page/HomePage.jsx): `src/page/HomePage.jsx`

### Account workflows

- [Registration page](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/Registion.jsx): `src/Registion.jsx`
- [OTP route page](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/OtpPage.jsx): `src/OtpPage.jsx`
- [OTP verification](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/OtpModal.jsx): `src/OtpModal.jsx`
- [Login page](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/login.jsx): `src/login.jsx`
- [Reset request dialog](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/container/otppopup.jsx): `container/otppopup.jsx`
- [Reset password page](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/ResetPasswordPage.jsx): `src/ResetPasswordPage.jsx`

### Form and session support

- [Auth layout](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/AuthLayout.jsx): `src/components/AuthLayout.jsx`
- [Form fields](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/FormField.jsx): `src/components/FormField.jsx`
- [Auth form hook](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/useAuthForm.js): `src/components/useAuthForm.js`
- [Auth validation](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/authValidation.js): `src/lib/authValidation.js`
- [Expiry countdown](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/components/useExpiry.js): `src/components/useExpiry.js`
- [Pending verification](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/verificationSession.js): `src/lib/verificationSession.js`

### API and state

- [Auth API client](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/lib/authApi.js): `src/lib/authApi.js`
- [User info slice](https://github.com/muradhosenrafi/dashboard-e-commerce/blob/main/src/slices/userinfoslices.js): `src/slices/userinfoslices.js`

### Other components

- **Visitor**
- **Auth backend**

## Connections

- Visitor → Route application: opens routes (evidence: `src/App.jsx`)
- Route application → Registration page: routes to (evidence: `src/App.jsx`)
- Route application → Login page: routes to (evidence: `src/App.jsx`)
- Route application → OTP route page: routes to (evidence: `src/App.jsx`)
- Route application → Reset request dialog: routes to (evidence: `src/App.jsx`)
- Route application → Reset password page: routes to (evidence: `src/App.jsx`)
- Route application → Home page: routes to (evidence: `src/App.jsx`)
- Registration page → Auth layout: renders in (evidence: `src/Registion.jsx`)
- Registration page → Form fields: renders (evidence: `src/Registion.jsx`)
- Registration page → Auth form hook: uses (evidence: `src/Registion.jsx`)
- Registration page → Expiry countdown: checks deadline (evidence: `src/Registion.jsx`)
- Registration page → Pending verification: reads and writes (evidence: `src/Registion.jsx`)
- Registration page → Auth API client: submits registration (evidence: `src/Registion.jsx`)
- Registration page → OTP route page: navigates to (evidence: `src/Registion.jsx`)
- OTP route page → OTP verification: renders (evidence: `src/OtpPage.jsx`)
- OTP route page → Pending verification: checks pending entry (evidence: `src/OtpPage.jsx`)
- OTP verification → Auth API client: submits code (evidence: `src/OtpModal.jsx`)
- OTP verification → Expiry countdown: checks deadline (evidence: `src/OtpModal.jsx`)
- OTP verification → Pending verification: clears verified entry (evidence: `src/OtpModal.jsx`)
- Login page → Auth layout: renders in (evidence: `src/login.jsx`)
- Login page → Form fields: renders (evidence: `src/login.jsx`)
- Login page → Auth form hook: uses (evidence: `src/login.jsx`)
- Login page → Auth API client: submits login (evidence: `src/login.jsx`)
- Login page → Pending verification: stores pending entry (evidence: `src/login.jsx`)
- Login page → OTP route page: resumes verification (evidence: `src/login.jsx`)
- Login page → Reset request dialog: opens dialog (evidence: `src/login.jsx`)
- Login page → User info slice: dispatches action (evidence: `src/login.jsx`)
- Auth form hook → Auth validation: validates fields (evidence: `src/components/useAuthForm.js`)
- Registration page → Auth backend: registration request (evidence: `README.md`)
- Login page → Auth backend: login request (evidence: `README.md`)
- OTP verification → Auth backend: verification request (evidence: `README.md`)
- Login page → Auth backend: reset request (evidence: `README.md`)