A calm, pastel, month-by-month plan for paying off debt while growing savings. Built with React + Vite + Tailwind, and set up as an installable PWA so it can live on a phone home screen and open full-screen like a native app.
You need Node.js (LTS version) installed. Then, inside this folder:
npm install # one time — downloads dependencies
npm run dev # start the local dev serverOpen the URL it prints (usually http://localhost:5173). Edits save live.
npm run build # build the production site into the dist/ folder
npm run preview # preview that production build locallyThe "Add to Home Screen" / install behavior only works on the built site (the deployed site, or
npm run preview) — not innpm run dev. That's normal.
Run these once, inside this folder:
git init
git add .
git commit -m "Initial commit: Bloom"Then create a new empty repository on github.com (don't add a README or .gitignore — this project already has them). Copy its URL and run:
git remote add origin https://github.com/YOUR-USERNAME/bloom-app.git
git branch -M main
git push -u origin main- Go to vercel.com and sign in with GitHub (the free "Hobby" plan is plenty).
- Click Add New → Project and import your
bloom-apprepo. - Vercel auto-detects Vite — build command
npm run build, outputdist. Leave the defaults and click Deploy. - In about a minute you get a live URL like
https://bloom-app.vercel.app.
That's it. From now on, every push to GitHub auto-deploys the new version.
This is the rhythm to remember — three commands, in order:
git add .
git commit -m "what you changed"
git pushOr as a single line you can reuse:
git add . && git commit -m "what you changed" && git pushVercel picks it up and updates the live site automatically.
Open the live Vercel URL, then:
- iPhone (Safari): tap the Share button → Add to Home Screen.
- Android (Chrome): tap the ⋮ menu → Install app (or accept the install prompt).
- Desktop (Chrome/Edge): click the install icon in the address bar.
It opens full-screen with the Bloom heart icon — no browser bars.
The app saves each person's income, debts, expenses, and plan to a free Supabase database, behind email/password sign-in. Do this once:
-
Create a project. Go to supabase.com, sign up (free, no card), and create a new project. Pick any database password and region. Wait ~2 minutes for it to spin up. (Free projects pause after 7 days of no use; if that happens, one click in the dashboard wakes it — your data is safe.)
-
Turn off email confirmation (so sign-up logs your friend in immediately, no inbox step): Authentication → Sign In / Providers → Email, and switch off Confirm email. Save.
-
Create the tables. Open SQL Editor → New query, paste the entire contents of
supabase-schema.sql(in this folder), and click Run. You should see "Success." -
Get your two keys. Go to Project Settings → API and copy the Project URL and the anon / public key. (The anon key is meant to live in the browser — row-level security is what actually protects the data.)
-
Tell the app about them, in two places:
- Locally: copy
.env.exampleto a new file named.envand paste your two values in. - On Vercel: Project → Settings → Environment Variables, add
VITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEYwith the same values, then redeploy (Deployments → ⋯ → Redeploy).
- Locally: copy
-
Run it:
npm installthennpm run dev. Create an account on the welcome screen and you're in. Everything you enter now saves automatically and is there when you come back — on any device.
That's the whole backend. No server to host, nothing to keep running, $0.