elma-123/task-manager

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.