← Back to the portfolio
How it works

Tend

A to-do list that saves to your phone first and the cloud second, so it feels instant, works offline and still syncs across all your devices.

Tend is a plain web page that installs like an app. Your tasks and garden live in your browser, and a hosted database called Supabase keeps a copy so your laptop and phone agree. Friends can visit your garden, but a strict wall keeps your tasks private.

Open Tend

The big picture

GitHub Pages
The app filesHTML, CSS and JavaScript, served free
Your phone or laptop
The appTasks, coins, garden, Plan My Day
Local storageEvery change saved instantly
Service workerKeeps it working offline
Supabase
AccountsEmail and password sign-in
DatabaseTasks, categories, garden
Privacy rulesYou can only touch your own rows
Everyone else
Your other devicesUpdated live
FriendsSee your garden, never your tasks

The double arrow is the sync: changes flow up from your device and back down to your other devices in real time.

Step by step

  1. Install it from a link GitHub Pages

    The app is a website hosted free on GitHub Pages. On a phone you "Add to Home Screen" and it opens full screen like a normal app. A small background script (a service worker) keeps a copy of the app, so it still opens without signal.

  2. Sign in Supabase

    Supabase handles accounts: email and password, a confirmation email and password resets. I didn't have to build any of that.

  3. Tick a task, and it's saved at once Your device

    The change goes straight into your browser's storage, so there's no loading spinner. A coin flies across the screen. A ledger makes sure each task only pays once, and unticking takes the coin back.

  4. Changes are batched up to the cloud Device → Supabase

    About a second later, Tend sends only what changed. If you're offline, changes wait in a queue and go up when you reconnect.

  5. The database checks it's really you Supabase

    Every table has row-level security: a rule inside the database that only lets you read or write rows with your own user ID. Even if someone tampered with the app, they couldn't reach your tasks.

  6. Your other devices update live Supabase → devices

    Supabase Realtime pushes the change to your laptop or phone within a second. As a backup, the app also re-checks whenever it wakes up or comes back online.

  7. Spend coins, grow the garden Your device

    Buy seedlings, saplings, tools, pets and new garden sections. Water a seedling five times and it grows into a random flower. The whole garden is drawn in pixel-art SVG, and you walk around it by touch or keyboard.

  8. Friends visit Supabase → friend

    The Friends tab reads a separate public view that shows only garden details: name, layout, pets and coin count. Tasks were never included, so there's nothing private to leak. Visiting a garden is look-only.

The pieces

Plain JavaScript

About 13,000 lines, no framework, no build step to run the app.

Fewer moving parts. Opens instantly and runs on anything.

Progressive web app

An app manifest plus a service worker let it install to your home screen and run offline.

An app on every phone without going through an app store.

Supabase

Accounts, a Postgres database, privacy rules and live updates in one hosted service.

A full backend without writing or running a server.

Row-level security

Privacy is enforced by the database itself, not just by the app.

The app can't accidentally show someone else's tasks, even with a bug.

SVG pixel art

Every plant, pet and fence is drawn from tiny rectangles in code, with garden and ocean-reef themes.

Crisp at any size with no image files to download.

build.py

Stamps a new version number into the service worker on every release so installed phones fetch the update.

Otherwise phones keep running the old cached app forever.

Trade-offs I chose