Faeez Shabbir
SpendSavvy cover art

SpendSavvy

Client

A subscription expense tracker with a free trial, Stripe billing and spending charts.

Role
Full stack, from the client's scope document to deployment.
Timeline
2025
Stack
Next.js 15, React 19, TypeScript, MongoDB, Mongoose, Stripe, Chart.js, Material UI
Status
Client

01 / The problem

The client wanted a simple website where people log what they spend and see where their money goes, and it had to make money from day one. New users get three days of full access, then pay a monthly subscription to keep going.

02 / Decisions

  1. The trial lives on the user

    Each account stores when its trial ends and whether it is subscribed. Every protected page checks both, and sends expired users to the payment page.

  2. Stripe decides who has paid

    Checkout runs on Stripe, and Stripe's webhook is what turns a subscription on or off. The app never trusts the browser for that.

  3. Numbers people can read

    The tracker shows this month's total, the trend against last period and a chart by category, with a form that works on a phone.

03 / The system

The shape of the system

Next.js appTracker, charts, trial andpayment pagesAPI routesAuth, expenses, trialchecksMongoDBUsers, trials and expensesEmailNodemailerStripeSubscriptions and webhooksNext.js appTracker, charts, trial and paymentpagesAPI routesAuth, expenses, trial checksMongoDBUsers, trialsand expensesEmailNodemailerStripeSubscriptions and webhooks
SurfaceSystem
From the SpendSavvy repo.

04 / Results

  • Built to the client's scope document. The demo is live on Vercel.

View live

More detail

The problem

The client wanted a simple website where people log what they spend and see where their money goes. It had to earn from day one, so new users get three days of full access and then pay a monthly subscription to keep using the tracker.

What I built

I built it full stack from the client's scope document.

  • Sign up and log in with email and password. Each account stores when its trial ends and whether it has paid.
  • Trial checks on every protected page. When the trial runs out, the user lands on the payment page instead of the tracker.
  • Stripe subscriptions. Checkout runs on Stripe, and Stripe's webhook is what switches access on or off.
  • The tracker. Add an expense with a date, category, amount and note. See this month's total, the trend against last period and a chart by category.
  • Marketing pages for home, about and contact, with a contact form that sends email.

Stack

Next.js 15, React 19 and TypeScript, Material UI and Tailwind CSS, MongoDB with Mongoose, Stripe, Chart.js and Nodemailer, deployed on Vercel.

Outcome

Built to the client's scope. The demo is live at spendsavvy.vercel.app.