perdolique/2026-tracker

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.