# athus27/studyflow-app architecture

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

- Interactive diagram: https://gitdiagram.com/athus27/studyflow-app
- Repository: https://github.com/athus27/studyflow-app

## Overview

StudyFlow is a web study organizer: users register or log in, enter protected study dashboards, and manage dashboards and their prioritized tasks. The frontend routes/pages use hooks and HTTP services to communicate with an Express API; controllers perform Prisma-backed persistence. The README also documents basic progress summaries and focus-session recording/deletion, while noting that full focus-session workflows were not completed. The tree and sampled source support the main API and persistence links; detailed page-to-hook wiring and unsampled route/controller internals are not asserted.

Main entry points: [`server/src/server.js`](https://github.com/athus27/studyflow-app/blob/main/server/src/server.js) (Express API), [`frontend-web/src/routes/AppRoutes.tsx`](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/routes/AppRoutes.tsx) (Page routing), [`server/src/database/client.js`](https://github.com/athus27/studyflow-app/blob/main/server/src/database/client.js) (Prisma access), [`frontend-web/src/App.tsx`](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/App.tsx) (Application entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_app["Application entry<br/>[App.tsx]"]
  node_routes["Page routing<br/>[AppRoutes.tsx]"]
  node_authguard["Route protection<br/>[ProtectedRoute.tsx]"]
  node_loginpage["Login and register"]
  node_dashboardpage["Study dashboard"]
  node_userpage["User page"]
end

subgraph group_clientlogic["Client data flow"]
  node_authhooks["Login and registration"]
  node_taskhook["Task state<br/>[useTasks.ts]"]
  node_httpservices["HTTP services"]
  node_userservice["User API client<br/>[usersService.ts]"]
  node_dashboardservice["Dashboard API client"]
  node_taskservice["Task API client<br/>[tasksService.ts]"]
  node_focussvc["Focus session client"]
end

subgraph group_api["API"]
  node_server["Express API<br/>[server.js]"]
  node_userctrl["User operations<br/>[UserController.js]"]
  node_dashctrl["Dashboard operations"]
  node_taskctrl["Task operations<br/>[TaskController.js]"]
  node_focusctrl["Focus records"]
end

subgraph group_persistence["Persistence"]
  node_dbclient["Prisma access<br/>[client.js]"]
end

node_student(("Student"))
node_postgres[("PostgreSQL")]

node_student -->|"uses"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"guards private pages"| node_authguard
node_routes -->|"routes to"| node_loginpage
node_routes -->|"routes to"| node_dashboardpage
node_routes -->|"routes to"| node_userpage
node_loginpage -->|"uses"| node_authhooks
node_dashboardpage -->|"uses"| node_taskhook
node_authhooks -->|"calls"| node_userservice
node_taskhook -->|"calls"| node_taskservice
node_httpservices -->|"sends HTTP requests"| node_server
node_userservice -->|"sends HTTP requests"| node_server
node_dashboardservice -->|"sends HTTP requests"| node_server
node_taskservice -->|"sends HTTP requests"| node_server
node_focussvc -.->|"sends HTTP requests"| node_server
node_server -->|"dispatches user routes"| node_userctrl
node_server -->|"dispatches dashboard routes"| node_dashctrl
node_server -->|"dispatches task routes"| node_taskctrl
node_server -->|"dispatches focus routes"| node_focusctrl
node_userctrl -->|"queries users"| node_dbclient
node_dashctrl -->|"queries dashboards and tasks"| node_dbclient
node_taskctrl -->|"queries tasks"| node_dbclient
node_focusctrl -->|"queries sessions"| node_dbclient
node_dbclient -->|"reads and writes"| node_postgres

click node_app "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/App.tsx"
click node_routes "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/routes/AppRoutes.tsx"
click node_authguard "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/routes/ProtectedRoute.tsx"
click node_loginpage "https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/Login"
click node_dashboardpage "https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/Dashboard"
click node_userpage "https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/User"
click node_authhooks "https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/hooks"
click node_taskhook "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/hooks/useTasks.ts"
click node_httpservices "https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/services"
click node_userservice "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/usersService.ts"
click node_dashboardservice "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/dashboardsService.ts"
click node_taskservice "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/tasksService.ts"
click node_focussvc "https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/focusSessionsService.ts"
click node_server "https://github.com/athus27/studyflow-app/blob/main/server/src/server.js"
click node_userctrl "https://github.com/athus27/studyflow-app/blob/main/server/src/controller/UserController.js"
click node_dashctrl "https://github.com/athus27/studyflow-app/blob/main/server/src/controller/DashboardController.js"
click node_taskctrl "https://github.com/athus27/studyflow-app/blob/main/server/src/controller/TaskController.js"
click node_focusctrl "https://github.com/athus27/studyflow-app/blob/main/server/src/controller/FocusSessionController.js"
click node_dbclient "https://github.com/athus27/studyflow-app/blob/main/server/src/database/client.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_app,node_routes,node_authguard,node_loginpage,node_dashboardpage,node_userpage toneBlue
class node_authhooks,node_taskhook,node_httpservices,node_userservice,node_dashboardservice,node_taskservice,node_focussvc,node_postgres toneAmber
class node_server,node_userctrl,node_dashctrl,node_taskctrl,node_focusctrl toneMint
class node_dbclient toneRose
class node_student toneIndigo
```

## Components

### Web interface

- [Application entry](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/App.tsx): `frontend-web/src/App.tsx`
- [Page routing](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/routes/AppRoutes.tsx): `frontend-web/src/routes/AppRoutes.tsx`
- [Route protection](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/routes/ProtectedRoute.tsx): `frontend-web/src/routes/ProtectedRoute.tsx`
- [Login and register](https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/Login): `frontend-web/src/pages/Login`
- [Study dashboard](https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/Dashboard): `frontend-web/src/pages/Dashboard`
- [User page](https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/pages/User): `frontend-web/src/pages/User`

### Client data flow

- [Login and registration](https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/hooks): `frontend-web/src/hooks`
- [Task state](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/hooks/useTasks.ts): `frontend-web/src/hooks/useTasks.ts`
- [HTTP services](https://github.com/athus27/studyflow-app/tree/main/frontend-web/src/services): `frontend-web/src/services`
- [User API client](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/usersService.ts): `frontend-web/src/services/usersService.ts`
- [Dashboard API client](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/dashboardsService.ts): `frontend-web/src/services/dashboardsService.ts`
- [Task API client](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/tasksService.ts): `frontend-web/src/services/tasksService.ts`
- [Focus session client](https://github.com/athus27/studyflow-app/blob/main/frontend-web/src/services/focusSessionsService.ts): `frontend-web/src/services/focusSessionsService.ts`

### API

- [Express API](https://github.com/athus27/studyflow-app/blob/main/server/src/server.js): `server/src/server.js`
- [User operations](https://github.com/athus27/studyflow-app/blob/main/server/src/controller/UserController.js): `server/src/controller/UserController.js`
- [Dashboard operations](https://github.com/athus27/studyflow-app/blob/main/server/src/controller/DashboardController.js): `server/src/controller/DashboardController.js`
- [Task operations](https://github.com/athus27/studyflow-app/blob/main/server/src/controller/TaskController.js): `server/src/controller/TaskController.js`
- [Focus records](https://github.com/athus27/studyflow-app/blob/main/server/src/controller/FocusSessionController.js): `server/src/controller/FocusSessionController.js`

### Persistence

- [Prisma access](https://github.com/athus27/studyflow-app/blob/main/server/src/database/client.js): `server/src/database/client.js`

### Other components

- **Student**
- **PostgreSQL**

## Connections

- Student → Application entry: uses
- Application entry → Page routing: renders
- Page routing → Route protection: guards private pages
- Page routing → Login and register: routes to
- Page routing → Study dashboard: routes to
- Page routing → User page: routes to
- Login and register → Login and registration: uses
- Study dashboard → Task state: uses
- Login and registration → User API client: calls
- Task state → Task API client: calls
- HTTP services → Express API: sends HTTP requests
- User API client → Express API: sends HTTP requests
- Dashboard API client → Express API: sends HTTP requests
- Task API client → Express API: sends HTTP requests
- Focus session client → Express API: sends HTTP requests
- Express API → User operations: dispatches user routes
- Express API → Dashboard operations: dispatches dashboard routes
- Express API → Task operations: dispatches task routes
- Express API → Focus records: dispatches focus routes
- User operations → Prisma access: queries users
- Dashboard operations → Prisma access: queries dashboards and tasks
- Task operations → Prisma access: queries tasks
- Focus records → Prisma access: queries sessions
- Prisma access → PostgreSQL: reads and writes