→All workProject file 12 / 18
Web app · Personal finance
Expense Tracker
Built three times. Each one taught the next.
- Type
- Web app · Personal finance
- Role
- [Add role]
- Year
- 2026
- Status
- Experiment
Expense Tracker — screen[Add image]public/images/work/expense-01.jpg
(01)What it is
A small app with a long history. Version one is plain HTML, CSS and JavaScript. Then it was rebuilt in React with Tailwind — in a repo optimistically named “projectsbuiltwithmylastbraincells” — and again as a React + Recharts app deployed to GitHub Pages.
- Built at
- On my own time
- First commit
- Mar 2026
- File
- 13 of 18 project pages
(02)How it works
- 01→AddIncome or expense, with a category
- 02→BalanceIncome, expenses, what's left
- 03→ChartSpending by category
- 04→GoalA savings target
- 05■PersonalitySaver? Big spender?
(03)What's inside
- 01
Same app, three builds
Vanilla JavaScript first, then React twice — the fastest way to feel what a framework actually buys you.
- 02
A verdict on your habits
Spending against income becomes a label: Saver, Minimalist, Balanced, Risk Taker or Big Spender.
(04)The honest bit
- Everything lives in your browser's local storage — close the tab, keep the data, no account.
No fake users, no invented numbers. If it's a demo, it says so.
(05)Built with
- v1
- HTML/CSS/JavaScript
- React builds
- React/Vite/Tailwind CSS/Recharts
- Deploy
- GitHub Pages
(06)Links
- LiveOpen it ↗
- CodeView the code ↗
- v1 — vanillaRepo ↗
- React + TailwindRepo ↗
(07)Screens
The React build[Add image]public/images/work/expense-01.jpg