# ihtishamzameer/reactjs_deployment_demo architecture

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

- Interactive diagram: https://gitdiagram.com/ihtishamzameer/reactjs_deployment_demo
- Repository: https://github.com/ihtishamzameer/reactjs_deployment_demo

## Overview

This is a React portfolio site with a protected project-management dashboard. Visitors browse the portfolio, projects, blog, résumé, and contact page; authenticated users enter the dashboard, where route protection checks authentication and the dashboard presents project and task information. The sampled source confirms the auth request path and portfolio data usage; dashboard internals and most page implementations were not sampled, so their detailed wiring is intentionally limited.

Main entry points: [`src/routes/AppRouter.jsx`](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/routes/AppRouter.jsx) (Route dispatch), [`src/main.jsx`](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/main.jsx) (React entry), [`src/Components/common/RequireAuth.jsx`](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/common/RequireAuth.jsx) (Route guard), [`src/pages/Portfolio.jsx`](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Portfolio.jsx) (Portfolio page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_main["React entry<br/>[main.jsx]"]
  node_router["Route dispatch<br/>[AppRouter.jsx]"]
  node_store["Redux store<br/>[store.js]"]
  node_theme["Theme provider<br/>[ThemeContext.jsx]"]
  node_globalstyle["Global styles<br/>[GlobalStyle.js]"]
  node_themevalues["Theme values<br/>[theme.js]"]
end

subgraph group_public["Public portfolio"]
  node_portfolio["Portfolio page<br/>[Portfolio.jsx]"]
  node_portfolio_nav["Portfolio navigation<br/>[PortfolioNav.jsx]"]
  node_portfolio_data["Portfolio content<br/>[portfolioData.js]"]
  node_projects["Project listings<br/>[ProjectsList.jsx]"]
  node_project_detail["Project detail<br/>[ProjectDetail.jsx]"]
  node_blog_list["Blog listing<br/>[BlogList.jsx]"]
  node_blog_post["Blog post<br/>[BlogPost.jsx]"]
  node_resume["Résumé page<br/>[ResumePage.jsx]"]
  node_contact["Contact page<br/>[ContactPage.jsx]"]
end

subgraph group_dashboard["Protected dashboard"]
  node_dashboard_layout["Dashboard layout<br/>[Layout.jsx]"]
  node_dashboard_home["Dashboard overview<br/>[Home.jsx]"]
  node_dashboard_widgets["Dashboard widgets<br/>[UpcomingTasks.jsx]"]
  node_dashboard_data["Dashboard sample data<br/>[dashboardData.js]"]
  node_dashboard_state["Dashboard state<br/>[dashboardSlice.js]"]
  node_dashboard_api["Dashboard requests<br/>[dashboardApi.js]"]
end

subgraph group_auth["Authentication"]
  node_login["Login page<br/>[Login.jsx]"]
  node_register["Registration page<br/>[Register.jsx]"]
  node_require_auth["Route guard<br/>[RequireAuth.jsx]"]
  node_auth_state["Auth state<br/>[authSlice.js]"]
  node_auth_api["Auth requests<br/>[authApi.js]"]
  node_api_client["HTTP client<br/>[apiClient.js]"]
  node_token_util["Token utility<br/>[token.js]"]
end

node_visitor(("Visitor"))
node_backend["Backend API"]

node_visitor -->|"opens routes"| node_router
node_main -->|"provides state"| node_store
node_main -->|"provides theme"| node_theme
node_main -->|"applies styles"| node_globalstyle
node_main -->|"mounts routes"| node_router
node_router -->|"routes to"| node_portfolio
node_router -->|"routes to"| node_projects
node_router -->|"routes to"| node_project_detail
node_router -->|"routes to"| node_blog_list
node_router -->|"routes to"| node_blog_post
node_router -->|"routes to"| node_resume
node_router -->|"routes to"| node_contact
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_register
node_router -->|"guards dashboard"| node_require_auth
node_require_auth -->|"allows child routes"| node_dashboard_layout
node_dashboard_layout -->|"renders overview"| node_dashboard_home
node_dashboard_home -->|"presents tasks"| node_dashboard_widgets
node_dashboard_widgets -->|"reads tasks"| node_dashboard_data
node_portfolio -->|"renders navigation"| node_portfolio_nav
node_portfolio -->|"reads content"| node_portfolio_data
node_theme -->|"selects palette"| node_themevalues
node_require_auth -->|"dispatches logout"| node_auth_state
node_require_auth -->|"validates token"| node_token_util
node_auth_state -->|"calls auth requests"| node_auth_api
node_auth_api -->|"sends requests"| node_api_client
node_api_client -->|"calls API"| node_backend

click node_main "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/main.jsx"
click node_router "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/routes/AppRouter.jsx"
click node_store "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/store/store.js"
click node_theme "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/ThemeContext.jsx"
click node_globalstyle "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/GlobalStyle.js"
click node_themevalues "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/theme.js"
click node_portfolio "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Portfolio.jsx"
click node_portfolio_nav "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/portfolio/PortfolioNav.jsx"
click node_portfolio_data "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/data/portfolioData.js"
click node_projects "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ProjectsList.jsx"
click node_project_detail "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ProjectDetail.jsx"
click node_blog_list "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/BlogList.jsx"
click node_blog_post "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/BlogPost.jsx"
click node_resume "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ResumePage.jsx"
click node_contact "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ContactPage.jsx"
click node_login "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Register.jsx"
click node_require_auth "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/common/RequireAuth.jsx"
click node_auth_state "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/auth/authSlice.js"
click node_auth_api "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/auth/authApi.js"
click node_api_client "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/services/apiClient.js"
click node_dashboard_layout "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/layout/Layout.jsx"
click node_dashboard_home "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Home.jsx"
click node_dashboard_widgets "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/dashboard/UpcomingTasks.jsx"
click node_dashboard_data "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/data/dashboardData.js"
click node_dashboard_state "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/dashboard/dashboardSlice.js"
click node_dashboard_api "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/dashboard/dashboardApi.js"
click node_token_util "https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/utils/token.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_main,node_router,node_store,node_theme,node_globalstyle,node_themevalues toneBlue
class node_portfolio,node_portfolio_nav,node_portfolio_data,node_projects,node_project_detail,node_blog_list,node_blog_post,node_resume,node_contact toneAmber
class node_dashboard_layout,node_dashboard_home,node_dashboard_widgets,node_dashboard_data,node_dashboard_state,node_dashboard_api,node_backend toneMint
class node_login,node_register,node_require_auth,node_auth_state,node_auth_api,node_api_client,node_token_util toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/main.jsx): `src/main.jsx`
- [Route dispatch](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/routes/AppRouter.jsx): `src/routes/AppRouter.jsx`
- [Redux store](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/store/store.js): `src/store/store.js`
- [Theme provider](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/ThemeContext.jsx): `src/styles/ThemeContext.jsx`
- [Global styles](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/GlobalStyle.js): `src/styles/GlobalStyle.js`
- [Theme values](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/styles/theme.js): `src/styles/theme.js`

### Public portfolio

- [Portfolio page](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Portfolio.jsx): `src/pages/Portfolio.jsx`
- [Portfolio navigation](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/portfolio/PortfolioNav.jsx): `src/Components/portfolio/PortfolioNav.jsx`
- [Portfolio content](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/data/portfolioData.js): `src/data/portfolioData.js`
- [Project listings](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ProjectsList.jsx): `src/pages/ProjectsList.jsx`
- [Project detail](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ProjectDetail.jsx): `src/pages/ProjectDetail.jsx`
- [Blog listing](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/BlogList.jsx): `src/pages/BlogList.jsx`
- [Blog post](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/BlogPost.jsx): `src/pages/BlogPost.jsx`
- [Résumé page](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ResumePage.jsx): `src/pages/ResumePage.jsx`
- [Contact page](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/ContactPage.jsx): `src/pages/ContactPage.jsx`

### Protected dashboard

- [Dashboard layout](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/layout/Layout.jsx): `src/Components/layout/Layout.jsx`
- [Dashboard overview](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Dashboard widgets](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/dashboard/UpcomingTasks.jsx): `src/Components/dashboard/UpcomingTasks.jsx`
- [Dashboard sample data](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/data/dashboardData.js): `src/data/dashboardData.js`
- [Dashboard state](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/dashboard/dashboardSlice.js): `src/features/dashboard/dashboardSlice.js`
- [Dashboard requests](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/dashboard/dashboardApi.js): `src/features/dashboard/dashboardApi.js`

### Authentication

- [Login page](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Registration page](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Route guard](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/Components/common/RequireAuth.jsx): `src/Components/common/RequireAuth.jsx`
- [Auth state](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/auth/authSlice.js): `src/features/auth/authSlice.js`
- [Auth requests](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/features/auth/authApi.js): `src/features/auth/authApi.js`
- [HTTP client](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/services/apiClient.js): `src/services/apiClient.js`
- [Token utility](https://github.com/ihtishamzameer/reactjs_deployment_demo/blob/main/src/utils/token.js): `src/utils/token.js`

### Other components

- **Visitor**
- **Backend API**

## Connections

- Visitor → Route dispatch: opens routes
- React entry → Redux store: provides state
- React entry → Theme provider: provides theme
- React entry → Global styles: applies styles
- React entry → Route dispatch: mounts routes
- Route dispatch → Portfolio page: routes to
- Route dispatch → Project listings: routes to
- Route dispatch → Project detail: routes to
- Route dispatch → Blog listing: routes to
- Route dispatch → Blog post: routes to
- Route dispatch → Résumé page: routes to
- Route dispatch → Contact page: routes to
- Route dispatch → Login page: routes to
- Route dispatch → Registration page: routes to
- Route dispatch → Route guard: guards dashboard
- Route guard → Dashboard layout: allows child routes
- Dashboard layout → Dashboard overview: renders overview
- Dashboard overview → Dashboard widgets: presents tasks
- Dashboard widgets → Dashboard sample data: reads tasks
- Portfolio page → Portfolio navigation: renders navigation
- Portfolio page → Portfolio content: reads content
- Theme provider → Theme values: selects palette
- Route guard → Auth state: dispatches logout
- Route guard → Token utility: validates token
- Auth state → Auth requests: calls auth requests
- Auth requests → HTTP client: sends requests
- HTTP client → Backend API: calls API