Medium•Web Development

Subscription Tracker

Build a fully functional, frontend-only Subscription Tracker using Next.js App Router and Tailwind CSS. Features a dark-theme dashboard with spending charts, subscription management (add, edit, delete), reminder system, and full data persistence — all without any backend, using Zustand and localStorage.

📚Scroll down to see free videos & courses ↓

View on GitHub Live Demo

What You Will Build

A production-grade subscription management dashboard inspired by premium fintech apps. Users can add and manage subscriptions across categories, view monthly/annual spending breakdowns with interactive charts, get renewal reminders, filter and sort subscriptions, and persist all data locally — all powered by frontend state management with a sleek glassmorphism dark UI.

Concepts You'll Learn

Next.js App Router with file-based routing and layouts
Global state management with Zustand
Persisting app state to localStorage with Zustand persist middleware
Building reusable components (StatCard, SubscriptionCard, SubscriptionModal, Charts, Sidebar)
Hydration-safe client rendering using useEffect for localStorage-backed state
Subscription CRUD logic — add, edit, delete, and calculate monthly/annual totals
Data visualization with Recharts (bar charts, pie charts, spending breakdowns)
Form validation with inline error handling and controlled inputs
Responsive sidebar navigation with active route highlighting
Glassmorphism and dark-theme UI design with Tailwind CSS
TypeScript interfaces and type-safe component props
Category-based filtering and sorting of data