# harini492/taskflow architecture

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

- Interactive diagram: https://gitdiagram.com/harini492/taskflow
- Repository: https://github.com/harini492/taskflow

## Overview

TaskFlow is a React task manager backed by an Express API. Users log in to reach the dashboard, where task actions go through an Axios client to task routes and MongoDB; authentication routes handle login and the current-user endpoint. The README also describes registration, filtering, drag-and-drop, progress, and other UI capabilities. Some are only partly visible in excerpts, so the graph avoids asserting their internal wiring; the shown auth routes use in-memory users, despite the separate User model.

Main entry points: [`backend/server.js`](https://github.com/harini492/taskflow/blob/main/backend/server.js) (HTTP server), [`frontend/src/Login.jsx`](https://github.com/harini492/taskflow/blob/main/frontend/src/Login.jsx) (Login), [`frontend/src/App.jsx`](https://github.com/harini492/taskflow/blob/main/frontend/src/App.jsx) (App switch), [`frontend/src/api.js`](https://github.com/harini492/taskflow/blob/main/frontend/src/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web app"]
  node_login["Login<br/>[Login.jsx]"]
  node_auth_state["Auth state<br/>[AuthProvider.jsx]"]
  node_app["App switch<br/>[App.jsx]"]
  node_dashboard["Task dashboard<br/>[Dashboard.jsx]"]
  node_api_client["API client<br/>[api.js]"]
end

subgraph group_backend["API"]
  node_server["HTTP server<br/>[server.js]"]
  node_auth_routes["Auth routes<br/>[auth.js]"]
  node_task_routes["Task routes<br/>[tasks.js]"]
  node_upload["Upload middleware<br/>[upload.js]"]
end

subgraph group_storage["Data"]
  node_task_model["Task model<br/>[Task.js]"]
  node_mongo[("MongoDB")]
  node_user_model["User model<br/>[User.js]"]
end

node_user(("User"))

node_user -->|"signs in"| node_login
node_login -->|"posts credentials"| node_api_client
node_login -->|"sets token"| node_auth_state
node_auth_state -->|"provides token"| node_app
node_app -->|"shows when logged out"| node_login
node_app -->|"shows when logged in"| node_dashboard
node_dashboard -->|"requests tasks"| node_api_client
node_api_client -.->|"sends API requests"| node_server
node_server -->|"mounts auth"| node_auth_routes
node_server -->|"mounts tasks"| node_task_routes
node_server -->|"connects"| node_mongo
node_task_routes -->|"queries and updates"| node_task_model
node_auth_routes -.->|"does not use"| node_user_model

click node_login "https://github.com/harini492/taskflow/blob/main/frontend/src/Login.jsx"
click node_auth_state "https://github.com/harini492/taskflow/blob/main/frontend/src/AuthProvider.jsx"
click node_app "https://github.com/harini492/taskflow/blob/main/frontend/src/App.jsx"
click node_dashboard "https://github.com/harini492/taskflow/blob/main/frontend/src/Dashboard.jsx"
click node_api_client "https://github.com/harini492/taskflow/blob/main/frontend/src/api.js"
click node_server "https://github.com/harini492/taskflow/blob/main/backend/server.js"
click node_auth_routes "https://github.com/harini492/taskflow/blob/main/backend/routes/auth.js"
click node_task_routes "https://github.com/harini492/taskflow/blob/main/backend/routes/tasks.js"
click node_task_model "https://github.com/harini492/taskflow/blob/main/backend/models/Task.js"
click node_user_model "https://github.com/harini492/taskflow/blob/main/backend/models/User.js"
click node_upload "https://github.com/harini492/taskflow/blob/main/backend/middleware/upload.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_login,node_auth_state,node_app,node_dashboard,node_api_client,node_user toneBlue
class node_server,node_auth_routes,node_task_routes,node_upload toneAmber
class node_task_model,node_mongo,node_user_model toneMint
```

## Components

### Web app

- [Login](https://github.com/harini492/taskflow/blob/main/frontend/src/Login.jsx): `frontend/src/Login.jsx`
- [Auth state](https://github.com/harini492/taskflow/blob/main/frontend/src/AuthProvider.jsx): `frontend/src/AuthProvider.jsx`
- [App switch](https://github.com/harini492/taskflow/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Task dashboard](https://github.com/harini492/taskflow/blob/main/frontend/src/Dashboard.jsx): `frontend/src/Dashboard.jsx`
- [API client](https://github.com/harini492/taskflow/blob/main/frontend/src/api.js): `frontend/src/api.js`

### API

- [HTTP server](https://github.com/harini492/taskflow/blob/main/backend/server.js): `backend/server.js`
- [Auth routes](https://github.com/harini492/taskflow/blob/main/backend/routes/auth.js): `backend/routes/auth.js`
- [Task routes](https://github.com/harini492/taskflow/blob/main/backend/routes/tasks.js): `backend/routes/tasks.js`
- [Upload middleware](https://github.com/harini492/taskflow/blob/main/backend/middleware/upload.js): `backend/middleware/upload.js`

### Data

- [Task model](https://github.com/harini492/taskflow/blob/main/backend/models/Task.js): `backend/models/Task.js`
- **MongoDB**
- [User model](https://github.com/harini492/taskflow/blob/main/backend/models/User.js): `backend/models/User.js`

### Other components

- **User**

## Connections

- User → Login: signs in (evidence: `frontend/src/Login.jsx`)
- Login → API client: posts credentials (evidence: `frontend/src/Login.jsx`)
- Login → Auth state: sets token (evidence: `frontend/src/Login.jsx`)
- Auth state → App switch: provides token (evidence: `frontend/src/main.jsx`)
- App switch → Login: shows when logged out (evidence: `frontend/src/App.jsx`)
- App switch → Task dashboard: shows when logged in (evidence: `frontend/src/App.jsx`)
- Task dashboard → API client: requests tasks (evidence: `frontend/src/Dashboard.jsx`)
- API client → HTTP server: sends API requests
- HTTP server → Auth routes: mounts auth (evidence: `backend/server.js`)
- HTTP server → Task routes: mounts tasks (evidence: `backend/server.js`)
- HTTP server → MongoDB: connects (evidence: `backend/server.js`)
- Task routes → Task model: queries and updates (evidence: `backend/routes/tasks.js`)
- Auth routes → User model: does not use