# perdolique/2026-tracker architecture

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

- Interactive diagram: https://gitdiagram.com/perdolique/2026-tracker
- Repository: https://github.com/perdolique/2026-tracker

## Overview

#### Purpose and runtime

2026 Tracker is a mobile-first, installable SPA for tracking daily-count, numeric-progress, and one-time goals. It runs as a Vue 3/Vite client and a Cloudflare Worker API backed by Cloudflare D1 (SQLite). Twitch OAuth supplies identity; public user profiles expose shared progress.

Key deployment/configuration boundaries: `vite.config.ts`, `wrangler.jsonc`, `drizzle.config.ts`.

#### Client bootstrap and navigation

The browser application starts in `src/main.ts`, mounts the root shell in `src/App.vue`, and selects page-level experiences through `src/router/index.ts`. Routed views cover home/task browsing, adding tasks, daily check-in control, and user profiles:

- `src/views/HomeView.vue`
- `src/views/ControlView.vue`
- `src/views/UserProfileView.vue`

The frontend is a SPA/PWA; `public/mockServiceWorker.js` supports API mocking in development/testing.

#### UI workflows

Reusable Vue components implement the principal task interactions: creation/editing, completion display, task detail, and the sequential daily check-in flow. `CheckInWizard` is the key orchestration UI that reviews active tasks one at a time, while task cards/forms render and modify individual records.

- `src/components/CheckInWizard.vue`
- `src/components/TaskForm.vue`
- `src/components/TaskDetailsCard.vue`

Locale state and English/Russian messages are isolated behind `src/composables/use-locale.ts` and `src/locales/index.ts`.

#### Client state and API boundary

Pinia stores are the client-side authority for authenticated-user state and task collections/actions. They call typed frontend API modules rather than accessing Worker endpoints directly. The HTTP client layer is therefore the boundary between Vue state/UI and server behavior.

- `src/stores/auth-store.ts`
- `src/stores/task-store.ts`
- `src/api/client.ts`
- `src/api/auth-api.ts`
- `src/api/task-api.ts`

Task domain types and completion semantics are centralized in `src/models/task.ts`, including the three task types and incremental completion-history representation.

#### Worker API and authentication

`worker/index.ts` is the Cloudflare Worker/Hono entry point: it hosts API routes and the Twitch OAuth flow. Authentication endpoints are separated in the entry routing, while task operations are organized in `worker/task-routes.ts`. Request payloads are validated at the Worker boundary using schemas in `worker/schemas.ts`; Worker utilities support shared HTTP/auth behavior.

- `worker/index.ts`
- `worker/task-routes.ts`
- `worker/schemas.ts`

External dependencies are Twitch OAuth credentials/secrets and Cloudflare’s Worker runtime/D1 binding.

#### Persistence and completion history

Drizzle defines the D1 relational model and query layer. Server routes invoke query functions, which enforce persistence operations for users, sessions, tasks, and individual completion records. This preserves incremental edits: adding/removing a date or progress value changes completion records rather than replacing the task’s full history.

- `worker/db/schema.ts`
- `worker/db/queries.ts`
- `worker/db/task-queries.ts`

Schema evolution is committed as generated and Wrangler-compatible migrations, applied to local or production D1:

- `drizzle/migrations/0001_colorful-wendigo.sql`
- `drizzle/migrations/0010_elite-sue-storm.sql`
- `scripts/convert-migrations.ts`

#### End-to-end control flow

A user navigates to a routed Vue view; the view/component dispatches store actions; stores call API modules; requests reach Hono in the Worker; validation and auth occur before task/query operations; Drizzle reads or mutates D1; responses update Pinia state and rerender Vue. OAuth follows the same Worker boundary, creating/using user-session persistence before the client treats the user as authenticated. Public-profile routes read user/task progress without requiring the owner’s editing session.

Main entry points: [`worker/index.ts`](https://github.com/perdolique/2026-tracker/blob/master/worker/index.ts) (Worker entry & OAuth), [`src/views/HomeView.vue`](https://github.com/perdolique/2026-tracker/blob/master/src/views/HomeView.vue) (Routed views), [`src/stores/task-store.ts`](https://github.com/perdolique/2026-tracker/blob/master/src/stores/task-store.ts) (Task store), [`worker/task-routes.ts`](https://github.com/perdolique/2026-tracker/blob/master/worker/task-routes.ts) (Task routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue PWA Client"]
  node_bootstrap["Client bootstrap<br/>Vue entry<br/>[main.ts]"]
  node_app_router["App shell &amp; router<br/>Vue navigation<br/>[App.vue]"]
  node_views["Routed views<br/>Vue pages<br/>[HomeView.vue]"]
  node_checkin["Check-in wizard<br/>Vue workflow<br/>[CheckInWizard.vue]"]
  node_task_ui["Task forms &amp; details<br/>Vue components<br/>[TaskForm.vue]"]
  node_locale["Locale state<br/>i18n composable<br/>[use-locale.ts]"]
  node_auth_store["Auth store<br/>Pinia store<br/>[auth-store.ts]"]
  node_task_store["Task store<br/>Pinia store<br/>[task-store.ts]"]
  node_api["Typed API modules<br/>HTTP client boundary<br/>[client.ts]"]
  node_task_model["Task domain model<br/>TypeScript model<br/>[task.ts]"]
end

subgraph group_worker["Worker API"]
  node_worker_entry["Worker entry &amp; OAuth<br/>Hono API<br/>[index.ts]"]
  node_task_routes["Task routes<br/>Hono routes<br/>[task-routes.ts]"]
  node_schemas["Request schemas<br/>Worker validation<br/>[schemas.ts]"]
end

subgraph group_data["D1 Persistence"]
  node_queries["Query layer<br/>Drizzle queries<br/>[queries.ts]"]
  node_task_queries["Task query operations<br/>Drizzle queries<br/>[task-queries.ts]"]
  node_schema["Relational schema<br/>Drizzle schema<br/>[schema.ts]"]
  node_d1[("Cloudflare D1<br/>SQLite database")]
  node_migrations["D1 migrations<br/>Schema evolution"]
end

node_twitch["Twitch OAuth<br/>External identity"]

node_bootstrap -->|"mounts"| node_app_router
node_app_router -->|"routes to"| node_views
node_views -->|"uses"| node_checkin
node_views -->|"uses"| node_task_ui
node_views -->|"reads auth"| node_auth_store
node_checkin -->|"dispatches"| node_task_store
node_task_ui -->|"updates"| node_task_store
node_task_store -->|"uses"| node_task_model
node_auth_store -->|"calls"| node_api
node_task_store -->|"calls"| node_api
node_api -->|"HTTP requests"| node_worker_entry
node_worker_entry -->|"OAuth exchange"| node_twitch
node_worker_entry -->|"validates"| node_schemas
node_worker_entry -->|"delegates task APIs"| node_task_routes
node_worker_entry -->|"auth and session queries"| node_queries
node_task_routes -->|"validates"| node_schemas
node_task_routes -->|"reads and mutates"| node_task_queries
node_queries -.->|"maps"| node_schema
node_task_queries -.->|"maps"| node_schema
node_schema -->|"defines tables"| node_d1
node_queries -->|"user/session access"| node_d1
node_task_queries -->|"task/completion access"| node_d1
node_migrations -->|"evolves schema"| node_d1

click node_bootstrap "https://github.com/perdolique/2026-tracker/blob/master/src/main.ts"
click node_app_router "https://github.com/perdolique/2026-tracker/blob/master/src/App.vue"
click node_views "https://github.com/perdolique/2026-tracker/blob/master/src/views/HomeView.vue"
click node_checkin "https://github.com/perdolique/2026-tracker/blob/master/src/components/CheckInWizard.vue"
click node_task_ui "https://github.com/perdolique/2026-tracker/blob/master/src/components/TaskForm.vue"
click node_locale "https://github.com/perdolique/2026-tracker/blob/master/src/composables/use-locale.ts"
click node_auth_store "https://github.com/perdolique/2026-tracker/blob/master/src/stores/auth-store.ts"
click node_task_store "https://github.com/perdolique/2026-tracker/blob/master/src/stores/task-store.ts"
click node_api "https://github.com/perdolique/2026-tracker/blob/master/src/api/client.ts"
click node_task_model "https://github.com/perdolique/2026-tracker/blob/master/src/models/task.ts"
click node_worker_entry "https://github.com/perdolique/2026-tracker/blob/master/worker/index.ts"
click node_task_routes "https://github.com/perdolique/2026-tracker/blob/master/worker/task-routes.ts"
click node_schemas "https://github.com/perdolique/2026-tracker/blob/master/worker/schemas.ts"
click node_queries "https://github.com/perdolique/2026-tracker/blob/master/worker/db/queries.ts"
click node_task_queries "https://github.com/perdolique/2026-tracker/blob/master/worker/db/task-queries.ts"
click node_schema "https://github.com/perdolique/2026-tracker/blob/master/worker/db/schema.ts"
click node_migrations "https://github.com/perdolique/2026-tracker/blob/master/drizzle/migrations/0001_colorful-wendigo.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_bootstrap,node_app_router,node_views,node_checkin,node_task_ui,node_locale,node_auth_store,node_task_store,node_api,node_task_model toneBlue
class node_worker_entry,node_task_routes,node_schemas toneAmber
class node_queries,node_task_queries,node_schema,node_d1,node_migrations toneMint
class node_twitch toneNeutral
```

## Components

### Vue PWA Client

Mobile-first Vue 3 SPA.

- [Client bootstrap](https://github.com/perdolique/2026-tracker/blob/master/src/main.ts): Vue entry · `src/main.ts`
- [App shell & router](https://github.com/perdolique/2026-tracker/blob/master/src/App.vue): Vue navigation · `src/App.vue`
- [Routed views](https://github.com/perdolique/2026-tracker/blob/master/src/views/HomeView.vue): Vue pages · Home, check-in control, and public profile experiences. · `src/views/HomeView.vue`
- [Check-in wizard](https://github.com/perdolique/2026-tracker/blob/master/src/components/CheckInWizard.vue): Vue workflow · Reviews active tasks sequentially. · `src/components/CheckInWizard.vue`
- [Task forms & details](https://github.com/perdolique/2026-tracker/blob/master/src/components/TaskForm.vue): Vue components · Creates, edits, and displays task records. · `src/components/TaskForm.vue`
- [Locale state](https://github.com/perdolique/2026-tracker/blob/master/src/composables/use-locale.ts): i18n composable · English and Russian locale state/messages. · `src/composables/use-locale.ts`
- [Auth store](https://github.com/perdolique/2026-tracker/blob/master/src/stores/auth-store.ts): Pinia store · `src/stores/auth-store.ts`
- [Task store](https://github.com/perdolique/2026-tracker/blob/master/src/stores/task-store.ts): Pinia store · Client authority for task collections and actions. · `src/stores/task-store.ts`
- [Typed API modules](https://github.com/perdolique/2026-tracker/blob/master/src/api/client.ts): HTTP client boundary · `src/api/client.ts`
- [Task domain model](https://github.com/perdolique/2026-tracker/blob/master/src/models/task.ts): TypeScript model · Defines task types and incremental completion history. · `src/models/task.ts`

### Worker API

Cloudflare Worker and Hono routes.

- [Worker entry & OAuth](https://github.com/perdolique/2026-tracker/blob/master/worker/index.ts): Hono API · Hosts API routes and Twitch OAuth flow. · `worker/index.ts`
- [Task routes](https://github.com/perdolique/2026-tracker/blob/master/worker/task-routes.ts): Hono routes · Task edits and public progress routes. · `worker/task-routes.ts`
- [Request schemas](https://github.com/perdolique/2026-tracker/blob/master/worker/schemas.ts): Worker validation · `worker/schemas.ts`

### D1 Persistence

Drizzle-managed SQLite persistence.

- [Query layer](https://github.com/perdolique/2026-tracker/blob/master/worker/db/queries.ts): Drizzle queries · Persists users, sessions, tasks, and completion records. · `worker/db/queries.ts`
- [Task query operations](https://github.com/perdolique/2026-tracker/blob/master/worker/db/task-queries.ts): Drizzle queries · Incrementally mutates completion records. · `worker/db/task-queries.ts`
- [Relational schema](https://github.com/perdolique/2026-tracker/blob/master/worker/db/schema.ts): Drizzle schema · `worker/db/schema.ts`
- **Cloudflare D1**: SQLite database
- [D1 migrations](https://github.com/perdolique/2026-tracker/blob/master/drizzle/migrations/0001_colorful-wendigo.sql): Schema evolution · Generated migrations are converted for Wrangler-compatible application. · `drizzle/migrations/0001_colorful-wendigo.sql`

### Other components

- **Twitch OAuth**: External identity · OAuth credentials and identity provider.

## Connections

- Client bootstrap → App shell & router: mounts
- App shell & router → Routed views: routes to
- Routed views → Check-in wizard: uses
- Routed views → Task forms & details: uses
- Routed views → Auth store: reads auth
- Check-in wizard → Task store: dispatches
- Task forms & details → Task store: updates
- Task store → Task domain model: uses
- Auth store → Typed API modules: calls
- Task store → Typed API modules: calls
- Typed API modules → Worker entry & OAuth: HTTP requests
- Worker entry & OAuth → Twitch OAuth: OAuth exchange
- Worker entry & OAuth → Request schemas: validates
- Worker entry & OAuth → Task routes: delegates task APIs
- Worker entry & OAuth → Query layer: auth and session queries
- Task routes → Request schemas: validates
- Task routes → Task query operations: reads and mutates
- Query layer → Relational schema: maps
- Task query operations → Relational schema: maps
- Relational schema → Cloudflare D1: defines tables
- Query layer → Cloudflare D1: user/session access
- Task query operations → Cloudflare D1: task/completion access
- D1 migrations → Cloudflare D1: evolves schema