2026 · Full Stack Developer
SpendWise
A simple income & expense tracker
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
Overview
SpendWise is a clean personal finance tracker that makes it easy to log income and expenses and see exactly where your money is going. Every transaction updates the running balance instantly, and all data is saved automatically so nothing is lost on refresh.
I built it to practice deriving state cleanly — the balance and totals are always calculated from the transaction list rather than stored separately, so the numbers can never fall out of sync.
Key features
- Add income or expense transactions with categories.
- Live balance, total income, and total expense summaries.
- Delete transactions with smooth animations.
- Automatic persistence — data survives a page refresh.
- Fully responsive dark UI.
Challenges
- Keeping derived totals in sync — solved by calculating balance/income/expense from the transaction list with useMemo instead of storing them separately.
- Avoiding a hydration mismatch, since localStorage only exists in the browser — handled with a hydration flag.
Architecture
Built with Next.js (App Router) and TypeScript. A reusable useLocalStorage hook persists data to the browser, and a useTransactions hook manages the list and derives totals with useMemo. The UI is composed of small, focused components styled with Tailwind CSS and animated with Framer Motion.
Future improvements
- Monthly filtering and spending charts.
- Editing existing transactions and exporting to CSV.
Interested in working together?
Let's talk about your next project.