Habit Tracker

A mobile-first habit tracker: swipe-to-log habits, real streaks computed from actual history, and an Apple Fitness–style calendar heatmap per habit. Built with React, Vite, TypeScript, and Supabase (Postgres + Auth).

Setup

1. Database: open your Supabase project's SQL Editor and run supabase/migrations/0001_init.sql. This creates the habits and habit_completions tables with row-level security scoped to each signed-in user.
2. Env vars: copy .env.example to .env and fill in your Supabase project URL and anon key (Project Settings → API):

   VITE_SUPABASE_URL=https://your-project.supabase.co
   VITE_SUPABASE_ANON_KEY=your-anon-key
   

3. Install & run:

   npm install
   npm run dev
   

Deploying to GitHub Pages

A workflow (.github/workflows/deploy.yml) builds and deploys this repo to GitHub Pages automatically on every push to main. One-time setup:

1. Enable Pages: repo → Settings → Pages → set Source to GitHub Actions.

2. Add config: repo → Settings → Secrets and variables → Actions → Variables tab → New repository variable, and add both:

   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY

   These are added as variables, not secrets, because the Supabase anon key is designed to be public in client-side bundles — actual data access is protected by the row-level security policies in the migration, not by hiding this key.

3. Push to main (or re-run the workflow from the Actions tab) — the site will be live at https://<your-username>.github.io/habit-tracker/.

Scripts

• npm run dev — start the dev server
• npm run build — typecheck + production build to dist/
• npm run test — run the streak/calendar math unit tests
• npm run lint — lint

How it works

• Auth: Supabase email/password. Sign-up collects a name (stored as user metadata) and, depending on your project's email confirmation setting, either logs the user in immediately or shows a "check your email" screen.
• Onboarding: shown whenever a signed-in user has zero habits — fully custom habit name, icon, and daily target.
• Track tab: swipe a habit card right to log a completion, left to undo. Completed habits sort to the bottom.
• Streaks tab: per-habit and "all habits" streaks are computed from real daily completion counts (src/lib/streaks.ts), not mocked — see streaks.test.ts for the behavior under test. Tapping a habit opens a month calendar heatmap with real fill data and month navigation.
• Manage tab: edit, delete, reorder, and adjust targets for habits.