Budget Envelope Planner
Split your income into envelopes and watch each one drain as you spend.
IntermediateWeb appDashboard10–20hAI-buildable 4/5no setupworth shipping
Envelope budgeting as an interface: allocate a month's income across categories, then log expenses against them. Each envelope shows what's left, and overspending one visibly borrows from your buffer rather than silently going negative. It's a small app with genuinely interesting constraint logic — every allocation has to stay reconciled against income.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Set a monthly income figure
- Create envelopes with a name and an allocated amount
- Unallocated income is always shown and can never go negative unnoticed
- Log an expense against a specific envelope
- Each envelope shows allocated, spent and remaining with a progress bar
- Overspending an envelope is visually distinct, not just a negative number
- Data persists and can be reset per month
The interesting part
- Keeping allocations reconciled against income on every edit
- Deciding what should happen when an envelope is deleted with spending in it
- Currency rounding that doesn't leak fractions of a cent
Once it works
- Roll unspent amounts into next month
- Add recurring expenses that auto-log
- Chart spending by category over several months
Suggested stack
reacttypescripttailwindreact-hook-formlocalstorage