# josh-ay/todo-app architecture

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

- Interactive diagram: https://gitdiagram.com/josh-ay/todo-app
- Repository: https://github.com/josh-ay/todo-app

## Overview

This is a server-rendered Todo app: users view and filter active or completed items, add, complete, uncheck, remove, and clear todos. Express routes in app.js coordinate MongoDB reads and writes and render the EJS view; browser JavaScript submits item actions and manages theme and sorting behavior. The README also documents responsive layouts and system-preferred themes. Source excerpts do not establish the implementation of the drag-and-drop library or every visual detail, so those links are omitted.

Main entry points: [`views/list.ejs`](https://github.com/josh-ay/todo-app/blob/main/views/list.ejs) (Todo view), [`public/js/script.js`](https://github.com/josh-ay/todo-app/blob/main/public/js/script.js) (Browser interactions), [`app.js`](https://github.com/josh-ay/todo-app/blob/main/app.js) (Todo routes), [`views/partials/header.ejs`](https://github.com/josh-ay/todo-app/blob/main/views/partials/header.ejs) (Page header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_server["Server workflow"]
  node_express["Express app<br/>[app.js]"]
  node_todo_routes["Todo routes<br/>[app.js]"]
  node_list_view["Todo view<br/>[list.ejs]"]
  node_header["Page header<br/>[header.ejs]"]
  node_footer["Page footer<br/>[footer.ejs]"]
end

subgraph group_data["Todo persistence"]
  node_active_store[("Active todos<br/>[app.js]")]
  node_done_store[("Completed todos<br/>[app.js]")]
  node_mongodb[("MongoDB")]
end

subgraph group_client["Browser experience"]
  node_browser_logic["Browser interactions<br/>[script.js]"]
  node_theme_state[("Theme preference")]
  node_system_theme["System theme"]
  node_styles["Responsive styling<br/>[style.scss]"]
  node_assets["Public assets"]
end

node_user(("Todo user"))

node_user -->|"requests pages"| node_express
node_express -->|"dispatches routes"| node_todo_routes
node_todo_routes -->|"reads and writes"| node_active_store
node_todo_routes -->|"reads and writes"| node_done_store
node_active_store -->|"persists todos"| node_mongodb
node_done_store -->|"persists todos"| node_mongodb
node_todo_routes -->|"renders results"| node_list_view
node_list_view -->|"includes"| node_header
node_list_view -->|"includes"| node_footer
node_list_view -->|"loads interactions"| node_browser_logic
node_list_view -->|"uses styling"| node_styles
node_list_view -->|"references assets"| node_assets
node_user -->|"uses controls"| node_browser_logic
node_browser_logic -->|"submits item actions"| node_express
node_browser_logic -->|"reads and saves"| node_theme_state
node_browser_logic -->|"checks preference"| node_system_theme

click node_express "https://github.com/josh-ay/todo-app/blob/main/app.js"
click node_todo_routes "https://github.com/josh-ay/todo-app/blob/main/app.js"
click node_list_view "https://github.com/josh-ay/todo-app/blob/main/views/list.ejs"
click node_header "https://github.com/josh-ay/todo-app/blob/main/views/partials/header.ejs"
click node_footer "https://github.com/josh-ay/todo-app/blob/main/views/partials/footer.ejs"
click node_active_store "https://github.com/josh-ay/todo-app/blob/main/app.js"
click node_done_store "https://github.com/josh-ay/todo-app/blob/main/app.js"
click node_browser_logic "https://github.com/josh-ay/todo-app/blob/main/public/js/script.js"
click node_styles "https://github.com/josh-ay/todo-app/blob/main/public/styles/scss/style.scss"
click node_assets "https://github.com/josh-ay/todo-app/tree/main/public"

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_express,node_todo_routes,node_list_view,node_header,node_footer,node_user toneBlue
class node_active_store,node_done_store,node_mongodb toneAmber
class node_browser_logic,node_theme_state,node_system_theme,node_styles,node_assets toneMint
```

## Components

### Server workflow

- [Express app](https://github.com/josh-ay/todo-app/blob/main/app.js): `app.js`
- [Todo routes](https://github.com/josh-ay/todo-app/blob/main/app.js): `app.js`
- [Todo view](https://github.com/josh-ay/todo-app/blob/main/views/list.ejs): `views/list.ejs`
- [Page header](https://github.com/josh-ay/todo-app/blob/main/views/partials/header.ejs): `views/partials/header.ejs`
- [Page footer](https://github.com/josh-ay/todo-app/blob/main/views/partials/footer.ejs): `views/partials/footer.ejs`

### Todo persistence

- [Active todos](https://github.com/josh-ay/todo-app/blob/main/app.js): `app.js`
- [Completed todos](https://github.com/josh-ay/todo-app/blob/main/app.js): `app.js`
- **MongoDB**

### Browser experience

- [Browser interactions](https://github.com/josh-ay/todo-app/blob/main/public/js/script.js): `public/js/script.js`
- **Theme preference**
- **System theme**
- [Responsive styling](https://github.com/josh-ay/todo-app/blob/main/public/styles/scss/style.scss): `public/styles/scss/style.scss`
- [Public assets](https://github.com/josh-ay/todo-app/tree/main/public): `public`

### Other components

- **Todo user**

## Connections

- Todo user → Express app: requests pages
- Express app → Todo routes: dispatches routes
- Todo routes → Active todos: reads and writes
- Todo routes → Completed todos: reads and writes
- Active todos → MongoDB: persists todos
- Completed todos → MongoDB: persists todos
- Todo routes → Todo view: renders results
- Todo view → Page header: includes
- Todo view → Page footer: includes
- Todo view → Browser interactions: loads interactions
- Todo view → Responsive styling: uses styling
- Todo view → Public assets: references assets
- Todo user → Browser interactions: uses controls
- Browser interactions → Express app: submits item actions
- Browser interactions → Theme preference: reads and saves
- Browser interactions → System theme: checks preference