03 · 2026 · live
SpendShiftpersonal spending, made visible.
A web-based personal expense tracker built as a full-stack Next.js application. It helps users log expenses, organize categories, set monthly budgets, inspect spending patterns, customize the interface, and export their financial activity from a polished responsive dashboard.
Problem
Personal finance tools can become either too heavy for daily use or too shallow to reveal where money is actually going. The product needed a fast expense-entry flow, persistent account data, budget feedback, and useful visual summaries without turning routine tracking into spreadsheet work.
Approach
SpendShift uses a Next.js 16 App Router structure with authenticated app routes for dashboard, activity, budgets, categories, insights, and settings. API route handlers back the product with MongoDB and Mongoose models for users, expenses, budgets, and categories, while the client app coordinates optimistic-feeling state, onboarding, sample data seeding, theme and accent customization, currency preferences, charts, sheets, and export actions.
Role
Full-stack engineer. Designed and implemented the product experience, authentication flow, database models, API routes, dashboard analytics, budget/category management, settings surface, responsive UI system, and Vercel deployment.
Highlights
- Authenticated account flow uses normalized email handling, scrypt password hashing, signed HTTP-only session cookies, protected app routes, and logout support.
- Expense tracking covers create, edit, delete, bulk sample seeding, recurring markers, merchant notes, category assignment, base currency display, and CSV export.
- Dashboard and insights surfaces show monthly KPIs, last-7-day totals, daily averages, 30-day spending bars, category breakdowns, merchant rankings, donut charts, and month heatmaps.
- Budget and category tools let users set monthly caps, compare spend against limits, manage custom category glyphs/colors, and reset or reseed app data.
- Personalization includes onboarding, light/dark/system themes, accent palettes, base currency selection, density/font tweaks, mobile sheets, reusable atoms, and a responsive app shell.
Stack
- TypeScript
- Next.js 16
- React 19
- MongoDB
- Mongoose
- Tailwind CSS
- Vaul
- Vercel
At a glance
- Surface
- Personal finance web app
- Routes
- Dashboard, activity, budgets, categories, insights, settings
- Backend
- Next.js API routes + MongoDB
- Auth
- scrypt passwords + signed session cookies
- Status
- Live / public source