How tharunhansitha/taskplan-student-task-companion works
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: taskStore.js Task state and operations · App.jsx Routes and shell · TaskCard.jsx Task card · taskService.js Task and auth client
Components 21
App shell
- Routes and shell
src/App.jsx - Responsive navigation
src/components/Layout/Layout.jsx
Identity
- Route protection
src/components/Layout/ProtectedRoute.jsx - Auth state
src/context/AuthContext.jsx - Login
src/pages/LoginPage.jsx - Registration
src/pages/RegisterPage.jsx
Task management
- Task list
src/pages/TasksPage.jsx - Task details
src/pages/TaskDetailPage.jsx - Task editor
src/components/TaskForm/TaskForm.jsx - Task card
src/components/TaskCard/TaskCard.jsx - Task filters
src/components/TaskList/FilterBar.jsx
Planning views
- Dashboard
src/pages/DashboardPage.jsx - Monthly calendar
src/pages/CalendarPage.jsx - Task statistics
src/pages/StatsPage.jsx
Task data
- Task loading hook
src/hooks/useTasks.js - Task state and operations
src/store/taskStore.js - Task and auth client
src/services/taskService.js - Task date and demo helpers
src/utils/helpers.js
Other components
- Student
- Backend API
- Browser storage
Connections 34
- Student → Routes and shell: uses
README.md - Routes and shell → Auth state: provides auth
src/App.jsx - Routes and shell → Route protection: routes through
src/App.jsx - Routes and shell → Responsive navigation: wraps screens
src/App.jsx - Route protection → Auth state: checks identity
src/components/Layout/ProtectedRoute.jsx - Login → Auth state: sets session
src/pages/LoginPage.jsx - Registration → Auth state: sets session
src/pages/RegisterPage.jsx - Login → Task and auth client: requests login
src/pages/LoginPage.jsx - Registration → Task and auth client: requests signup
src/pages/RegisterPage.jsx - Auth state → Browser storage: reads/writes session
src/context/AuthContext.jsx - Task and auth client → Browser storage: reads token
src/services/taskService.js - Task and auth client → Backend API: sends API requests
README.md - Routes and shell → Task loading hook: starts task loading
src/App.jsx - Task loading hook → Task state and operations: fetches tasks
src/hooks/useTasks.js - Task state and operations → Task and auth client: performs task operations
src/store/taskStore.js - Task list → Task filters: renders
src/pages/TasksPage.jsx - Task list → Task card: renders tasks
src/pages/TasksPage.jsx - Task list → Task editor: opens editor
src/pages/TasksPage.jsx - Task list → Task state and operations: reads task state
src/pages/TasksPage.jsx - Task filters → Task state and operations: updates filters
src/components/TaskList/FilterBar.jsx - Task editor → Task state and operations: creates or updates
src/components/TaskForm/TaskForm.jsx - Task card → Task state and operations: toggles completion
src/components/TaskCard/TaskCard.jsx - Task details → Task editor: opens editor
src/pages/TaskDetailPage.jsx - Task details → Task state and operations: updates or deletes
src/pages/TaskDetailPage.jsx - Dashboard → Task state and operations: reads tasks and stats
src/pages/DashboardPage.jsx - Dashboard → Task card: renders task cards
src/pages/DashboardPage.jsx - Dashboard → Task editor: opens editor
src/pages/DashboardPage.jsx - Monthly calendar → Task state and operations: reads tasks
src/pages/CalendarPage.jsx - Monthly calendar → Task card: renders task cards
src/pages/CalendarPage.jsx - Task statistics → Task state and operations: reads task statistics
src/pages/StatsPage.jsx - Task card → Task date and demo helpers: formats task dates
src/components/TaskCard/TaskCard.jsx - Dashboard → Task date and demo helpers: checks overdue tasks
src/pages/DashboardPage.jsx - Task details → Task date and demo helpers: formats task details
src/pages/TaskDetailPage.jsx - Student → Task date and demo helpers: uses sample tasks
README.md