Stash
A small personal finance tracker built with Next.js, Supabase and Tailwind CSS. Stash lets you record expenses, view recent transactions, and analyze spending with charts.
Tech stack: Next.js 16 · React 19 · Tailwind CSS 4 · Supabase · Recharts · Zustand
Demo
https://stash-lemon.vercel.app/
What this project does
Stash is a simple expense tracker web application that helps you:
- Add and manage expenses (category, amount, note, date)
- View recent expenses in a responsive table
- Analyze spending with charts (pie chart by category, other visualizations)
- Persist data using Supabase (Postgres + auth)
Project layout (key folders):
app/– Next.js App Router pages and layoutscomponents/– UI components (cards, forms, charts, nav, theme toggle)components/charts– Recharts-based chart components (Pie, Line)lib/– utilities, categories, currencies and supabase helpersstore/– lightweight client state (Zustand)
Why it’s useful
- Lightweight, opinionated starter for building personal finance or expense tracking apps
- Ready-made UI components and charts so you can focus on features
- Uses Supabase for quick backend (no server code required for many features)
- Easy to extend: add budgets, recurring payments, reports
Quick Start
Prerequisites
- Node.js 18+ (tested on Node 18/20)
- npm or pnpm
- A Supabase project (for database and optional authentication)
Steps
- Clone the repo
git clone <your-repo-url> stash
cd stash
- Install dependencies
npm install
# or
# pnpm install
- Configure environment variables
Create a file in the project root with the following (replace with your Supabase values):