PraxisAI
Sign in
Mobile-first PWAmedium

Offline-first habit tracker (PWA)

A mobile-first installable PWA for daily habits with streaks and history that works with no network.

Suggested effort
~4h focused work
Window
24 hours
Starts from
An empty repo
Stack
Your choice
Sign in to start this build →

Opens in a new tab. The clock starts when you press Start inside the environment, not before, and your workspace is kept while you step away.

Time window 24 hours. Suggested effort about 4 hours.

Context

People want to tick off daily habits on their phone, including on the Underground with no signal. Build a mobile-first progressive web app that works fully offline and is installable to the home screen.

Core requirements

  • Create, rename, archive and reorder habits (each with a name, an emoji or colour, and a target: daily or N times a week).
  • Today view: one tap to mark a habit done (and undo).
  • Streaks: current and best streak per habit, computed correctly across week boundaries for "N times a week" habits.
  • History: a calendar heat-map per habit for the last 12 weeks.
  • Works offline: a service worker caches the app shell, and all data lives in IndexedDB (or localStorage with a reason).
  • Installable: a valid web app manifest with icons.

Acceptance criteria

  • With the network disabled in DevTools, a reload still loads the app and every feature works.
  • Designed for a 375px-wide screen first, with touch targets of at least 44px; still looks right on desktop.
  • Streak and date logic is a pure module with unit tests, including the user's time zone and a daylight-saving change.
  • Export and import of all data as JSON, so a user can move phones.
  • A Lighthouse PWA or best-practices run is described in the README (scores or the issues you chose not to fix).

Stretch goals (optional)

  • Reminders through the Notifications API where supported.
  • Optional sync to a tiny server with conflict resolution (last-write-wins per day, explained).
  • Dark mode that follows the system.

Constraints

  • Any front-end stack. Suggested: Vite with React, Svelte or plain TypeScript.
  • No back end is required for the core.

Deliverables (every project)

  • Source code committed in this repository (the grader diffs against the first commit).
  • README.md that replaces the stub, with: how to install, run and test it (copy-pasteable commands); the decisions and trade-offs you made; what you would do next with more time; and a short note on how you used the AI agent (what you delegated, what you checked or rewrote).
  • Automated tests that run with a single command (npm test, pytest, go test ./... or cargo test).
  • No secrets in the repository. Anything configurable reads from environment variables with safe defaults.

Ground rules

  • The 24-hour clock is a window, not a workload. Stop at roughly the suggested effort, then write down what you would do next. A small, finished, tested core beats a large unfinished one.
  • Use the AI agent as much or as little as you like: every prompt is recorded and the report shows how it was used. You are judged on the result and on whether you understood and verified what the agent produced.
  • The work is yours. PraxisAI uses it only to produce your assessment report.
Offline-first habit tracker (PWA): a 24-hour take-home project | PraxisAI