Vibe Coding · SaaS App · 2026
Designing and deploying a modern financial dashboard — from Figma prototype to live production app in a single day using Claude Code, Next.js, and Supabase.
Role
Lead UX Designer
Tools
Figma · Claude Code · Next.js
Timeline
1 Day Experiment
Year
2026
Balance
$24,563
↑ +12.4% this month
Income
$8,350
↑ +8.2% vs last month
Expenses
$3,820
↓ -3.1% vs last month
Savings
$4,530
↑ +21.6% this month
Income vs Expenses
Categories
Housing
35%
Food
22%
Transport
18%
Entertainment
15%
Other
10%
Overview
Finova started as a personal experiment: can a designer ship a fully functional, production-ready SaaS app in a single day? The answer was yes — combining Figma for design, Claude Code for development, and modern deployment infrastructure.
The result is a live financial dashboard with real-time expense tracking, analytics, and a clean, modern interface — built entirely by a designer with no traditional hand-off to a developer.
Role
Lead UX Designer
Tools
Figma, Claude Code, Next.js, Supabase, Vercel
Timeline
1 Day Experiment
Type
Vibe Coding · SaaS App
The Problem
Traditional design workflows end at the handoff. Designers create beautiful prototypes that live inside Figma forever — never reaching real users, never validating interaction patterns at scale.
01
Figma prototypes simulate interactions but can't replicate real data, actual performance, or live API responses. The gap between prototype and product is massive.
02
Without a real build, it's impossible to test loading states, error handling, edge cases, or how the design holds up under actual usage conditions.
03
Traditional handoffs involve extensive documentation, revision cycles, and developer interpretation — adding weeks between design completion and users seeing the product.
Objective
The goal was clear: design a complete financial dashboard and ship it to production within 24 hours — covering all core features a real fintech app would need.
Real-time transaction logging with category tagging and budget monitoring.
Income vs expenses charts, monthly trends, and spending pattern visualisation.
Breakdown of spend across housing, food, transport, and custom categories.
Filterable, searchable transaction table with live data from Supabase.
Workflow
A six-step pipeline — from initial concept to deployed product — executed in a single continuous session. Each step feeds directly into the next with minimal friction.
Define the product scope, user needs, and core feature set before touching any design tool.
Structure a precise prompt describing the architecture, data model, and component requirements.
Design the UI in Figma — establishing visual identity, component library, and layout system.
Claude Code generates the full Next.js application from the Figma design and structured prompt.
Connect live data — transactions, categories, and user data — via Supabase PostgreSQL backend.
Push to production with zero-config deployment on Vercel's global edge network.
Interface
Four core screens designed for clarity and speed — giving users an immediate sense of their financial health without cognitive overload.
Transaction History
| Date | Description | Category | Amount | Status |
|---|---|---|---|---|
| Mar 15 | Netflix Subscription | Entertainment | -$15.99 | Completed |
| Mar 14 | Salary Deposit | Income | +$8,350.00 | Completed |
| Mar 13 | Whole Foods Market | Food | -$124.50 | Completed |
| Mar 12 | Uber Ride | Transport | -$23.40 | Completed |
| Mar 11 | Freelance Payment | Income | +$1,200.00 | Pending |
Micro Interactions
Every interaction was considered — from the moment the page loads to how users explore their data. Subtle animations and feedback states elevate the experience from functional to delightful.
Numbers count up from zero on page load — giving users a satisfying sense of their balance being "calculated" in real time.
Hovering over chart bars reveals precise values with smooth fade-in tooltips, encouraging deeper exploration of the data.
Content placeholders animate while data loads from Supabase — no blank screens, no layout shifts.
Metric cards respond to hover with subtle scale and glow effects, reinforcing interactivity without distracting from content.
Tech Stack
Every tool in the stack was chosen for speed, developer experience, and production readiness — enabling a solo designer to ship a full-stack app in hours.
Framework
Next.js
Database
Supabase
Styling
Tailwind CSS
Charts
Recharts
Animation
Framer Motion
Deployment
Vercel
AI Dev Tool
Claude Code
Design
Figma
Deployment
Deployed to Vercel's global edge network in 42 seconds. The entire bundle is 287KB — optimised for performance with a Lighthouse score of 96.
42s
Build Time
287KB
Bundle Size
96
Lighthouse Score
Edge
Global CDN
Outcome
Finova proves that the boundary between designer and developer is collapsing. With the right AI tools, a designer can own the full product lifecycle.
1 Day
Concept to Production
100%
Designer-Led Build
Live
Real Product
Demo Login
Username: test@test.com
Password: 12345678
Next Project
Explore the full portfolio — case studies spanning FinTech, Logistics, and MedTech.
View All Work→