← Showcase / 04 // FINTECH CORE
STATUS // RUNNING // DEPLOYED PERSONAL PROJECT PWA FREE TO USE

Flo — Personal
Finance, AI-First

A free personal finance PWA built from scratch — because no existing tool was free, UAE-currency-aware, and smart enough to give advice based on your actual spending. Flo tracks income, expenses, budgets, and goals, then lets you ask an AI that has already read your data before answering.

React 19TypeScriptSupabaseGoogle Gemini AIRechartsZustandVercel
https://flo-app-navy.vercel.app
Flo finance app dashboard preview
// THE PROBLEM

Every finance app was either expensive, generic, or built for the wrong currency

Living and spending in the UAE meant dealing with AED, SAR, QAR — currencies most apps either don't support or shoehorn in as an afterthought. Paid tools like YNAB or Copilot charge monthly fees just to track your own money. Free tools are ad-riddled and offer no real insight.

And every "AI" feature in existing finance apps is a glorified FAQ bot — it doesn't know what you spent last month, how close you are to your goal, or why your food budget keeps overrunning. The advice is generic because the AI has no context about the user asking.

// THE SOLUTION

Built the app that should have existed — free, context-aware, UAE-first

Flo is a free PWA that does the basics right: log income and expenses, set monthly budgets per category, track savings goals, see 6-month analytics trends. A 0–100 health score gives instant clarity — one number that reflects savings rate, budget discipline, and goal progress combined.

The AI ("Ask Flo") is different: before every response it receives the user's actual transactions, current budget status, and active goals as context. When you ask "why am I running out of money by the 20th?", Flo knows the answer because it can see the data — not because it guessed.

// ARCHITECTURE DECISIONS

Engineering choices that mattered.

01
// BACKEND

Supabase over a custom API

Authentication, PostgreSQL database, real-time subscriptions, and row-level security in one service. No separate Express/Node server to build, host, or scale. RLS policies enforce that users can only ever read their own financial data — security is handled at the database layer, not the application layer.

02
// AI DESIGN

Context injection + multi-model fallback

Every Gemini request includes the user's transaction history, budget status, and goal progress as system context before the question is answered. If the primary model (gemini-2.0-flash-lite) hits rate limits, the integration auto-falls back to gemini-1.5-flash-8b with a countdown retry — the AI never dead-ends the user.

03
// SCORING

Weighted health score over dashboards

Instead of overwhelming users with charts, a single 0–100 health score summarises financial behaviour: savings rate (40 points, targeting 20%), budget discipline (40 points, % of budgets stayed within), and goal progress (20 points). One number to care about. One number to improve.

// STACK BREAKDOWN

Technology deployed.

FRONTEND
React 19 + TypeScript + Vite

React 19's concurrent features keep the UI responsive during heavy data operations. TypeScript enforces type safety across all transaction, budget, and goal models. Vite delivers sub-second HMR in development and optimised production bundles.

BACKEND + AUTH
Supabase (PostgreSQL + RLS)

6 database tables: profiles, transactions, budgets, recurring expenses, recurring income, goals. Row-level security policies ensure zero cross-user data leakage at the database level. Real-time subscriptions sync dashboard data live across tabs and sessions.

AI ENGINE
Google Gemini (streaming)

Streaming responses via @google/genai give instant character-by-character output. Financial context (transactions, budgets, goals) is injected per-request. Multi-model fallback (gemini-2.0-flash-lite → gemini-1.5-flash-8b) with automatic retry ensures the chat never goes silent.

DATA VISUALISATION
Recharts

Line charts for 6-month savings trends, donut charts for category spending breakdowns, bar charts for income vs. expense comparisons. Lightweight, composable, and SSR-compatible — no canvas bloat.

STATE MANAGEMENT
Zustand

Global UI state — active month, dark/light theme, toast queue, AI chat history, and custom categories — managed in Zustand. No Redux boilerplate, no Context re-render waterfalls. Simple stores that subscribe to exactly what they need.

DEPLOY + PWA
Vercel + Service Worker

Deployed on Vercel with SPA rewrite rules. A service worker caches the shell for instant offline loads. PWA manifest enables "Add to Home Screen" on mobile and a standalone install on desktop — the app runs without a browser chrome.

// FEATURE SET

Six modules. One flow.

MODULE 01

Dashboard

Month-at-a-glance: income, spent, saved. Donut chart for category breakdown. Budget bars per category. Health score. Last month comparison. Recurring bills due today.

MODULE 02

Expenses

Full transaction log with sort, filter by category, and search. Add income or expense in one modal. Edit, duplicate, or delete any transaction inline.

MODULE 03

Analytics

6-month expense vs. income trend chart. Savings rate progression. Category-wise spending history. Budget discipline tracking across months.

MODULE 04

Calendar

Monthly calendar view showing transaction activity per day. Tap any date to see that day's transactions. Recurring bills and income shown in context.

MODULE 05

Ask Flo (AI)

Conversational AI with streaming responses. Context-injected with your real transactions and budgets. Answers "why am I overspending?", estimates time to savings goals, suggests cuts.

MODULE 06

Settings & Goals

Multiple savings goals with target amounts and dates. Per-category budget limits. Recurring bills and income configuration. CSV export. Dark/light theme. 8-currency support.

// OUTCOMES

What shipped.

0 fees
SUBSCRIPTION COST
8
CURRENCIES SUPPORTED
6
CORE MODULES
Live
PRODUCTION STATUS
CONTEXT-AWARE AI

Ask Flo sees your actual income, expenses, budget status, and savings goals before answering. Every response is specific to your financial reality — not generic advice from a chatbot that doesn't know your data.

UAE-FIRST DESIGN

AED is the default currency. Supports AED, SAR, QAR, INR, PKR, USD, EUR, GBP. Currency formatting is locale-aware (en-AE for UAE, en-US fallback). Built to actually work for the region, not retrofitted.

INSTALLABLE PWA

Add to Home Screen on mobile, install on desktop. Service worker caches the app shell for instant offline loads. Runs standalone — no browser chrome, no tabs — exactly like a native app.

// MORE BLUEPRINTS

See all case studies

← Back to Showcase
// YOUR IDEA, NEXT

Want something built like this?

Start a Project  â†’