# notsogaurab/three-tier-todo-app architecture

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

- Interactive diagram: https://gitdiagram.com/notsogaurab/three-tier-todo-app
- Repository: https://github.com/notsogaurab/three-tier-todo-app

## Overview

This repository implements a browser-based todo app backed by an Express API and a database. Users add, view, edit, and delete tasks in the React interface; the frontend API module sends requests to backend routes, whose controllers delegate operations through a service and model to Knex. The tree includes a database migration, but README content is empty, and the sampled sources do not establish the database’s runtime connection details or confirm the frontend/backend port configuration.

Main entry points: [`frontend/src/App.tsx`](https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/App.tsx) (Todo app), [`backend/src/services/todoService.ts`](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/services/todoService.ts) (Todo service), [`backend/src/models/TodoModel.ts`](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/models/TodoModel.ts) (Todo model), [`backend/src/routes/todoRoute.ts`](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/routes/todoRoute.ts) (Todo routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_app["Todo app<br/>[App.tsx]"]
  node_todo_component["Todo item<br/>[Todo.tsx]"]
  node_frontend_api["Todo API client<br/>[todo.ts]"]
end

subgraph group_backend["Backend API"]
  node_server["Express server<br/>[index.ts]"]
  node_routes["Todo routes<br/>[todoRoute.ts]"]
  node_controller["Todo controller<br/>[TodoController.ts]"]
  node_service["Todo service<br/>[todoService.ts]"]
  node_error_handler["Error handler<br/>[errorHandler.ts]"]
  node_todo_domain["Todo domain<br/>[Todo.ts]"]
end

subgraph group_persistence["Persistence"]
  node_model["Todo model<br/>[TodoModel.ts]"]
  node_knex["Knex connection<br/>[knex.ts]"]
  node_migration["Todo migration"]
  node_database[("Database<br/>[createdb.sql]")]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_todo_component
node_todo_component -->|"dispatches edits"| node_app
node_app -->|"requests todos"| node_frontend_api
node_frontend_api -->|"HTTP requests"| node_routes
node_server -->|"mounts routes"| node_routes
node_routes -->|"dispatches"| node_controller
node_controller -->|"calls"| node_service
node_service -->|"calls"| node_model
node_model -->|"queries"| node_knex
node_knex -->|"reads and writes"| node_database
node_migration -->|"defines schema"| node_database
node_server -->|"registers middleware"| node_error_handler
node_service -->|"uses type"| node_todo_domain
node_model -->|"uses type"| node_todo_domain

click node_app "https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/App.tsx"
click node_todo_component "https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/components/Todo.tsx"
click node_frontend_api "https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/api/todo.ts"
click node_server "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/index.ts"
click node_routes "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/routes/todoRoute.ts"
click node_controller "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/controllers/TodoController.ts"
click node_service "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/services/todoService.ts"
click node_error_handler "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/middlewares/errorHandler.ts"
click node_todo_domain "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/domain/Todo.ts"
click node_model "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/models/TodoModel.ts"
click node_knex "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/db/knex.ts"
click node_migration "https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/db/migrations/20240222091221_three_tier.ts"
click node_database "https://github.com/notsogaurab/three-tier-todo-app/blob/main/database/createdb.sql"

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_todo_component,node_frontend_api,node_user toneBlue
class node_server,node_routes,node_controller,node_service,node_error_handler,node_todo_domain toneAmber
class node_model,node_knex,node_migration,node_database toneMint
```

## Components

### Frontend

- [Todo app](https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Todo item](https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/components/Todo.tsx): `frontend/src/components/Todo.tsx`
- [Todo API client](https://github.com/notsogaurab/three-tier-todo-app/blob/main/frontend/src/api/todo.ts): `frontend/src/api/todo.ts`

### Backend API

- [Express server](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/index.ts): `backend/src/index.ts`
- [Todo routes](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/routes/todoRoute.ts): `backend/src/routes/todoRoute.ts`
- [Todo controller](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/controllers/TodoController.ts): `backend/src/controllers/TodoController.ts`
- [Todo service](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/services/todoService.ts): `backend/src/services/todoService.ts`
- [Error handler](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/middlewares/errorHandler.ts): `backend/src/middlewares/errorHandler.ts`
- [Todo domain](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/domain/Todo.ts): `backend/src/domain/Todo.ts`

### Persistence

- [Todo model](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/models/TodoModel.ts): `backend/src/models/TodoModel.ts`
- [Knex connection](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/db/knex.ts): `backend/src/db/knex.ts`
- [Todo migration](https://github.com/notsogaurab/three-tier-todo-app/blob/main/backend/src/db/migrations/20240222091221_three_tier.ts): `backend/src/db/migrations/20240222091221_three_tier.ts`
- [Database](https://github.com/notsogaurab/three-tier-todo-app/blob/main/database/createdb.sql): `database/createdb.sql`

### Other components

- **User**

## Connections

- User → Todo app: uses
- Todo app → Todo item: renders
- Todo item → Todo app: dispatches edits
- Todo app → Todo API client: requests todos
- Todo API client → Todo routes: HTTP requests
- Express server → Todo routes: mounts routes
- Todo routes → Todo controller: dispatches
- Todo controller → Todo service: calls
- Todo service → Todo model: calls
- Todo model → Knex connection: queries
- Knex connection → Database: reads and writes
- Todo migration → Database: defines schema
- Express server → Error handler: registers middleware
- Todo service → Todo domain: uses type
- Todo model → Todo domain: uses type