← Apps
💸
Expense Tracker
Track spending by category and watch a real bar chart draw itself — no chart library.
🟡 MediumDifficulty
3-4 hoursTime
Python, JavaScript, TypeScriptLanguages
What you're building
You're building a personal expense tracker: log purchases with an amount and category, see your running total, and watch a hand-rolled SVG bar chart update live to show spending broken down by category. There's no chart.js, no dependencies — just you, plain SVG, and JavaScript math, which means you'll actually understand how every chart library works under the hood by the time you're done.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Comfortable with arrays and objects
- A code editor
- A browser
🗺️ Build roadmap
01 Build the expense entry form
→
02 Render the expense list and running total
→
03 Persist expenses with localStorage
→
04 Aggregate spending by category
→
05 Draw the SVG bar chart
→
06 Add delete and category color coding
→
07 Polish with currency formatting and empty states
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free