# tharunhansitha/taskplan-student-task-companion architecture

> Architecture diagram of the GitHub repository tharunhansitha/taskplan-student-task-companion, 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/tharunhansitha/taskplan-student-task-companion
- Repository: https://github.com/tharunhansitha/taskplan-student-task-companion

## Overview

TaskPlan is a React student task planner. Students authenticate (or enter the documented demo mode), then create and manage assignments; the app presents them in task, dashboard, calendar, and statistics views. The sampled code shows routing, task state and API operations, but not the calendar/statistics implementations or demo-mode wiring, so those feature nodes are retained from the README without speculative internal edges. The backend is external and not included.

Main entry points: [`src/store/taskStore.js`](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/store/taskStore.js) (Task state and operations), [`src/App.jsx`](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/App.jsx) (Routes and shell), [`src/components/TaskCard/TaskCard.jsx`](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskCard/TaskCard.jsx) (Task card), [`src/services/taskService.js`](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/services/taskService.js) (Task and auth client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_router["Routes and shell<br/>[App.jsx]"]
  node_layout["Responsive navigation<br/>[Layout.jsx]"]
end

subgraph group_identity["Identity"]
  node_guard["Route protection<br/>[ProtectedRoute.jsx]"]
  node_auth["Auth state<br/>[AuthContext.jsx]"]
  node_login["Login<br/>[LoginPage.jsx]"]
  node_register["Registration<br/>[RegisterPage.jsx]"]
end

subgraph group_tasks["Task management"]
  node_tasklist["Task list<br/>[TasksPage.jsx]"]
  node_detail["Task details<br/>[TaskDetailPage.jsx]"]
  node_form["Task editor<br/>[TaskForm.jsx]"]
  node_card["Task card<br/>[TaskCard.jsx]"]
  node_filters["Task filters<br/>[FilterBar.jsx]"]
end

subgraph group_insights["Planning views"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_calendar["Monthly calendar<br/>[CalendarPage.jsx]"]
  node_stats["Task statistics<br/>[StatsPage.jsx]"]
end

subgraph group_data["Task data"]
  node_loading["Task loading hook<br/>[useTasks.js]"]
  node_store["Task state and operations<br/>[taskStore.js]"]
  node_service["Task and auth client<br/>[taskService.js]"]
  node_helpers["Task date and demo helpers<br/>[helpers.js]"]
end

node_student(("Student"))
node_api{{"Backend API"}}
node_browser[("Browser storage")]

node_student -->|"uses"| node_router
node_router -->|"provides auth"| node_auth
node_router -->|"routes through"| node_guard
node_router -->|"wraps screens"| node_layout
node_guard -->|"checks identity"| node_auth
node_login -->|"sets session"| node_auth
node_register -->|"sets session"| node_auth
node_login -->|"requests login"| node_service
node_register -->|"requests signup"| node_service
node_auth -->|"reads/writes session"| node_browser
node_service -->|"reads token"| node_browser
node_service -->|"sends API requests"| node_api
node_router -->|"starts task loading"| node_loading
node_loading -->|"fetches tasks"| node_store
node_store -->|"performs task operations"| node_service
node_tasklist -->|"renders"| node_filters
node_tasklist -->|"renders tasks"| node_card
node_tasklist -->|"opens editor"| node_form
node_tasklist -->|"reads task state"| node_store
node_filters -->|"updates filters"| node_store
node_form -->|"creates or updates"| node_store
node_card -->|"toggles completion"| node_store
node_detail -->|"opens editor"| node_form
node_detail -->|"updates or deletes"| node_store
node_dashboard -->|"reads tasks and stats"| node_store
node_dashboard -->|"renders task cards"| node_card
node_dashboard -->|"opens editor"| node_form
node_calendar -->|"reads tasks"| node_store
node_calendar -->|"renders task cards"| node_card
node_stats -->|"reads task statistics"| node_store
node_card -->|"formats task dates"| node_helpers
node_dashboard -->|"checks overdue tasks"| node_helpers
node_detail -->|"formats task details"| node_helpers
node_student -.->|"uses sample tasks"| node_helpers

click node_router "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/App.jsx"
click node_layout "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/Layout/Layout.jsx"
click node_guard "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/Layout/ProtectedRoute.jsx"
click node_auth "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/LoginPage.jsx"
click node_register "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/RegisterPage.jsx"
click node_tasklist "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/TasksPage.jsx"
click node_detail "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/TaskDetailPage.jsx"
click node_form "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskForm/TaskForm.jsx"
click node_card "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskCard/TaskCard.jsx"
click node_filters "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskList/FilterBar.jsx"
click node_dashboard "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/DashboardPage.jsx"
click node_calendar "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/CalendarPage.jsx"
click node_stats "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/StatsPage.jsx"
click node_loading "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/hooks/useTasks.js"
click node_store "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/store/taskStore.js"
click node_service "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/services/taskService.js"
click node_helpers "https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/utils/helpers.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_router,node_layout toneBlue
class node_guard,node_auth,node_login,node_register,node_browser toneAmber
class node_tasklist,node_detail,node_form,node_card,node_filters,node_api toneMint
class node_dashboard,node_calendar,node_stats toneRose
class node_loading,node_store,node_service,node_helpers,node_student toneIndigo
```

## Components

### App shell

- [Routes and shell](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/App.jsx): `src/App.jsx`
- [Responsive navigation](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/Layout/Layout.jsx): `src/components/Layout/Layout.jsx`

### Identity

- [Route protection](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/Layout/ProtectedRoute.jsx): `src/components/Layout/ProtectedRoute.jsx`
- [Auth state](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Login](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`
- [Registration](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/RegisterPage.jsx): `src/pages/RegisterPage.jsx`

### Task management

- [Task list](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/TasksPage.jsx): `src/pages/TasksPage.jsx`
- [Task details](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/TaskDetailPage.jsx): `src/pages/TaskDetailPage.jsx`
- [Task editor](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskForm/TaskForm.jsx): `src/components/TaskForm/TaskForm.jsx`
- [Task card](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskCard/TaskCard.jsx): `src/components/TaskCard/TaskCard.jsx`
- [Task filters](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/components/TaskList/FilterBar.jsx): `src/components/TaskList/FilterBar.jsx`

### Planning views

- [Dashboard](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/DashboardPage.jsx): `src/pages/DashboardPage.jsx`
- [Monthly calendar](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/CalendarPage.jsx): `src/pages/CalendarPage.jsx`
- [Task statistics](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/pages/StatsPage.jsx): `src/pages/StatsPage.jsx`

### Task data

- [Task loading hook](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/hooks/useTasks.js): `src/hooks/useTasks.js`
- [Task state and operations](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/store/taskStore.js): `src/store/taskStore.js`
- [Task and auth client](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/services/taskService.js): `src/services/taskService.js`
- [Task date and demo helpers](https://github.com/tharunhansitha/taskplan-student-task-companion/blob/main/src/utils/helpers.js): `src/utils/helpers.js`

### Other components

- **Student**
- **Backend API**
- **Browser storage**

## Connections

- Student → Routes and shell: uses (evidence: `README.md`)
- Routes and shell → Auth state: provides auth (evidence: `src/App.jsx`)
- Routes and shell → Route protection: routes through (evidence: `src/App.jsx`)
- Routes and shell → Responsive navigation: wraps screens (evidence: `src/App.jsx`)
- Route protection → Auth state: checks identity (evidence: `src/components/Layout/ProtectedRoute.jsx`)
- Login → Auth state: sets session (evidence: `src/pages/LoginPage.jsx`)
- Registration → Auth state: sets session (evidence: `src/pages/RegisterPage.jsx`)
- Login → Task and auth client: requests login (evidence: `src/pages/LoginPage.jsx`)
- Registration → Task and auth client: requests signup (evidence: `src/pages/RegisterPage.jsx`)
- Auth state → Browser storage: reads/writes session (evidence: `src/context/AuthContext.jsx`)
- Task and auth client → Browser storage: reads token (evidence: `src/services/taskService.js`)
- Task and auth client → Backend API: sends API requests (evidence: `README.md`)
- Routes and shell → Task loading hook: starts task loading (evidence: `src/App.jsx`)
- Task loading hook → Task state and operations: fetches tasks (evidence: `src/hooks/useTasks.js`)
- Task state and operations → Task and auth client: performs task operations (evidence: `src/store/taskStore.js`)
- Task list → Task filters: renders (evidence: `src/pages/TasksPage.jsx`)
- Task list → Task card: renders tasks (evidence: `src/pages/TasksPage.jsx`)
- Task list → Task editor: opens editor (evidence: `src/pages/TasksPage.jsx`)
- Task list → Task state and operations: reads task state (evidence: `src/pages/TasksPage.jsx`)
- Task filters → Task state and operations: updates filters (evidence: `src/components/TaskList/FilterBar.jsx`)
- Task editor → Task state and operations: creates or updates (evidence: `src/components/TaskForm/TaskForm.jsx`)
- Task card → Task state and operations: toggles completion (evidence: `src/components/TaskCard/TaskCard.jsx`)
- Task details → Task editor: opens editor (evidence: `src/pages/TaskDetailPage.jsx`)
- Task details → Task state and operations: updates or deletes (evidence: `src/pages/TaskDetailPage.jsx`)
- Dashboard → Task state and operations: reads tasks and stats (evidence: `src/pages/DashboardPage.jsx`)
- Dashboard → Task card: renders task cards (evidence: `src/pages/DashboardPage.jsx`)
- Dashboard → Task editor: opens editor (evidence: `src/pages/DashboardPage.jsx`)
- Monthly calendar → Task state and operations: reads tasks (evidence: `src/pages/CalendarPage.jsx`)
- Monthly calendar → Task card: renders task cards (evidence: `src/pages/CalendarPage.jsx`)
- Task statistics → Task state and operations: reads task statistics (evidence: `src/pages/StatsPage.jsx`)
- Task card → Task date and demo helpers: formats task dates (evidence: `src/components/TaskCard/TaskCard.jsx`)
- Dashboard → Task date and demo helpers: checks overdue tasks (evidence: `src/pages/DashboardPage.jsx`)
- Task details → Task date and demo helpers: formats task details (evidence: `src/pages/TaskDetailPage.jsx`)
- Student → Task date and demo helpers: uses sample tasks (evidence: `README.md`)