Skip to content

axelClement/SubManager

Repository files navigation

SubManager

A mobile-first subscription management application that gives users a clear overview of their recurring expenses. Track every subscription, monitor upcoming payments, analyse spending by category, and find cheaper alternatives — all from a single interface.


Screenshots

Dashboard All Subscriptions
Dashboard All Subscriptions
Subscription Detail Add Subscription
Subscription Detail Add Subscription

Features

  • Dashboard — At-a-glance view of total monthly spending, number of active subscriptions, and the three most upcoming payment dates.
  • Subscription list — Browse all subscriptions grouped and filtered by category, with billing cycle and next payment date.
  • Subscription detail — Full information per subscription including logo, price, billing cycle, start date, step-by-step cancellation instructions, and suggested cheaper alternatives.
  • Spending analysis — Visual category breakdown showing where money goes each month as absolute values and percentages.
  • Add subscription — Form to register a new subscription with service name, price, billing cycle, and category.

Tech Stack

Layer Technology
Framework Next.js 16 — App Router
Language TypeScript 5
Styling Tailwind CSS v4
UI Components Custom components built with class-variance-authority
Icons Lucide React
Date utilities date-fns
Runtime React 19

Getting Started

Prerequisites

  • Node.js 18 or later
  • npm, yarn, pnpm, or bun

Installation

git clone https://github.com/your-username/SubManager.git
cd SubManager
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Production build

npm run build
npm run start

Project Structure

src/
├── app/
│   ├── page.tsx              # Dashboard
│   ├── subscriptions/        # All subscriptions list
│   ├── subscription/[id]/    # Subscription detail page
│   ├── analysis/             # Spending analysis
│   └── add/                  # Add subscription form
├── components/
│   └── ui/                   # Reusable UI components (Button, Card, Badge, Input)
├── lib/
│   ├── mockData.ts           # Sample subscription data
│   └── utils.ts              # Utility functions
└── types/
    └── index.ts              # TypeScript type definitions

Roadmap

  • Backend integration with a database (PostgreSQL / Supabase)
  • Authentication and per-user subscription storage
  • Push notifications for upcoming payments
  • CSV / PDF export of spending history
  • Currency conversion support

License

This project is open source and available under the MIT License.

About

Mobile-first subscription manager - track recurring expenses, monitor upcoming payments and analyse spending by category.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors