# elma-123/task-manager architecture

> Architecture diagram of the GitHub repository elma-123/task-manager, 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/elma-123/task-manager
- Repository: https://github.com/elma-123/task-manager

## Overview

1. **Overall shape**
   - This is a two-tier task management system: a React/Vite frontend talks to an Express/Node backend over HTTP.
   - The backend is the only place that enforces authentication, authorization, and data mutation rules.

2. **Frontend boundary**
   - The frontend lives under `frontend/src` and is organized into:
     - `pages` for route-level screens: `Login`, `AdminDashboard`, `UserDashboard`
     - `components` for reusable UI: navbar, sidebar, tables, stats cards, auth guard
     - `services` for API communication via `apiService.js`
   - This layer is responsible for rendering role-specific views and calling backend endpoints.

3. **Route and access control on the client**
   - `AuthGuard.jsx` acts as the client-side gate for protected screens.
   - The UI likely routes users into admin vs user dashboards after login, with protected navigation based on authentication state and role.

4. **Backend API layer**
   - The backend is centered in `backend/server.js` and split into route/controller modules:
     - `controllers/authRoutes.js`
     - `controllers/adminRoutes.js`
     - `controllers/userRoutes.js`
   - This separation suggests distinct API surfaces for login/auth, admin operations, and user operations.

5. **Authentication flow**
   - Login is JWT-based, with password hashing handled by bcrypt.
   - `authRoutes.js` handles credential verification and token issuance.
   - The frontend then uses the token to access protected endpoints; the backend validates that token on subsequent requests.

6. **Authorization boundary**
   - `middleware/auth.js` is the token validation layer.
   - `middleware/role.js` adds role-based checks, splitting access between Admin and User behaviors.
   - This is the key architectural boundary: the same API server serves multiple roles, but permissions are enforced server-side.

7. **Domain model: users and tasks**
   - The system revolves around two primary resource types:
     - Users: create, read, update, delete, search
     - Tasks: create, assign, update, delete, search, mark complete
   - Admin workflows manage both entities; user workflows are read/update limited to assigned tasks.

8. **Persistence model**
   - Data is stored in JSON files under `backend/data`:
     - `userdata.json`
     - `taskdata.json`
   - `generateHash.js` indicates a utility for preparing hashed credentials for stored user records.
   - There is no database service in this repo; persistence is file-based and embedded in the backend.

9. **Admin vs user experience**
   - The admin dashboard is the management plane: statistics, user CRUD, task CRUD, assignment, and status monitoring.
   - The user dashboard is the execution plane: view assigned tasks, update completion status, and log out.
   - Both are backed by the same API but exposed through different UI routes and role checks.

10. **Frontend data presentation**
   - Shared table and card components indicate the dashboards are data-heavy and driven by API responses.
   - `StatsCard`, `TaskTable`, and `UserTable` suggest the app summarizes operational state, not just forms and navigation.

11. **Runtime and tooling**
   - Frontend: React with Vite, using Axios for HTTP and CSS for styling.
   - Backend: Node.js with Express, JWT, and bcrypt.
   - Local development is split across `localhost:5173` for the frontend and `localhost:9000` for the backend.

12. **End-to-end request flow**
   - A user logs in through the React app.
   - The frontend sends credentials to the backend auth route.
   - The backend verifies the password, issues a JWT, and the client uses that token for protected requests.
   - Admin/user requests pass through auth and role middleware before reading or updating the JSON data files.

13. **What to show in an architecture diagram**
   - Draw three main layers: browser UI, Express API, and file storage.
   - Inside the API layer, show separate auth/admin/user route groups plus auth/role middleware.
   - On the UI side, separate login, admin dashboard, and user dashboard, all using a shared API service.

Main entry points: [`backend/controllers/adminRoutes.js`](https://github.com/elma-123/task-manager/blob/main/backend/controllers/adminRoutes.js) (Admin Routes), [`frontend/src/pages/AdminDashboard.jsx`](https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/AdminDashboard.jsx) (Admin Dashboard), [`frontend/src/pages/UserDashboard.jsx`](https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/UserDashboard.jsx) (User Dashboard), [`backend/server.js`](https://github.com/elma-123/task-manager/blob/main/backend/server.js) (API Server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_browser_app["Browser UI<br/>react app<br/>[App.jsx]"]
  node_login_page["Login<br/>page<br/>[Login.jsx]"]
  node_admin_dashboard["Admin Dashboard<br/>page<br/>[AdminDashboard.jsx]"]
  node_user_dashboard["User Dashboard<br/>page<br/>[UserDashboard.jsx]"]
  node_auth_guard{{"Auth Guard<br/>client gate<br/>[AuthGuard.jsx]"}}
  node_api_service["API Service<br/>http client<br/>[apiService.js]"]
  node_ui_shell["UI Shell<br/>shared components<br/>[Navbar.jsx]"]
  node_dashboard_widgets["Widgets<br/>[StatsCard.jsx]"]
end

subgraph group_backend["Backend"]
  node_server["API Server<br/>express server<br/>[server.js]"]
  node_auth_routes["Auth Routes<br/>route module<br/>[authRoutes.js]"]
  node_admin_routes["Admin Routes<br/>route module<br/>[adminRoutes.js]"]
  node_user_routes["User Routes<br/>route module<br/>[userRoutes.js]"]
  node_auth_mw{{"Auth Middleware<br/>token check<br/>[auth.js]"}}
  node_role_mw{{"Role Middleware<br/>access control<br/>[role.js]"}}
end

subgraph group_storage["Data"]
  node_user_data[("User Data<br/>json store<br/>[userdata.json]")]
  node_task_data[("Task Data<br/>json store<br/>[taskdata.json]")]
end

node_browser_app -->|"routes to"| node_login_page
node_browser_app -->|"routes to"| node_admin_dashboard
node_browser_app -->|"routes to"| node_user_dashboard
node_login_page -->|"calls"| node_api_service
node_admin_dashboard -->|"calls"| node_api_service
node_user_dashboard -->|"calls"| node_api_service
node_auth_guard -->|"protects"| node_admin_dashboard
node_auth_guard -->|"protects"| node_user_dashboard
node_ui_shell -->|"supports"| node_admin_dashboard
node_ui_shell -->|"supports"| node_user_dashboard
node_dashboard_widgets -->|"renders"| node_admin_dashboard
node_dashboard_widgets -->|"renders"| node_user_dashboard
node_api_service -->|"requests"| node_server
node_server -->|"mounts"| node_auth_routes
node_server -->|"mounts"| node_admin_routes
node_server -->|"mounts"| node_user_routes
node_auth_routes -->|"uses"| node_auth_mw
node_admin_routes -->|"uses"| node_auth_mw
node_user_routes -->|"uses"| node_auth_mw
node_admin_routes -->|"uses"| node_role_mw
node_user_routes -->|"uses"| node_role_mw
node_auth_routes -->|"reads"| node_user_data
node_admin_routes -->|"reads/writes"| node_user_data
node_admin_routes -->|"reads/writes"| node_task_data
node_user_routes -->|"reads/writes"| node_task_data

click node_browser_app "https://github.com/elma-123/task-manager/blob/main/frontend/src/App.jsx"
click node_login_page "https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/Login.jsx"
click node_admin_dashboard "https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/AdminDashboard.jsx"
click node_user_dashboard "https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/UserDashboard.jsx"
click node_auth_guard "https://github.com/elma-123/task-manager/blob/main/frontend/src/components/AuthGuard.jsx"
click node_api_service "https://github.com/elma-123/task-manager/blob/main/frontend/src/services/apiService.js"
click node_ui_shell "https://github.com/elma-123/task-manager/blob/main/frontend/src/components/Navbar.jsx"
click node_dashboard_widgets "https://github.com/elma-123/task-manager/blob/main/frontend/src/components/StatsCard.jsx"
click node_server "https://github.com/elma-123/task-manager/blob/main/backend/server.js"
click node_auth_routes "https://github.com/elma-123/task-manager/blob/main/backend/controllers/authRoutes.js"
click node_admin_routes "https://github.com/elma-123/task-manager/blob/main/backend/controllers/adminRoutes.js"
click node_user_routes "https://github.com/elma-123/task-manager/blob/main/backend/controllers/userRoutes.js"
click node_auth_mw "https://github.com/elma-123/task-manager/blob/main/backend/middleware/auth.js"
click node_role_mw "https://github.com/elma-123/task-manager/blob/main/backend/middleware/role.js"
click node_user_data "https://github.com/elma-123/task-manager/blob/main/backend/data/userdata.json"
click node_task_data "https://github.com/elma-123/task-manager/blob/main/backend/data/taskdata.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_browser_app,node_login_page,node_admin_dashboard,node_user_dashboard,node_auth_guard,node_api_service,node_ui_shell,node_dashboard_widgets toneBlue
class node_server,node_auth_routes,node_admin_routes,node_user_routes,node_auth_mw,node_role_mw toneAmber
class node_user_data,node_task_data toneMint
```

## Components

### Frontend

React/Vite browser UI and client-side access control

- [Browser UI](https://github.com/elma-123/task-manager/blob/main/frontend/src/App.jsx): react app · Client-side application shell for login and role-based dashboards · `frontend/src/App.jsx`
- [Login](https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/Login.jsx): page · Authentication screen for entering credentials · `frontend/src/pages/Login.jsx`
- [Admin Dashboard](https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/AdminDashboard.jsx): page · Management UI for users, tasks, and stats · `frontend/src/pages/AdminDashboard.jsx`
- [User Dashboard](https://github.com/elma-123/task-manager/blob/main/frontend/src/pages/UserDashboard.jsx): page · Task execution UI for assigned work · `frontend/src/pages/UserDashboard.jsx`
- [Auth Guard](https://github.com/elma-123/task-manager/blob/main/frontend/src/components/AuthGuard.jsx): client gate · Protects authenticated routes in the UI · `frontend/src/components/AuthGuard.jsx`
- [API Service](https://github.com/elma-123/task-manager/blob/main/frontend/src/services/apiService.js): http client · Shared frontend layer for calling backend endpoints · `frontend/src/services/apiService.js`
- [UI Shell](https://github.com/elma-123/task-manager/blob/main/frontend/src/components/Navbar.jsx): shared components · Navigation and layout components used across dashboards · `frontend/src/components/Navbar.jsx`
- [Widgets](https://github.com/elma-123/task-manager/blob/main/frontend/src/components/StatsCard.jsx): ui widgets · Shared tables and stat cards for dashboard data display · `frontend/src/components/StatsCard.jsx`

### Backend

Express API, authorization, and domain routes

- [API Server](https://github.com/elma-123/task-manager/blob/main/backend/server.js): express server · Backend entrypoint that mounts routes and middleware · `backend/server.js`
- [Auth Routes](https://github.com/elma-123/task-manager/blob/main/backend/controllers/authRoutes.js): route module · Login and token issuance endpoints · `backend/controllers/authRoutes.js`
- [Admin Routes](https://github.com/elma-123/task-manager/blob/main/backend/controllers/adminRoutes.js): route module · Admin-only operations for users and tasks · `backend/controllers/adminRoutes.js`
- [User Routes](https://github.com/elma-123/task-manager/blob/main/backend/controllers/userRoutes.js): route module · User-scoped task access and completion endpoints · `backend/controllers/userRoutes.js`
- [Auth Middleware](https://github.com/elma-123/task-manager/blob/main/backend/middleware/auth.js): token check · Validates JWTs on protected requests · `backend/middleware/auth.js`
- [Role Middleware](https://github.com/elma-123/task-manager/blob/main/backend/middleware/role.js): access control · Enforces admin versus user permissions · `backend/middleware/role.js`

### Data

File-based persistence for users and tasks

- [User Data](https://github.com/elma-123/task-manager/blob/main/backend/data/userdata.json): json store · File-backed user records and credentials · `backend/data/userdata.json`
- [Task Data](https://github.com/elma-123/task-manager/blob/main/backend/data/taskdata.json): json store · File-backed task records and assignments · `backend/data/taskdata.json`

## Connections

- Browser UI → Login: routes to · Initial authentication screen
- Browser UI → Admin Dashboard: routes to · Admin-only dashboard view
- Browser UI → User Dashboard: routes to · User dashboard view
- Login → API Service: calls · Sends credentials to backend
- Admin Dashboard → API Service: calls · Uses shared API client for management actions
- User Dashboard → API Service: calls · Uses shared API client for task actions
- Auth Guard → Admin Dashboard: protects · Blocks unauthenticated access
- Auth Guard → User Dashboard: protects · Blocks unauthenticated access
- UI Shell → Admin Dashboard: supports · Navigation and layout
- UI Shell → User Dashboard: supports · Navigation and layout
- Widgets → Admin Dashboard: renders · Tabular and summary data views
- Widgets → User Dashboard: renders · Tabular task views
- API Service → API Server: requests · HTTP calls to Express backend
- API Server → Auth Routes: mounts · Authentication API surface
- API Server → Admin Routes: mounts · Admin API surface
- API Server → User Routes: mounts · User API surface
- Auth Routes → Auth Middleware: uses · Protects downstream operations
- Admin Routes → Auth Middleware: uses · Validates tokens
- User Routes → Auth Middleware: uses · Validates tokens
- Admin Routes → Role Middleware: uses · Restricts admin-only operations
- User Routes → Role Middleware: uses · Restricts user-scoped operations
- Auth Routes → User Data: reads · Verifies credentials against stored users
- Admin Routes → User Data: reads/writes · User CRUD and search
- Admin Routes → Task Data: reads/writes · Task CRUD and assignment
- User Routes → Task Data: reads/writes · Assigned task updates and completion