# petrofx7/todoapp architecture

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

- Interactive diagram: https://gitdiagram.com/petrofx7/todoapp
- Repository: https://github.com/petrofx7/todoapp

## Overview

This is a Vue 3 starter application organized around routing, an authentication feature, a theme feature, and reusable shared UI. The visible user path is entering the app and reaching the login route; the tree also indicates registration and authentication API modules. Sampled source confirms app/router setup and theme persistence, but not the internal wiring of the auth components or API, so those links are omitted. No README content was provided.

Main entry points: [`src/app/router/index.ts`](https://github.com/petrofx7/todoapp/blob/main/src/app/router/index.ts) (Router), [`src/app/main.ts`](https://github.com/petrofx7/todoapp/blob/main/src/app/main.ts) (App Entry), [`src/app/App.vue`](https://github.com/petrofx7/todoapp/blob/main/src/app/App.vue) (Root View), [`src/features/theme/composables/useTheme.ts`](https://github.com/petrofx7/todoapp/blob/main/src/features/theme/composables/useTheme.ts) (Theme Store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application"]
  node_entry["App Entry<br/>[main.ts]"]
  node_root["Root View<br/>[App.vue]"]
  node_router["Router<br/>[index.ts]"]
  node_auth_routes["Auth Routes<br/>[index.ts]"]
  node_login_page["Login Page<br/>[index.vue]"]
  node_not_found["Not Found<br/>[index.vue]"]
end

subgraph group_features["Product Features"]
  node_auth_feature["Auth Feature<br/>[AuthFeature.vue]"]
  node_login_form["Login Form<br/>[LoginForm.vue]"]
  node_register_form["Register Form<br/>[RegisterForm.vue]"]
  node_auth_composables["Auth Composables<br/>[index.ts]"]
  node_auth_store["Auth Store<br/>[index.ts]"]
  node_auth_api["Auth API<br/>[index.ts]"]
  node_theme_toggle["Theme Toggle<br/>[ThemeToggle.vue]"]
  node_theme_store["Theme Store<br/>[useTheme.ts]"]
  node_theme_utils["Theme Utilities<br/>[createThemes.ts]"]
end

subgraph group_shared["Shared UI"]
  node_shared_ui["Shared UI<br/>[index.ts]"]
  node_shared_api["HTTP Client<br/>[client.ts]"]
end

node_user(("User"))
node_api_service["API Service"]
node_browser_storage[("Local Storage")]

node_user -->|"opens app"| node_entry
node_entry -->|"mounts"| node_root
node_entry -->|"installs"| node_router
node_root -->|"renders routes"| node_router
node_router -->|"routes /"| node_login_page
node_router -->|"routes fallback"| node_not_found
node_router -->|"includes routes"| node_auth_routes
node_theme_store -->|"reads and writes"| node_browser_storage

click node_entry "https://github.com/petrofx7/todoapp/blob/main/src/app/main.ts"
click node_root "https://github.com/petrofx7/todoapp/blob/main/src/app/App.vue"
click node_router "https://github.com/petrofx7/todoapp/blob/main/src/app/router/index.ts"
click node_auth_routes "https://github.com/petrofx7/todoapp/blob/main/src/app/router/auth/index.ts"
click node_login_page "https://github.com/petrofx7/todoapp/blob/main/src/pages/Login/index.vue"
click node_not_found "https://github.com/petrofx7/todoapp/blob/main/src/pages/NotFound/index.vue"
click node_auth_feature "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/AuthFeature.vue"
click node_login_form "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/components/LoginForm.vue"
click node_register_form "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/components/RegisterForm.vue"
click node_auth_composables "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/composables/index.ts"
click node_auth_store "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/store/index.ts"
click node_auth_api "https://github.com/petrofx7/todoapp/blob/main/src/features/auth/api/index.ts"
click node_theme_toggle "https://github.com/petrofx7/todoapp/blob/main/src/features/theme/components/ThemeToggle.vue"
click node_theme_store "https://github.com/petrofx7/todoapp/blob/main/src/features/theme/composables/useTheme.ts"
click node_theme_utils "https://github.com/petrofx7/todoapp/blob/main/src/features/theme/utils/createThemes.ts"
click node_shared_ui "https://github.com/petrofx7/todoapp/blob/main/src/shared/ui/index.ts"
click node_shared_api "https://github.com/petrofx7/todoapp/blob/main/src/shared/api/client.ts"

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_entry,node_root,node_router,node_auth_routes,node_login_page,node_not_found,node_user toneBlue
class node_auth_feature,node_login_form,node_register_form,node_auth_composables,node_auth_store,node_auth_api,node_theme_toggle,node_theme_store,node_theme_utils,node_browser_storage toneAmber
class node_shared_ui,node_shared_api,node_api_service toneMint
```

## Components

### Application

- [App Entry](https://github.com/petrofx7/todoapp/blob/main/src/app/main.ts): `src/app/main.ts`
- [Root View](https://github.com/petrofx7/todoapp/blob/main/src/app/App.vue): `src/app/App.vue`
- [Router](https://github.com/petrofx7/todoapp/blob/main/src/app/router/index.ts): `src/app/router/index.ts`
- [Auth Routes](https://github.com/petrofx7/todoapp/blob/main/src/app/router/auth/index.ts): `src/app/router/auth/index.ts`
- [Login Page](https://github.com/petrofx7/todoapp/blob/main/src/pages/Login/index.vue): `src/pages/Login/index.vue`
- [Not Found](https://github.com/petrofx7/todoapp/blob/main/src/pages/NotFound/index.vue): `src/pages/NotFound/index.vue`

### Product Features

- [Auth Feature](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/AuthFeature.vue): `src/features/auth/AuthFeature.vue`
- [Login Form](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/components/LoginForm.vue): `src/features/auth/components/LoginForm.vue`
- [Register Form](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/components/RegisterForm.vue): `src/features/auth/components/RegisterForm.vue`
- [Auth Composables](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/composables/index.ts): `src/features/auth/composables/index.ts`
- [Auth Store](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/store/index.ts): `src/features/auth/store/index.ts`
- [Auth API](https://github.com/petrofx7/todoapp/blob/main/src/features/auth/api/index.ts): `src/features/auth/api/index.ts`
- [Theme Toggle](https://github.com/petrofx7/todoapp/blob/main/src/features/theme/components/ThemeToggle.vue): `src/features/theme/components/ThemeToggle.vue`
- [Theme Store](https://github.com/petrofx7/todoapp/blob/main/src/features/theme/composables/useTheme.ts): `src/features/theme/composables/useTheme.ts`
- [Theme Utilities](https://github.com/petrofx7/todoapp/blob/main/src/features/theme/utils/createThemes.ts): `src/features/theme/utils/createThemes.ts`

### Shared UI

- [Shared UI](https://github.com/petrofx7/todoapp/blob/main/src/shared/ui/index.ts): `src/shared/ui/index.ts`
- [HTTP Client](https://github.com/petrofx7/todoapp/blob/main/src/shared/api/client.ts): `src/shared/api/client.ts`

### Other components

- **User**
- **API Service**
- **Local Storage**

## Connections

- User → App Entry: opens app
- App Entry → Root View: mounts
- App Entry → Router: installs
- Root View → Router: renders routes
- Router → Login Page: routes /
- Router → Not Found: routes fallback
- Router → Auth Routes: includes routes
- Theme Store → Local Storage: reads and writes