NotifSubs - Subscription Management System

A comprehensive subscription management platform built with Next.js 14, featuring real-time tracking, team collaboration, and advanced analytics. NotifSubs helps you monitor, organize, and optimize your recurring subscriptions while providing powerful insights into your spending patterns.

🚀 Features

Core Subscription Management

• Track Unlimited Subscriptions - Monitor all your recurring payments in one place
• Smart Categorization - Organize subscriptions with custom tags and categories
• Payment Method Management - Link multiple payment methods and track usage
• Renewal Reminders - Never miss a payment with customizable notifications
• Subscription Status Tracking - Monitor active, paused, or cancelled subscriptions

Advanced Analytics & Insights

• Spending Analytics - Visualize your subscription costs with interactive charts
• Cost Trends - Track spending patterns over time
• Category Breakdown - Analyze spending by subscription type
• Upcoming Renewals - Get alerts for payments due soon
• Revenue Analytics - For businesses, track subscription revenue

Team Collaboration (Enterprise)

• Team Management - Create and manage teams for collaborative tracking
• Role-Based Access - Admin, member, and viewer roles
• Shared Subscriptions - Track team-wide subscriptions
• Team Analytics - Collaborative insights and reporting

Smart Notifications

• Email Notifications - Configurable email alerts for renewals
• Push Notifications - Real-time updates and reminders
• Custom Reminder Periods - Set reminder timing (e.g., 3 days before renewal)
• Notification Preferences - Granular control over notification types

Security & Authentication

• Multi-Provider Auth - Google, GitHub, and email/password authentication
• Two-Factor Authentication - Enhanced security with 2FA support
• Role-Based Access Control - Admin and user roles with appropriate permissions
• Secure Data Handling - Encrypted passwords and secure session management

Admin Features

• User Management - Admin dashboard for user oversight
• Subscription Analytics - Platform-wide subscription insights
• Revenue Tracking - Monitor platform revenue and user growth
• System Notifications - Manage platform-wide announcements

🛠 Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• Recharts - Data visualization library

Backend

• Next.js API Routes - Server-side API endpoints
• Prisma - Type-safe database ORM
• PostgreSQL - Primary database
• NextAuth.js - Authentication solution
• Zod - Schema validation

Integrations

• Paddle - Payment processing and subscription management
• MailerSend - Email delivery service
• Vercel Blob - File storage
• Upstash Redis - Rate limiting and caching

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18.0 or later
• pnpm (recommended) or npm
• PostgreSQL database
• Git

🚀 Installation

1. Clone the Repository

git clone https://github.com/srddevj/subscriptions-management-system.git
cd subscriptions-management-system

2. Install Dependencies

pnpm install
# or
npm install

3. Environment Configuration

Create a .env.local file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/notifsubs"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# OAuth Providers
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# Email Service
MAILERSEND_API_KEY="your-mailersend-api-key"
MAILERSEND_FROM_EMAIL="noreply@yourdomain.com"

# Payment Processing
PADDLE_API_KEY="your-paddle-api-key"
PADDLE_ENVIRONMENT="sandbox" # or "production"

# File Storage
BLOB_READ_WRITE_TOKEN="your-vercel-blob-token"

# Rate Limiting
UPSTASH_REDIS_REST_URL="your-upstash-redis-url"
UPSTASH_REDIS_REST_TOKEN="your-upstash-redis-token"

4. Database Setup

# Generate Prisma client
pnpm prisma generate

# Run database migrations
pnpm prisma db push

# (Optional) Seed the database
pnpm prisma db seed

5. Start Development Server

pnpm dev
# or
npm run dev

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

🏗 Project Structure

subscriptions-management-system/
├── app/                          # Next.js App Router
│   ├── (admin)/                 # Admin dashboard routes
│   ├── (dashboard)/             # User dashboard routes
│   ├── api/                     # API routes
│   └── globals.css              # Global styles
├── components/                   # Reusable components
│   ├── admin/                   # Admin-specific components
│   ├── auth/                    # Authentication components
│   ├── dashboard/               # Dashboard components
│   ├── landing/                 # Landing page components
│   ├── settings/                # Settings components
│   ├── teams/                   # Team management components
│   └── ui/                      # UI component library
├── lib/                         # Utility libraries
│   ├── auth.ts                  # Authentication configuration
│   ├── db.ts                    # Database connection
│   ├── email/                   # Email templates and utilities
│   ├── notifications/           # Notification system
│   ├── subscription/            # Subscription management
│   └── utils.ts                 # General utilities
├── prisma/                      # Database schema and migrations
│   ├── migrations/              # Database migrations
│   └── schema.prisma            # Database schema
├── public/                      # Static assets
└── types/                       # TypeScript type definitions

📊 Database Schema

The application uses PostgreSQL with the following key models:

Core Models

• User - User accounts with authentication and preferences
• Subscription - User subscriptions with pricing and cycle information
• PaymentMethod - User payment methods (cards, bank accounts)
• Tag - Subscription categorization system
• Team - Team management for enterprise features
• Notification - User notifications and alerts

Supporting Models

• Account/Session - NextAuth.js authentication
• CustomerSubscription - Paddle integration
• SubscriptionStatus - Payment status tracking
• AdminNotification - Admin system notifications

🔧 Configuration

Authentication Setup

Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google (development)
   • https://yourdomain.com/api/auth/callback/google (production)

GitHub OAuth

1. Go to GitHub Settings → Developer settings → OAuth Apps
2. Create a new OAuth App
3. Set authorization callback URL:
   • http://localhost:3000/api/auth/callback/github (development)
   • https://yourdomain.com/api/auth/callback/github (production)

Email Configuration (MailerSend)

1. Sign up at MailerSend
2. Create an API token
3. Set up your domain for sending
4. Configure the MAILERSEND_FROM_EMAIL with your verified domain

Payment Processing (Paddle)

1. Sign up at Paddle
2. Create API keys (sandbox and production)
3. Set up webhook endpoints for subscription events
4. Configure products and pricing plans

🚀 Deployment

Vercel (Recommended)

1. Connect Repository

   # Install Vercel CLI
   npm i -g vercel
   
   # Deploy
   vercel

2. Environment Variables

   • Add all environment variables in Vercel dashboard
   • Set NEXTAUTH_URL to your production domain
   • Configure database connection string

3. Database

   • Use Vercel Postgres or external PostgreSQL service
   • Run migrations: vercel env pull .env.local && pnpm prisma db push

Docker Deployment

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Environment-Specific Configuration

Production Checklist

• Set NODE_ENV=production
• Configure production database
• Set up SSL certificates
• Configure CDN for static assets
• Set up monitoring and logging
• Configure backup strategies

📱 API Documentation

Authentication Endpoints

• POST /api/auth/register - User registration
• POST /api/auth/session-refresh - Refresh user session

Subscription Management

• GET /api/subscriptions - Get user subscriptions
• POST /api/subscriptions - Create new subscription
• PATCH /api/subscriptions/[id] - Update subscription
• DELETE /api/subscriptions/[id] - Delete subscription

Team Management (Enterprise)

• GET /api/teams - Get user teams
• POST /api/teams - Create new team
• PATCH /api/teams/[id] - Update team
• DELETE /api/teams/[id] - Delete team

Admin Endpoints

• GET /api/admin/stats - Platform statistics
• GET /api/admin/users - User management
• GET /api/admin/subscriptions - All subscriptions

🧪 Testing

# Run tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test --coverage

📈 Performance Optimization

Database Optimization

• Indexed queries for subscription lookups
• Efficient pagination for large datasets
• Optimized Prisma queries with selective fields

Frontend Optimization

• Next.js Image optimization
• Dynamic imports for code splitting
• SWR for efficient data fetching
• Optimized bundle size

Caching Strategy

• Redis for rate limiting
• Browser caching for static assets
• Database query caching

🔒 Security Features

Data Protection

• Encrypted password storage with bcrypt
• Secure session management
• CSRF protection
• Rate limiting on sensitive endpoints

Authentication Security

• JWT token-based authentication
• Secure cookie configuration
• OAuth 2.0 integration
• Two-factor authentication support

API Security

• Input validation with Zod
• SQL injection prevention with Prisma
• XSS protection
• CORS configuration

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write tests for new features
• Update documentation
• Follow the existing code style
• Ensure all tests pass

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

Getting Help

• Documentation - Check this README and inline code comments
• Issues - Open an issue on GitHub
• Discussions - Use GitHub Discussions for questions

Common Issues

Database Connection Issues

# Check database connection
pnpm prisma db push

# Reset database
pnpm prisma db push --force-reset

Authentication Issues

• Verify OAuth provider configuration
• Check environment variables
• Ensure callback URLs are correct

Email Notifications Not Working

• Verify MailerSend configuration
• Check API key permissions
• Test with sandbox environment

🗺 Roadmap

Upcoming Features

• Mobile app (React Native)
• Advanced reporting and analytics
• Subscription price tracking
• Integration with more payment providers
• Advanced team collaboration features
• API for third-party integrations

Version History

• v1.0.0 - Initial release with core subscription management
• v1.1.0 - Added team collaboration features
• v1.2.0 - Enhanced analytics and reporting
• v1.3.0 - Mobile responsiveness improvements

🙏 Acknowledgments

• Next.js Team - For the amazing React framework
• Prisma Team - For the excellent database ORM
• Vercel - For seamless deployment platform
• Radix UI - For accessible component primitives
• Tailwind CSS - For utility-first CSS framework

---

Built with ❤️ by [Your Name]

For more information, visit our website or contact us at email@example.com.