Tasks — a synced to-do PWA

A clean, installable to-do app you can add to your iPhone Home Screen. It runs as a Progressive Web App (PWA) — no App Store, no Xcode, no Mac required. Your tasks sync across every device you sign in on.

Features

• ✅ Add, check off, edit, and delete tasks
• 📅 Due dates with friendly labels ("Today", "Tomorrow") and overdue highlighting
• 🗂️ Multiple lists/categories (Work, Home, Shopping…)
• 🚩 Priorities (low / medium / high) with color dots
• ↕️ Sort by Smart / Due date / Priority; show or hide completed
• 🔄 Real-time sync across devices via your account
• 🔔 Optional due-date reminders (notifications while the app is open)
• 📱 Installable to the Home Screen, works offline for the UI

Stack: React + Vite + TypeScript, Supabase (Postgres + Auth + Realtime), vite-plugin-pwa. All on free tiers.

---

1. Set up the backend (Supabase) — ~5 minutes

1. Go to https://supabase.com, sign up, and create a new project (pick any name/password; the free tier is fine).
2. Open the SQL Editor (left sidebar) → New query.
3. Open supabase/schema.sql from this project, copy all of it, paste into the editor, and click Run. This creates the lists and tasks tables, security rules, and live-sync.
4. Go to Project Settings → API and copy two values:
   • Project URL
   • anon public key

Optional: skip email confirmation (recommended for personal use)

By default Supabase emails a confirmation link on sign-up. To just sign in immediately: Authentication → Sign In / Providers → Email and turn "Confirm email" off.

---

2. Run it locally

npm install
cp .env.example .env      # on Windows PowerShell: copy .env.example .env

Open .env and paste your two values:

VITE_SUPABASE_URL=https://YOUR-PROJECT.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key

Then start it:

npm run dev

Visit the printed URL (e.g. http://localhost:5173), create an account, and add a few tasks. Open the same URL on another device/browser, sign in, and watch them sync.

Tip: npm run dev also prints a Network: URL (your computer's LAN IP). You can open that on your iPhone over the same Wi-Fi to test before deploying.

---

3. Put it on your iPhone (deploy + install)

To use it anywhere — not just at home — deploy the static site for free. The easiest is Vercel:

Deploy with Vercel

1. Push this folder to a GitHub repo (or use the Vercel CLI).
2. Go to https://vercel.com, Add New → Project, import the repo.
3. Framework preset: Vite (auto-detected). Build command npm run build, output dist — all default.
4. Under Environment Variables, add the same two keys from your .env:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
5. Deploy. You'll get a URL like https://your-app.vercel.app.

Netlify, Cloudflare Pages, or GitHub Pages work too — any static host. Just remember to set the two environment variables there.

Add to your iPhone Home Screen

1. Open the deployed URL in Safari on your iPhone (Safari specifically — Chrome on iOS can't install PWAs).
2. Tap the Share button (the square with an up-arrow).
3. Scroll down and tap Add to Home Screen → Add.
4. You now have a Tasks icon. Launch it — it opens full-screen, no Safari chrome, just like a native app.
5. Sign in with the account you created. Done.

---

About reminders / notifications

Tapping the 🔔 in the app asks for notification permission. When granted, the app alerts you when a task's due time passes while the app is open.

True background push (a buzz when the app is closed) is possible on iOS 16.4+ for installed PWAs but requires a push server with VAPID keys — intentionally left out to keep this dependency-free. The due-date highlighting + in-app reminders cover the common case. If you want full background push later, that's a clean add-on.

---

Project structure

index.html                 app shell + iOS meta tags
vite.config.ts             Vite + PWA manifest config
supabase/schema.sql        database tables, security rules, realtime
scripts/generate-icons.mjs regenerates the PNG app icons
public/                    icons + favicon
src/
  App.tsx                  main screen: lists, tasks, sorting, sync
  supabase.ts              Supabase client + config check
  types.ts                 Task / List types
  components/
    Auth.tsx               sign in / sign up
    SetupScreen.tsx        shown until you add your keys
    TaskRow.tsx            a single task line
    TaskEditor.tsx         edit due date / priority / notes / list
  lib/
    date.ts                due-date formatting helpers
    notifications.ts       in-app reminder logic

Common commands

npm run dev       # local dev server (with hot reload)
npm run build     # production build into dist/
npm run preview   # serve the production build locally
node scripts/generate-icons.mjs   # regenerate app icons