Deployed on https://budget-app-ashen.vercel.app/
RWY is a bilingual personal budgeting app built with React, Vite, Tailwind, and Supabase. The current app covers authentication, onboarding, transaction tracking, monthly budget planning, CSV export, and an assisted transaction import flow with a premium-style product story.
- Supabase email auth with protected routes and automatic profile bootstrapping
- Three-step onboarding for name, monthly budget, and default category allocation
- Dashboard with monthly income, expenses, remaining budget, recent transactions, spending chart, and budget bucket progress
- Transaction management with create, edit, delete, search, type filtering, and month filtering
- Import workspace for transaction files with review-before-save editing
- Monthly budget editor with category allocation sliders/inputs and automatic balancing into
Other - Settings page with profile editing, language switching, CSV export, plan teaser, and sign out
- English and French localization, persisted through profile data and local storage
- Responsive desktop sidebar and mobile bottom navigation
The app includes a transaction import workspace at /transactions/import.
- Exact CSV and JSON files can be imported directly when they use canonical transaction fields
- Irregular CSV/JSON files, XLSX files, PDFs, and images fall back to Gemini-assisted extraction
- Every imported row is reviewed in-app before saving
- Users can correct merchant, amount, type, category, date, time, and notes before import
- Confidence badges and model warnings help highlight rows that need attention
Direct import works best when your file includes fields such as:
typeamountmerchantcategory,categoryName, orcategoryIdtransactionDateordate- Optional
transactionTimeortime - Optional
note
For product messaging, the import experience should be treated as a premium feature.
- Gemini-assisted transaction import is the premium feature story in the current README
- The Settings page already includes a premium teaser card
- The import UI also includes a disabled Plaid teaser for future banking integrations
Important implementation note:
- There is no billing or entitlement enforcement yet
- Plaid sync is not implemented yet
- Import is available in the current build, but the README positions it as premium
/login/onboarding/dashboard/transactions/transactions/import/transactions/new/transactions/:id/edit/budgets/settings
- React 19
- Vite 8
- TypeScript
- React Router 7
- TanStack Query 5
- Tailwind CSS
- Radix UI primitives for selected controls
- Supabase Auth + Postgres
- react-hook-form + zod
- Recharts
- i18next + react-i18next
- sonner
- lucide-react
- Vitest + Testing Library
- Gemini via the Google Generative Language API for assisted imports
Create a .env file in the project root. You can start from .env.example and add the missing values.
Required:
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=These two values are expected to be public in a browser app. They are not secrets.
VITE_SUPABASE_URLidentifies your Supabase projectVITE_SUPABASE_ANON_KEYis the public client key
Important:
- Do not put your
service_rolekey in the frontend - Keep row-level security enabled and policies correct, because the anon key is public by design
Optional, for local Gemini-assisted import development with the Edge Function:
GEMINI_API_KEY=
GEMINI_MODEL=If you are using a remote Supabase project for Gemini imports, you can remove GEMINI_API_KEY and GEMINI_MODEL from the app .env.
These values should be stored as Supabase Edge Function secrets in production, not exposed as browser env vars.
npm install
npm run devUseful scripts:
npm run build
npm run lint
npm testThe Vite dev server usually runs at http://localhost:5173.
- Create a Supabase project.
- Add
VITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEYto.env. - In Supabase Auth, enable the Email provider.
- For quick local testing, optionally disable email confirmation.
- Run
supabase/schema.sqlin the SQL editor. - Set Gemini secrets and deploy the Edge Function used by imports:
supabase secrets set GEMINI_API_KEY=your-key GEMINI_MODEL=your-model
supabase functions deploy extract-transactionsIf you are working directly against a remote Supabase project, those secrets and the function deployment happen in Supabase itself. Keeping the files in this repo does not automatically create the function remotely.
The schema sets up:
profilescategoriestransactionsbudgets- updated-at triggers
- row-level security policies
- an auth trigger that creates a profile record for new users
- seeded default income and expense categories
- Currency currently defaults to
CAD - Monthly budgets support both an overall amount and category-specific allocations
- Profile records store locale, monthly budget, budget allocation preferences, and onboarding completion
- Transactions are owned per user and protected by RLS
The project includes tests around key hooks and budget logic, including:
- auth state
- transaction queries
- transaction mutations
- budget mutations
- allocation and budget bucket utilities
Run the full suite with:
npm testRecommended setup:
- Vercel for the Vite frontend
- Supabase for auth, database, and the
extract-transactionsEdge Function
Deployment checklist:
- In Vercel, set only
VITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEY. - Deploy the frontend from this repo.
vercel.jsonincludes the SPA rewrite needed for React Router. - In Supabase, set Gemini secrets and deploy the Edge Function:
supabase secrets set GEMINI_API_KEY=your-key GEMINI_MODEL=your-model
supabase functions deploy extract-transactions- In Supabase Auth, add your Vercel production URL and preview URL patterns to the allowed redirect URLs.
Notes:
- Your Vercel deploy branch does not need to be
main - Different deploy branches can still point to the same Supabase project if they share the same public env vars
- Use a separate Supabase project if you want true staging isolation
- No billing, subscriptions, or entitlement checks yet
- No live bank sync yet; Plaid is only a teaser in the UI
- Import still depends on human review before save, especially on Gemini-assisted parses
- Currency support is still centered on CAD
- CSV export currently focuses on transaction data
- No offline sync or background service worker support is enabled
- Real premium gating and billing
- Plaid-based banking integrations
- More export formats and reporting
- Stronger import templates for bank-specific CSVs
- Additional analytics and automation
- Expanded currency support