Subscription Tracker

Next.js React TypeScript PostgreSQL Prisma Docker Jest Recharts NextAuth

Overview

Built this because I kept forgetting about subscriptions quietly charging me. It's a full-stack app where you add all your recurring services, configure email or webhook reminders before renewals, and get a clear picture of where your money's going through spending charts. Under the hood, an async background job queue handles scheduling without blocking the main thread, so reminders go out reliably even under load.

What I built

Async job queue for scheduling renewal reminders without blocking the app
Webhook + email notifications with configurable lead time
Spending dashboard with monthly & yearly breakdowns using Recharts
Category and payment method organization
Multi-user support with NextAuth authentication
Jest test coverage for the job queue and notification logic
Docker-ready for easy self-hosting

What I learned

How to design a reliable background job queue and handle retries
Webhook delivery patterns, idempotency, failure handling, and retry backoff
Building meaningful data visualizations with Recharts
NextAuth configuration with custom session handling and credential flows

Architecture

flowchart TD
    User([" User"])

    subgraph Frontend["Next.js Frontend"]
        UI["Dashboard & Forms"]
        Charts["Recharts Analytics"]
    end

    subgraph API["Next.js API Routes"]
        Auth["NextAuth"]
        CRUD["Subscription CRUD"]
        Trigger["Reminder Trigger"]
    end

    subgraph Queue["Background Job Queue"]
        Scheduler["Job Scheduler"]
        Retry["Retry Logic"]
    end

    subgraph Notify["Notifications"]
        Email["Email"]
        Webhook["Webhook"]
    end

    DB[("PostgreSQL
(Prisma)")]

    User --> UI
    UI --> Auth
    UI --> CRUD
    CRUD --> DB
    DB --> Charts
    Trigger --> Scheduler
    Scheduler --> Retry
    Retry --> Email
    Retry --> Webhook