Production-style personal finance web app for young professionals, built with Next.js 16, React 19, and Tailwind CSS 4. It supports both real Supabase-backed flows and a local machine-only mode for easy demos.
- Email/password sign-up and sign-in
- Dashboard with balance, monthly spending, savings room, and wellness score
- Expense tracking with notes, category filters, and transaction history
- Savings goals with contribution updates and progress tracking
- Plain-language financial insights and visual charts
- Dual backend support: Supabase mode or local JSON storage mode
flowchart TD
U[User Browser] --> N[Next.js 16 App Router]
N --> L[Layouts and Pages]
N --> SA[Server Actions]
N --> PX[Proxy Layer]
N --> UI[Client UI Components]
L --> AU[Auth Layer]
SA --> AU
SA --> DATA[Finance Data Layer]
PX --> AU
AU --> MODE{Backend Mode}
DATA --> MODE
MODE -->|Supabase configured| SUPA[Supabase Auth + Postgres]
MODE -->|Local mode| LOCAL[Local JSON Store]
SUPA --> TABLES[profiles / expenses / goals]
LOCAL --> FILE[.local-data/finance.json]
sequenceDiagram
actor User
participant UI as Browser UI
participant App as Next.js App
participant Auth as Auth + Validation
participant Store as Supabase / Local Store
User->>UI: Open app
UI->>App: Request route
App->>Auth: Resolve session
Auth->>Store: Read user + finance state
Store-->>App: User/profile/data
App-->>UI: Render login or dashboard
User->>UI: Sign up / Sign in
UI->>App: Submit form
App->>Auth: Validate credentials
Auth->>Store: Create session
Store-->>App: Session + profile
App-->>UI: Redirect to dashboard
User->>UI: Add expense / create goal / update profile
UI->>App: Trigger server action
App->>Store: Persist change
Store-->>App: Updated records
App-->>UI: Revalidate and refresh dashboard
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Supabase SSR + Supabase Auth
- Recharts
- Zod
//add-expense/transactions/goals/insights/profile/login/sign-up
- Install dependencies.
npm install- Copy the example environment file.
cp .env.example .env.local-
Add your Supabase URL and anon key to
.env.local. -
Open Supabase SQL Editor and run
supabase/schema.sql. -
Start the app.
npm run dev- Visit http://localhost:3000.
If .env.local is missing, the app falls back to local machine-only mode:
- sign-up and sign-in still work
- finance data is stored in
.local-data/finance.json - Supabase remains the primary backend when credentials are configured
The SQL setup creates:
profilesexpensesgoals
It also includes:
- a new-user profile trigger
- row-level security policies
- an RPC to add expenses and update balance atomically
- an RPC to increment goal progress atomically
npm run dev
npm run lint
npm run typecheck
npm run buildNode 20 or Node 22 is recommended. The current dependency set may emit engine warnings on Node 23 even though the app still installs.
- GitHub: Kanukanti Bhuvan
- LinkedIn: Kanukantibhuvan