🚀 Live Demo

---

Why This Is Different

Most finance dashboard submissions implement the assignment checklist. This one implements the assignment checklist plus features that real fintech products CRED, Fi Money, Paytm Money actually ship to users.

The gap: I asked "what would make a user trust this with their real financial data?" and built backwards from that.

---

Feature Breakdown

📊 Dashboard Overview

• 4 KPI cards — Net Balance, Monthly Income, Monthly Expenses, Savings Rate
• Month-over-month change badges — ↑↓ % vs previous month on every card, with color-coded indicators
• Balance Trend — Area chart with gradient fills, income vs expenses across 6 months
• Spending Breakdown — Donut chart with live category legend, current month
• Recent Transactions widget with one-click navigation to full list

💳 Transactions

• Full sortable table — click Date or Amount headers to toggle asc/desc
• ⌘K global search — keyboard shortcut opens search, filters live across description, category, note
• Filter panel — type (income/expense), category (12 options), month
• Active filter badge with one-click reset
• Empty state — contextual message when filters return no results
• Admin only: Add / Edit / Delete with full form validation
• CSV Export — downloads the currently filtered result set, not all data

🔍 Insights

• ⚡ Anomaly Detection — automatically surfaces spending spikes (e.g. "Entertainment is 3× higher than last month") with severity levels
• Month-over-month panel — income and expenses side by side with delta %
• Monthly bar chart — 6-month income vs expense comparison
• Category breakdown — progress bars showing each category's share of total spend
• Top spending category, biggest single expense, savings rate delta (pp vs last month)

🎯 Financial Health Score (original feature)

Inspired by CRED's credit health system.

A 0–100 composite score calculated across 5 weighted dimensions:

Factor	Weight	What It Measures
Savings Rate	30 pts	% of income saved (target: 20%+)
Budget Adherence	25 pts	How many categories stay within set limits
Income Stability	20 pts	Coefficient of variation across last 4 months
Spending Diversity	15 pts	No single category dominating spend
Expense Trend	10 pts	Month-over-month expense direction

Each factor includes a progress bar, current score, human-readable description, and an actionable tip. The SVG gauge arc animates on load with a glow effect matching the grade color.

Letter grades: A (85+) · B (70+) · C (55+) · D (40+) · F (<40)

🔁 Smart Recurring Detection (original feature)

Inspired by Fi Money's subscription tracker. Auto-detects without any manual tagging.

The algorithm scans transaction history and identifies patterns:

• Groups by normalized description
• Requires 2+ months of occurrence
• Validates amount consistency (≤20% variance — allows for small fluctuations like utility bills)
• Predicts next expected date

Each detected recurring item shows:

• Paid 🟢 — already appeared this month
• Due 🟡 — expected this month but not yet recorded
• Upcoming ⬜ — next cycle hasn't arrived yet
• Confidence indicator (shown when detected 3+ times)

💰 Budget Tracker

• Per-category monthly limits across 8 expense categories
• Progress bars: green → amber at 80% → red when over
• "Over budget" and "Near limit" badges per category
• Remaining / over-budget amount displayed below each bar
• Admin only: Inline budget editing — click the pencil, type, press Enter
• Overall utilization bar across all budgets combined

🔐 Role-Based UI

Two roles:

Admin gets full control: add, edit, and delete transactions, plus edit budget limits per category. Everything is live, no page reload.

Viewer sees all the same data, charts, and insights — just without any write access. Good for sharing a read-only view of your finances.

Both roles can export CSV. Role badge stays visible in the navbar so you always know which mode you're in.

Switch instantly from the sidebar — no page reload, no auth flow. Role badge visible in the navbar at all times.

✨ Polish & UX

• Dark / Light mode — persisted to localStorage, no flash on load
• Bottom navigation on mobile — native app-like tab bar with active state glow
• Desktop sidebar — persistent navigation with role switcher panel
• Staggered fade-up animations — each section enters with a calculated delay
• Bottom sheet modals — slides up from bottom on mobile (native feel), centered on desktop
• Keyboard shortcuts — ⌘K for search, Escape to close modals
• LocalStorage persistence — all data (transactions, budgets, role, theme) survives refresh
• Responsive layout — sidebar on desktop, bottom nav on mobile, no broken layouts

---

Tech Stack

Layer	Technology	Decision
Framework	Next.js 14 (App Router)	SSR-capable, file-based routing, production-grade
Language	TypeScript	Full type safety — store, utils, components, props
Styling	Tailwind CSS + CSS Variables	Tailwind for layout; CSS vars for the design token system that charts and custom components share
State	Zustand + persist middleware	Flat store, zero boilerplate, localStorage in one line
Charts	Recharts	React-native, composable, responsive containers
Icons	Lucide React	Tree-shakeable, consistent stroke weight
Fonts	Outfit (800w display) + JetBrains Mono	Distinctive — not Inter or Roboto
Deployment	Vercel	Zero-config, instant preview URLs

---

Architecture & State Design

finance-dashboard/
├── app/
│   ├── globals.css          # Full design system: CSS tokens, animations, base components
│   ├── layout.tsx           # Theme hydration (no flash), font loading
│   └── page.tsx             # Shell — tab routing, sidebar + bottom nav split
├── components/
│   ├── Sidebar.tsx          # Desktop navigation + role switcher
│   ├── BottomNav.tsx        # Mobile tab bar with active glow
│   ├── Navbar.tsx           # Search (⌘K), theme toggle, role badge
│   ├── SummaryCards.tsx     # 4 KPI cards with MoM change
│   ├── Charts.tsx           # Area, Donut, Bar charts (Recharts)
│   ├── RecentTransactions.tsx
│   ├── TransactionsPage.tsx # Table + search + filters + CRUD
│   ├── TransactionModal.tsx # Bottom-sheet form with validation
│   ├── InsightsPage.tsx     # Anomaly alerts + analytics
│   ├── HealthScore.tsx      # Composite score + SVG gauge
│   ├── RecurringWidget.tsx  # Auto-detected recurring transactions
│   └── BudgetsPage.tsx      # Per-category budget tracker
└── lib/
    ├── store.ts             # Zustand store with persist middleware + 45 mock transactions
    └── utils.ts             # Pure functions: formatters, calculators, anomaly detection, health score, recurring detection

Key Technical Decisions

CSS Variables over Tailwind dark: classes Tailwind's dark mode requires duplicating every color utility. CSS variables allow a single source of truth that works across Recharts, SVG, inline styles, and Tailwind simultaneously — switching themes is just toggling one class on <html>.

Zustand over Redux / Context The state is a flat object with simple mutations. Redux would add 5× the boilerplate for zero architectural benefit at this scale. Zustand's persist middleware serializes everything to localStorage in one line.

Bottom-sheet modals on mobile Center-modal UX breaks on small screens (content gets cut, backdrop hard to tap). Bottom sheets are the standard pattern for mobile-first apps — they slide up from the bottom, are easy to dismiss, and feel native.

"Current month" from data, not Date.now() Hardcoding to the current date would make mock data show empty charts whenever someone opens the demo outside the expected period. Deriving the current month from the most recent transaction date means the dashboard always shows meaningful data.

---

Setup & Running

# Clone
git clone https://github.com/Deepvamja/finflow-dashboard
cd finflow-dashboard

# Install
npm install

# Development
npm run dev
# → http://localhost:3000

# Production build
npm run build
npm start

# Deploy (zero config)
npx vercel --prod

No .env file. No database. No backend. Runs fully offline with 45 realistic mock transactions across 6 months.

---

Mock Data

The app ships with 45 pre-loaded transactions across 6 months (Nov 2025 – Apr 2026), covering:

• Monthly salary (₹85,000) with year-end bonus
• Freelance income across multiple projects
• Investment returns and SIP contributions
• Realistic expense patterns: rent, groceries, dining, transport, utilities, healthcare, entertainment, shopping

This ensures every chart, insight, anomaly alert, and recurring detection works meaningfully on first load — no "add some transactions to see data" empty states on the main dashboard.

---

What Makes This Stand Out

1. Product thinking — the Financial Health Score and Recurring Detection aren't features from the assignment spec. They're features that answer the question: "what would make a user trust this with their real finances?" That question isn't asked by most developers.

2. Mobile-first execution — the bottom navigation, bottom-sheet modals, and touch-optimized card layout treat mobile as a primary platform, not an afterthought. The candidate app you likely reviewed looks broken or cramped on a phone.

3. No sync bugs — by keeping all derived data as pure computed functions (never stored state), the UI is always consistent. Add a transaction, and every card, chart, insight, budget bar, health score, and recurring list updates instantly without stale data anywhere.

About

Deep Vamja

• GitHub: @Deepvamja
• Email: deepvamja22@gmail.com