Know exactly how much you can spend today — without breaking next week.
▶ Live Demo → spendable.netlify.app
Most budgeting apps tell you where your money went. They think in calendar months, not pay cycles. They need 30 minutes of setup before you get any value.
Spendable answers the one question your bank never does:
"How much can I safely spend right now before my next paycheck?"
Safe to Spend = Current Balance − Upcoming Bills − Safety Buffer
One number. Always visible. Recalculated in real time around your pay cycle — not an arbitrary calendar month.
flowchart LR
A["💰 Current Balance"] --> D
B["📅 Upcoming Bills\nbefore next payday"] --> D
C["🛡️ Safety Buffer\nyou set"] --> D
D["⚡ Safe to Spend\n(recalculated live)"] --> E{Positive?}
E -->|Yes| F["✅ You're good"]
E -->|No| G["🔴 Overspent — review bills"]
Unlike calendar-month budgets, Spendable resets on your payday — weekly, biweekly, semi-monthly, or monthly. Log a purchase in seconds and your number updates instantly.
| Feature | Description |
|---|---|
| Safe to Spend | Your real spending power right now |
| Pay-cycle aware | Tracks weekly, biweekly, semi-monthly, and monthly pay schedules |
| Upcoming Hits | Shows committed expenses between today and your next payday |
| Quick-Log | Add a transaction in seconds; balance updates instantly |
| Safety Buffer | Set a floor you never want to go below |
| Zero setup friction | No account required, no bank link — works immediately |
Live at spendable.netlify.app — mobile-first design.
Requirements: Node.js 22+
git clone https://github.com/otonielrojas/spendable.git
cd spendable/app
npm install
npm run devOpen http://localhost:3000.
npm run dev # Start dev server
npm run build # Production build (also runs TypeScript check)
npm run lint # ESLint
npm test # Vitest unit tests
npm run test:watch # Unit tests in watch mode
npm run test:e2e # Playwright end-to-end testsspendable/
├── app/ # Next.js application
│ ├── app/ # App Router pages & layout
│ ├── components/
│ │ ├── spendable/ # Feature components
│ │ └── ui/ # shadcn/ui primitives
│ ├── lib/
│ │ ├── types.ts # Shared TypeScript types
│ │ ├── store.ts # Zustand store (localStorage persistence)
│ │ ├── calculate.ts # Pure Safe-to-Spend calculation engine
│ │ └── utils.ts # Utilities
│ └── __tests__/
│ ├── unit/ # Vitest unit tests
│ └── e2e/ # Playwright E2E tests
└── docs/ # PRD, roadmap, brainstorm, decisions
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| UI | Tailwind CSS + shadcn/ui |
| State | Zustand with localStorage persistence |
| Testing | Vitest + React Testing Library + Playwright |
| Hosting | Netlify |
| Milestone | Focus |
|---|---|
| M3 (current) | Polish — onboarding, empty states, mobile UX, dark mode, PWA |
| M4 | Share with 10 users, collect feedback, measure day-1/7 retention |
| M5 | Bank account sync via Plaid |
| M6 | AI-powered insights via Claude API — premium tier |
See docs/roadmap.md for the full milestone breakdown.
Spendable is currently in active early development. External contributions are not open yet, but the plan is to invite trusted collaborators once the MVP is validated.
If you find a bug or have a feature idea, please open an issue — feedback is very welcome.
See CONTRIBUTING.md for the full contribution guide.
Found a vulnerability? Please do not open a public issue. See SECURITY.md for responsible disclosure instructions.
MIT © 2026 Otoniel Rojas