# frank122080/todo-list-demo architecture

> Architecture diagram of the GitHub repository frank122080/todo-list-demo, 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/frank122080/todo-list-demo
- Repository: https://github.com/frank122080/todo-list-demo

## Overview

This Vue application presents seeded to-do items in separate unfinished and completed lists. A user can add an item, edit or complete it, and delete it; Todo.vue owns the lists and their state while AddTodo.vue and ListItem.vue provide the interaction surfaces. Priority dots and date-picker restrictions support those workflows. The supplied source shows items initialized from a bundled JSON file, not persisted to a remote or local store. The README documents no additional product capabilities.

Main entry points: [`src/view/Todo.vue`](https://github.com/frank122080/todo-list-demo/blob/master/src/view/Todo.vue) (Todo lists), [`src/components/AddTodo.vue`](https://github.com/frank122080/todo-list-demo/blob/master/src/components/AddTodo.vue) (Add item), [`src/components/ListItem.vue`](https://github.com/frank122080/todo-list-demo/blob/master/src/components/ListItem.vue) (Item actions), [`src/App.vue`](https://github.com/frank122080/todo-list-demo/blob/master/src/App.vue) (App root)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["Vue bootstrap<br/>[main.js]"]
  node_appview["App root<br/>[App.vue]"]
  node_mainview["Main layout<br/>[Main.vue]"]
end

subgraph group_workflow["Todo workflow"]
  node_todo["Todo lists<br/>[Todo.vue]"]
  node_seeddata["Seed items<br/>[todoList.json]"]
  node_addtodo["Add item<br/>[AddTodo.vue]"]
  node_listitem["Item actions<br/>[ListItem.vue]"]
end

subgraph group_support["UI support"]
  node_priority["Priority dot<br/>[IdentifyDot.vue]"]
  node_dateoptions["Date options<br/>[date.js]"]
end

node_user(("User"))

node_bootstrap -->|"mounts"| node_appview
node_appview -->|"renders"| node_mainview
node_mainview -->|"renders"| node_todo
node_todo -->|"reads"| node_seeddata
node_todo -->|"renders"| node_addtodo
node_todo -->|"renders"| node_listitem
node_user -->|"interacts"| node_addtodo
node_addtodo -->|"calls callbacks"| node_todo
node_user -->|"interacts"| node_listitem
node_listitem -->|"emits events"| node_todo
node_addtodo -->|"renders"| node_priority
node_listitem -->|"renders"| node_priority
node_addtodo -->|"uses"| node_dateoptions
node_listitem -->|"uses"| node_dateoptions

click node_bootstrap "https://github.com/frank122080/todo-list-demo/blob/master/src/main.js"
click node_appview "https://github.com/frank122080/todo-list-demo/blob/master/src/App.vue"
click node_mainview "https://github.com/frank122080/todo-list-demo/blob/master/src/view/Main.vue"
click node_todo "https://github.com/frank122080/todo-list-demo/blob/master/src/view/Todo.vue"
click node_seeddata "https://github.com/frank122080/todo-list-demo/blob/master/src/assets/data/todoList.json"
click node_addtodo "https://github.com/frank122080/todo-list-demo/blob/master/src/components/AddTodo.vue"
click node_listitem "https://github.com/frank122080/todo-list-demo/blob/master/src/components/ListItem.vue"
click node_priority "https://github.com/frank122080/todo-list-demo/blob/master/src/components/item/IdentifyDot.vue"
click node_dateoptions "https://github.com/frank122080/todo-list-demo/blob/master/src/util/date.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_bootstrap,node_appview,node_mainview,node_user toneBlue
class node_todo,node_seeddata,node_addtodo,node_listitem toneAmber
class node_priority,node_dateoptions toneMint
```

## Components

### Application shell

- [Vue bootstrap](https://github.com/frank122080/todo-list-demo/blob/master/src/main.js): `src/main.js`
- [App root](https://github.com/frank122080/todo-list-demo/blob/master/src/App.vue): `src/App.vue`
- [Main layout](https://github.com/frank122080/todo-list-demo/blob/master/src/view/Main.vue): `src/view/Main.vue`

### Todo workflow

- [Todo lists](https://github.com/frank122080/todo-list-demo/blob/master/src/view/Todo.vue): `src/view/Todo.vue`
- [Seed items](https://github.com/frank122080/todo-list-demo/blob/master/src/assets/data/todoList.json): `src/assets/data/todoList.json`
- [Add item](https://github.com/frank122080/todo-list-demo/blob/master/src/components/AddTodo.vue): `src/components/AddTodo.vue`
- [Item actions](https://github.com/frank122080/todo-list-demo/blob/master/src/components/ListItem.vue): `src/components/ListItem.vue`

### UI support

- [Priority dot](https://github.com/frank122080/todo-list-demo/blob/master/src/components/item/IdentifyDot.vue): `src/components/item/IdentifyDot.vue`
- [Date options](https://github.com/frank122080/todo-list-demo/blob/master/src/util/date.js): `src/util/date.js`

### Other components

- **User**

## Connections

- Vue bootstrap → App root: mounts
- App root → Main layout: renders
- Main layout → Todo lists: renders
- Todo lists → Seed items: reads
- Todo lists → Add item: renders
- Todo lists → Item actions: renders
- User → Add item: interacts
- Add item → Todo lists: calls callbacks
- User → Item actions: interacts
- Item actions → Todo lists: emits events
- Add item → Priority dot: renders
- Item actions → Priority dot: renders
- Add item → Date options: uses
- Item actions → Date options: uses