# daria-k15/todo-app architecture

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

- Interactive diagram: https://gitdiagram.com/daria-k15/todo-app
- Repository: https://github.com/daria-k15/todo-app

## Overview

This is a full-stack todo app: users manage prioritized tasks in a React interface, while the frontend hook and API client send requests to an Express backend that validates and updates in-memory state. The app also displays todo statistics and persists the theme choice in browser storage. The route-to-service flow is supported by sampled source; component internals beyond App and useTodos are represented only where the README documents their capabilities.

Main entry points: [`frontend/src/App.tsx`](https://github.com/daria-k15/todo-app/blob/main/frontend/src/App.tsx) (App), [`backend/src/app.js`](https://github.com/daria-k15/todo-app/blob/main/backend/src/app.js) (Express app), [`backend/src/controller/todoController.js`](https://github.com/daria-k15/todo-app/blob/main/backend/src/controller/todoController.js) (Controller), [`backend/src/service/todoService.js`](https://github.com/daria-k15/todo-app/blob/main/backend/src/service/todoService.js) (Todo service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Todo interface"]
  node_app["App<br/>[App.tsx]"]
  node_hook["Todo state<br/>[useTodos.ts]"]
  node_client["API client<br/>[todoService.ts]"]
  node_form["Todo form<br/>[TodoForm.tsx]"]
  node_list["Todo list<br/>[TodoList.tsx]"]
  node_item["Todo item<br/>[TodoItem.tsx]"]
  node_statsview["Stats view<br/>[TodoStats.tsx]"]
end

subgraph group_api["API layer"]
  node_routes["Todo routes<br/>[todoRoutes.js]"]
  node_controller["Controller<br/>[todoController.js]"]
  node_appserver["Express app<br/>[app.js]"]
  node_server["HTTP server<br/>[server.js]"]
end

subgraph group_domain["Todo domain"]
  node_service["Todo service<br/>[todoService.js]"]
  node_model["Todo model<br/>[todoModel.js]"]
  node_store[("In-memory store<br/>[database.js]")]
end

subgraph group_support["App support"]
  node_error["Error handler<br/>[errorHandler.js]"]
  node_docs["API docs<br/>[swagger.js]"]
  node_browser[("Browser storage")]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"reads state"| node_hook
node_app -->|"renders"| node_form
node_app -->|"renders"| node_list
node_app -->|"renders"| node_statsview
node_app -->|"reads/writes theme"| node_browser
node_hook -->|"calls"| node_client
node_client -->|"HTTP requests"| node_routes
node_server -->|"starts"| node_appserver
node_appserver -->|"mounts"| node_routes
node_routes -->|"dispatches"| node_controller
node_controller -->|"calls"| node_service
node_service -->|"creates"| node_model
node_service -->|"reads/writes"| node_store
node_controller -->|"forwards errors"| node_error
node_appserver -->|"registers"| node_error
node_appserver -->|"serves docs"| node_docs

click node_app "https://github.com/daria-k15/todo-app/blob/main/frontend/src/App.tsx"
click node_hook "https://github.com/daria-k15/todo-app/blob/main/frontend/src/hooks/useTodos.ts"
click node_client "https://github.com/daria-k15/todo-app/blob/main/frontend/src/services/todoService.ts"
click node_form "https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoForm.tsx"
click node_list "https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoList.tsx"
click node_item "https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoItem.tsx"
click node_statsview "https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoStats.tsx"
click node_routes "https://github.com/daria-k15/todo-app/blob/main/backend/src/routes/todoRoutes.js"
click node_controller "https://github.com/daria-k15/todo-app/blob/main/backend/src/controller/todoController.js"
click node_appserver "https://github.com/daria-k15/todo-app/blob/main/backend/src/app.js"
click node_server "https://github.com/daria-k15/todo-app/blob/main/backend/server.js"
click node_service "https://github.com/daria-k15/todo-app/blob/main/backend/src/service/todoService.js"
click node_model "https://github.com/daria-k15/todo-app/blob/main/backend/src/models/todoModel.js"
click node_store "https://github.com/daria-k15/todo-app/blob/main/backend/src/config/database.js"
click node_error "https://github.com/daria-k15/todo-app/blob/main/backend/src/middleware/errorHandler.js"
click node_docs "https://github.com/daria-k15/todo-app/blob/main/backend/src/docs/swagger.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_hook,node_client,node_form,node_list,node_item,node_statsview,node_user toneBlue
class node_routes,node_controller,node_appserver,node_server toneAmber
class node_service,node_model,node_store toneMint
class node_error,node_docs,node_browser toneRose
```

## Components

### Todo interface

- [App](https://github.com/daria-k15/todo-app/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Todo state](https://github.com/daria-k15/todo-app/blob/main/frontend/src/hooks/useTodos.ts): `frontend/src/hooks/useTodos.ts`
- [API client](https://github.com/daria-k15/todo-app/blob/main/frontend/src/services/todoService.ts): `frontend/src/services/todoService.ts`
- [Todo form](https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoForm.tsx): `frontend/src/components/TodoForm.tsx`
- [Todo list](https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoList.tsx): `frontend/src/components/TodoList.tsx`
- [Todo item](https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoItem.tsx): `frontend/src/components/TodoItem.tsx`
- [Stats view](https://github.com/daria-k15/todo-app/blob/main/frontend/src/components/TodoStats.tsx): `frontend/src/components/TodoStats.tsx`

### API layer

- [Todo routes](https://github.com/daria-k15/todo-app/blob/main/backend/src/routes/todoRoutes.js): `backend/src/routes/todoRoutes.js`
- [Controller](https://github.com/daria-k15/todo-app/blob/main/backend/src/controller/todoController.js): `backend/src/controller/todoController.js`
- [Express app](https://github.com/daria-k15/todo-app/blob/main/backend/src/app.js): `backend/src/app.js`
- [HTTP server](https://github.com/daria-k15/todo-app/blob/main/backend/server.js): `backend/server.js`

### Todo domain

- [Todo service](https://github.com/daria-k15/todo-app/blob/main/backend/src/service/todoService.js): `backend/src/service/todoService.js`
- [Todo model](https://github.com/daria-k15/todo-app/blob/main/backend/src/models/todoModel.js): `backend/src/models/todoModel.js`
- [In-memory store](https://github.com/daria-k15/todo-app/blob/main/backend/src/config/database.js): `backend/src/config/database.js`

### App support

- [Error handler](https://github.com/daria-k15/todo-app/blob/main/backend/src/middleware/errorHandler.js): `backend/src/middleware/errorHandler.js`
- [API docs](https://github.com/daria-k15/todo-app/blob/main/backend/src/docs/swagger.js): `backend/src/docs/swagger.js`
- **Browser storage**

### Other components

- **User**

## Connections

- User → App: uses
- App → Todo state: reads state
- App → Todo form: renders
- App → Todo list: renders
- App → Stats view: renders
- App → Browser storage: reads/writes theme
- Todo state → API client: calls
- API client → Todo routes: HTTP requests
- HTTP server → Express app: starts
- Express app → Todo routes: mounts
- Todo routes → Controller: dispatches
- Controller → Todo service: calls
- Todo service → Todo model: creates
- Todo service → In-memory store: reads/writes
- Controller → Error handler: forwards errors
- Express app → Error handler: registers
- Express app → API docs: serves docs