Product summary

FinFlow is a SaaS personal finance manager that helps users track salary, allocate savings, manage bills and subscriptions, budget by category, and get AI-driven insights — all in a polished, mobile-first interface inspired by Monarch Money and Revolut.

Target users

Individuals

Deployment

CF Pages

Auth

Supabase

Core feature set

Dashboard

Monthly salary, income, expenses, savings, emergency fund, budget progress, upcoming bills, recent transactions with charts.

Salary & income

Manual entry or payslip upload. AI/OCR extracts employer, gross/net, tax, deductions, pay date — user confirms before saving.

Emergency fund

Auto-allocates 5% of salary monthly. Running balance, goal tracking, contribution history, editable percentage.

Savings goals

Auto-allocates 20% of salary. Multiple goals with name, target amount, target date, progress bars, history.

Bills & rent

Manual or uploaded. AI extracts company, amount, due date, billing period. Supports rent, utilities, insurance, custom.

Subscriptions

Popular presets (Netflix, Spotify, etc.) plus custom. Billing frequency, reminders, monthly spend total.

Budgets

Remaining balance after allocations distributed into categories. Percentage or fixed amount. Fully customisable.

Expenses

Manual or receipt upload. AI extracts merchant, date, total, suggests category. User reviews before saving.

AI insights

Spending trends, overspending alerts, savings forecasts, subscription suggestions, end-of-month predictions.

Reports

Monthly, yearly, budget, savings reports. Export to PDF, Excel, or CSV.

Allocation waterfall

Every month, salary flows through a fixed priority order before reaching discretionary budgets.

💰 Salary

→

🛡 Emergency 5%

→

🐷 Savings 20%

→

📄 Bills

→

🔄 Subscriptions

→

📊 Budget categories

End-of-month leftover

Remaining balance

→

60% → Savings

+

40% → Emergency

User-configurable percentages in settings.

Recommended tech stack

Cloudflare Pages hosts the Next.js frontend as a static export. API routes run as Cloudflare Workers (Edge Runtime). No Node.js server needed.

Layer	Choice	Reason
Framework	Next.js 15	App Router, RSC, Edge Runtime — compatible with CF Pages
Language	TypeScript	Type safety, better DX
Styling	Tailwind CSS v4	Utility-first, small bundle
Database	PostgreSQL via Supabase	Row-level security, realtime, auth built-in
ORM	Drizzle ORM	Edge-compatible (Prisma isn't for CF Workers)
Auth	Supabase Auth	SSO, magic link, email verify, RLS integration
File storage	Supabase Storage	Payslips, receipts, bill docs
OCR / AI	Anthropic claude-3-5-haiku	Vision + JSON extraction for docs & receipts
AI insights	Anthropic claude-sonnet	Spending analysis, forecasts
Charts	Recharts	React-native, composable, responsive
PDF export	@react-pdf/renderer	Runs on edge, typed React components
Excel/CSV	xlsx (SheetJS)	Lightweight, browser + edge support
Email	Resend	Simple API, great DX, CF-compatible
Hosting	Cloudflare Pages	Global CDN, free tier, Workers integration
CI/CD	GitHub Actions → CF Pages	Auto-deploy on push
Monitoring	Sentry + CF Analytics	Error tracking + edge analytics

Cloudflare Pages config

next.config.ts

Set output: 'export' for static export + @cloudflare/next-on-pages adapter for API routes as Workers. Use edge runtime on all API routes. Database connection via Supabase REST API (not direct pg connection — Workers don't support TCP).

Folder structure

finflow/
├── app/
│   ├── (auth)/            # login, signup, forgot-pw
│   ├── (app)/             # authenticated shell
│   │   ├── dashboard/
│   │   ├── salary/
│   │   ├── emergency-fund/
│   │   ├── savings/
│   │   ├── bills/
│   │   ├── subscriptions/
│   │   ├── budgets/
│   │   ├── expenses/
│   │   ├── analytics/
│   │   ├── insights/
│   │   ├── reports/
│   │   └── settings/
│   └── api/               # edge API routes
│       ├── ai/
│       ├── ocr/
│       └── export/
├── components/
│   ├── ui/                # design system
│   ├── charts/
│   ├── forms/
│   └── layout/
├── lib/
│   ├── db/                # drizzle schema + queries
│   ├── supabase/
│   ├── ai/                # anthropic client
│   └── utils/
├── types/
└── hooks/

Database schema

PostgreSQL via Supabase. All tables include created_at, updated_at. Row-level security enabled on every table keyed on user_id.

users

Column	Type	Notes
id	uuid PK	Supabase auth.users reference
email	text unique
full_name	text
avatar_url	text
currency	text	default 'USD'
timezone	text	default 'UTC'
budget_start_day	int	1–28, default 1
emergency_pct	numeric	default 5.00
savings_pct	numeric	default 20.00
leftover_savings_pct	numeric	default 60.00
plan	text	'free' \| 'pro'

salary_entries

Column	Type	Notes
id	uuid PK
user_id	uuid FK	→ users
pay_date	date
gross_pay	numeric
net_pay	numeric
tax	numeric
deductions	numeric
bonus	numeric	default 0
overtime	numeric	default 0
employer	text
source	text	'manual' \| 'payslip'
document_url	text	Supabase Storage path
ai_extracted	jsonb	raw OCR output

savings_goals

Column	Type	Notes
id	uuid PK
user_id	uuid FK
name	text
target_amount	numeric
target_date	date	nullable
current_balance	numeric	default 0
icon	text	emoji or icon name
color	text	hex
is_default	bool	receives auto-allocation

bills

Column	Type	Notes
id	uuid PK
user_id	uuid FK
name	text	e.g. "Electricity"
company	text
amount	numeric
due_day	int	day of month
category	text	'rent' \| 'utility' \| 'insurance' \| 'custom'
is_active	bool	default true
document_url	text	uploaded bill
reminder_days	int	days before due

subscriptions

Column	Type	Notes
id	uuid PK
user_id	uuid FK
name	text
amount	numeric
billing_day	int	day of month
frequency	text	'monthly' \| 'yearly' \| 'weekly'
logo_url	text	preset logo or custom
color	text
reminder_enabled	bool	default true
is_active	bool	default true

budget_categories

Column	Type	Notes
id	uuid PK
user_id	uuid FK
name	text
icon	text
color	text
allocation_type	text	'percentage' \| 'fixed'
allocation_value	numeric
monthly_limit	numeric	computed or manual
period_year	int
period_month	int

expenses

Column	Type	Notes
id	uuid PK
user_id	uuid FK
amount	numeric
category_id	uuid FK	→ budget_categories
merchant	text
date	date
notes	text	nullable
payment_method	text	'card' \| 'cash' \| 'transfer'
receipt_url	text	Supabase Storage
ai_extracted	jsonb	raw OCR output

Additional tables

emergency_fund

user_id, balance, goal_amount, monthly contributions jsonb history.

savings_contributions

id, user_id, goal_id, amount, date, type ('auto' | 'manual' | 'leftover').

notifications

id, user_id, type, title, body, read, scheduled_at, sent_at.

ai_insights

id, user_id, period_month, period_year, insights jsonb, generated_at.

API design

All routes live under /api/v1/. Edge Runtime on Cloudflare Workers. Auth via Supabase JWT in Authorization: Bearer header. RLS enforces user isolation at DB level.

Authentication

POST

/api/v1/auth/signup

Create account, send email verification

POST

/api/v1/auth/login

Email + password login → JWT

POST

/api/v1/auth/forgot-password

Send reset email via Resend

Salary

GET

/api/v1/salary

List salary entries, paginated

POST

/api/v1/salary

Create manual salary entry

POST

/api/v1/salary/upload

Upload payslip → AI extraction → returns extracted data for confirmation

POST

/api/v1/salary/confirm

Confirm AI-extracted data and save

Expenses

GET

/api/v1/expenses

List with filters: month, category, date range

POST

/api/v1/expenses

Create manual expense

POST

/api/v1/expenses/upload-receipt

Upload receipt → AI extraction

PUT

/api/v1/expenses/:id

Update expense

DEL

/api/v1/expenses/:id

Delete expense

Bills & subscriptions

GET

/api/v1/bills

List user bills

POST

/api/v1/bills

Create or upload bill

GET

/api/v1/subscriptions

List subscriptions with monthly total

POST

/api/v1/subscriptions

Add subscription (preset or custom)

Budgets & analytics

GET

/api/v1/budgets/:year/:month

Budget allocation for period

GET

/api/v1/analytics/spending

Spending by category, comparison, trends

GET

/api/v1/analytics/cashflow

Monthly income vs expense chart data

GET

/api/v1/analytics/savings-growth

Savings and emergency fund over time

AI

POST

/api/v1/ai/insights

Generate monthly AI insights (claude-sonnet-4-6)

POST

/api/v1/ai/ocr

Extract structured data from uploaded document

GET

/api/v1/ai/insights/:year/:month

Fetch cached insights for period

Reports & export

GET

/api/v1/reports/monthly/:year/:month

Monthly report data

POST

/api/v1/reports/export

Generate PDF/Excel/CSV export. Body: {type, period, format}

OCR prompt pattern

POST to claude-haiku vision
System: "Extract structured JSON from this document."
User: [image/pdf] + "Return only valid JSON: {employer, gross_pay, net_pay, tax, deductions, pay_date}"
Validate schema → return to frontend for user confirmation → save on confirm.

All pages

Auth pages

Sign up/signup

Log in/login

Forgot password/forgot-password

Reset password/reset-password

Verify email/verify-email

Onboarding/onboarding

Core app pages

Dashboard/dashboard

Salary & income/salary

Emergency fund/emergency-fund

Savings goals/savings

Savings goal detail/savings/:id

Bills/bills

Subscriptions/subscriptions

Budgets/budgets

Expenses/expenses

Expense detail/expenses/:id

Analytics/analytics

AI insights/insights

Reports/reports

Notifications/notifications

Settings/settings

Profile/settings/profile

Upload + confirm flow pages

Upload payslip/salary/upload

Confirm payslip data/salary/confirm

Upload bill/bills/upload

Confirm bill data/bills/confirm

Upload receipt/expenses/upload

Confirm receipt data/expenses/confirm

Key UI components

Stat cards

Label, value, change indicator, sparkline. Used in dashboard grid.

Budget progress bar

Category, spent/limit, % fill, color. Changes to warning/danger color near limit.

Transaction row

Merchant icon, name, category tag, amount (red if expense), date.

Upcoming bill card

Company logo, name, amount, days until due, urgency indicator.

AI extraction review

Side-by-side document preview and extracted fields. Edit before confirming.

Savings goal card

Goal name, icon, progress bar, % complete, target date countdown.

Color palette

A cool-toned financial palette — navy primary for trust, teal for success/savings, amber for warnings, rose for spending alerts. Light and dark mode support via CSS variables.

Navy

#1B3A5C

Blue

#2563EB

Teal

#0D9488

Green

#16A34A

Amber

#D97706

Rose

#E11D48

Surface

#F8FAFC

Dark bg

#0F172A

Semantic color usage

Purpose	Light	Dark
Income / positive	#16A34A (green)	#4ADE80
Expense / negative	#E11D48 (rose)	#FB7185
Savings	#0D9488 (teal)	#2DD4BF
Emergency fund	#D97706 (amber)	#FCD34D
Budget warning (80%+)	#F59E0B	#FDE68A
Budget danger (100%+)	#E11D48	#FB7185
Primary action	#2563EB (blue)	#60A5FA

Typography

Role	Family	Weight	Size
Display / hero	Inter	700	32–48px
Heading H1	Inter	600	24px
Heading H2	Inter	600	18px
Heading H3	Inter	500	15px
Body	Inter	400	14px / 1.6
Caption / label	Inter	400	12px
Numbers (financial)	Inter Tabular	500	context
Mono / code	JetBrains Mono	400	12px

Use font-variant-numeric: tabular-nums on all financial values to prevent layout shifts.

Motion & animation

Page transitions: 200ms fade + 4px vertical slide (Framer Motion)
Progress bars: 600ms ease-out fill on mount
Number counters: 800ms easeOut on dashboard load
Chart draw: 500ms sequential stroke animation
Toasts: 200ms slide-in from bottom-right
Modals: 150ms scale (0.96 → 1) + fade

All animations wrapped in prefers-reduced-motion media query.

Responsive breakpoints

Name	Width	Layout
Mobile	< 640px	Single column, bottom nav
Tablet	640–1024px	Collapsible sidebar + 2-col grid
Desktop	> 1024px	Fixed sidebar + 3–4 col dashboard

Development roadmap

Milestone 1 · Weeks 1–3

Foundation

Project setup: Next.js 15 + Cloudflare Pages adapter + Tailwind + Drizzle
Supabase project, schema migration, RLS policies
Auth flow: signup, login, email verification, forgot password
Layout: sidebar navigation, responsive shell, dark/light mode toggle
Design system: component library (Button, Card, Input, Badge, Modal)
CI/CD: GitHub Actions → Cloudflare Pages auto-deploy

Milestone 2 · Weeks 4–7

Core finance features

Salary: manual entry + payslip upload + AI OCR extraction + confirm flow
Emergency fund: auto-allocation, balance tracking, history
Savings goals: multiple goals, contributions, progress bars
Bills: manual + upload + AI extraction + due date reminders
Subscriptions: preset library + custom + billing frequency
Budget categories: allocation waterfall, percentage/fixed amounts
Expenses: manual + receipt upload + AI categorisation
Dashboard: stat cards, budget progress, upcoming bills widget

Milestone 3 · Weeks 8–10

Analytics, AI & reports

Analytics page: spending by category, monthly comparison, cashflow charts
Savings growth & emergency fund growth charts
AI insights: claude-sonnet integration, monthly insight generation
End-of-month leftover auto-allocation job (Cloudflare Cron Worker)
Reports: monthly, yearly, budget — PDF / Excel / CSV export
Notifications: email + in-app for bills, budgets, milestones (Resend)

Milestone 4 · Weeks 11–13

Polish, subscriptions & launch

SaaS subscription: Stripe integration, free/pro plan gating
Settings: currency, timezone, percentages, notification preferences
Onboarding wizard: first-run salary, goals, bills setup
Mobile PWA optimisation: install prompt, offline support
Performance: bundle analysis, image optimisation, Core Web Vitals
Security audit, penetration test, OWASP checklist
Documentation, launch checklist, soft launch

Future features

Bank connection

Plaid or Teller API for automatic transaction import. Auto-categorise with AI.

Multi-currency

Track accounts in different currencies with live exchange rates.

Shared household

Invite partner/roommate. Split bills, shared budget view.

Investment tracking

Portfolio value, returns, net worth dashboard including investments.

Mobile app

React Native or Expo app for iOS/Android with camera receipt capture.

Tax preparation

Annual tax summary, deduction tracking, export for accountant.

Security recommendations

Financial data is sensitive. Implement all items below before launch.

Authentication & authorisation

Supabase RLS: every table has a policy requiring auth.uid() = user_id
Email verification required before accessing the app
Rate limit auth endpoints: 5 attempts / 15 min via Cloudflare WAF rules
TOTP two-factor authentication (Supabase built-in)
Session expiry: 7-day JWT + refresh token rotation
Secure, HttpOnly, SameSite=Strict cookies for session

Data protection

All data encrypted at rest in Supabase (AES-256)
HTTPS enforced via Cloudflare (TLS 1.3)
Uploaded documents stored in private Supabase Storage buckets — signed URLs with 1-hour expiry
PII fields (salary amounts, employer names) never logged
AI OCR calls: documents sent to Anthropic API over HTTPS, not stored by Anthropic with zero data retention option

API security

All API routes validate JWT before any DB access
Input validation via Zod on every endpoint
Content Security Policy headers via _headers file on CF Pages
Rate limiting on AI endpoints: 10 OCR calls / hour / user
CORS: restrict to own domain only
No API keys exposed in frontend — all AI calls go through edge routes

Scalability recommendations

Cloudflare Pages + Supabase scales horizontally without configuration.

Supabase connection pooling via PgBouncer (built-in) — use pooled URL in Workers
Database indexes: expenses(user_id, date), bills(user_id, due_day), salary_entries(user_id, pay_date)
Analytics queries: materialised views for monthly summaries refreshed nightly
AI insights: generated once per month, cached in ai_insights table — not per-request
OCR: queue uploads with Cloudflare Queues to avoid blocking UX
CDN: all static assets served from Cloudflare edge — zero origin load
Supabase free tier: 50K monthly active users — upgrade to Pro at launch
Multi-region: Supabase Pro supports read replicas for global latency