Back to Projects

SubSave

A modern subscription finance app that helps users track recurring costs, avoid hidden charges, and make smarter keep-or-cancel decisions.

Next.js 14 (App Router)React 18TypeScript 5Tailwind CSSRechartsLucide Reactshadcn/uiRadix UIZodClerkPrisma ORMPostgreSQLGemini API
SubSave

About This Project

SubSave combines a clean dashboard, practical value insights, and an in-app AI assistant so subscription management feels simple and actionable. Users can manage subscriptions, monitor upcoming billing risk, detect trial traps before paid renewal, and optimize duplicate services across shared circles. The platform is production-ready with request tracing, route-level rate limiting, and a live health monitoring card backed by a runtime health endpoint.

Key Features

  • Smart dashboard with animated monthly spend, KPI cards, and upcoming billing timeline
  • Full subscription CRUD for name, category, monthly cost, billing day, trial end date, and monthly usage
  • Usage Value analytics with Recharts dual-view toggle (cost per use and cost vs usage)
  • Trial Trap Detector to flag trials ending soon before paid renewal
  • Sharing Optimizer to detect duplicate subscriptions and suggest consolidation
  • In-app Gemini assistant with authenticated server route, scoped responses, and graceful fallback behavior
  • Premium UI motion system with staggered reveals, hover lift, animated accents, and reduced-motion support
  • Production reliability features: x-request-id tracing, rate limiting, and /api/health with live dashboard polling

Challenges & Solutions

Challenge

Designing a finance-oriented dashboard that remains easy to use while combining real-time analytics, authenticated AI interactions, and resilient API behavior under provider or traffic constraints.

Solution

Built a modular Next.js App Router architecture with Clerk-protected routes, Zod-validated handlers, Prisma-backed PostgreSQL models, and immediate client-side data refresh patterns; paired it with robust operational safeguards such as request IDs, endpoint rate limiting, and periodic health checks surfaced directly in the UI.

Technologies

Next.js 14 (App Router)React 18TypeScript 5Tailwind CSSRechartsLucide Reactshadcn/uiRadix UIZodClerkPrisma ORMPostgreSQLGemini API