🚀 Subscription Manager

Track All Your Subscriptions in One Beautiful Dashboard

A modern, full-stack subscription management application built with the MERN stack

Features • Screenshots • Tech Stack • Quick Start • Documentation

---

📸 Screenshots

Dashboard Overview

Real-time analytics and spending insights

Subscription Management

Manage all your subscriptions in one place

Dark Mode Support

Beautiful dark theme for comfortable viewing

---

✨ Features

🎯 Subscription Management ✅ Create, edit, delete subscriptions ✅ 15+ pre-defined categories with icons ✅ Track billing cycles (monthly/yearly/weekly) ✅ Payment status management ✅ Auto-renewal tracking ✅ Payment history logging	📊 Analytics & Insights ✅ Total spending overview ✅ Active subscriptions count ✅ Upcoming payments tracker ✅ Category breakdown charts ✅ Monthly/yearly projections ✅ Recent activity timeline
🔐 Security & Auth ✅ JWT dual-token authentication ✅ Bcrypt password hashing ✅ Rate limiting protection ✅ XSS & injection prevention ✅ Secure session management ✅ Password reset flow	🎨 User Experience ✅ Dark mode with persistence ✅ Responsive design (mobile-first) ✅ Payment calendar visualization ✅ Real-time form validation ✅ Toast notifications ✅ Smooth animations

---

🛠️ Tech Stack

Frontend

Backend

DevOps

Complete Technology Overview

Frontend               Backend                Database
├─ React 18           ├─ Node.js 18+         ├─ MongoDB Atlas
├─ Material-UI 5      ├─ Express 4           ├─ Mongoose ODM
├─ React Query        ├─ JWT Auth            └─ Connection Pool
├─ React Hook Form    ├─ Bcrypt              
├─ Framer Motion      ├─ Winston             DevOps
├─ Recharts           ├─ Nodemailer          ├─ Vercel Serverless
└─ Axios              └─ Helmet              ├─ GitHub CI/CD
                                              └─ Environment Vars

---

🚀 Quick Start

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0
• MongoDB (local or Atlas)

Installation

1️⃣ Clone the repository

git clone https://github.com/Venu22003/subscription-management.git
cd subscription-management

2️⃣ Backend setup

cd backend
npm install
cp .env.example .env
# Edit .env with your MongoDB URI and secrets
npm run dev

3️⃣ Frontend setup

cd frontend
npm install
cp .env.example .env
# Edit .env with your API URL
npm start

4️⃣ Access the application

• Frontend: http://localhost:3000
• Backend: http://localhost:5000
• API Docs: http://localhost:5000/api/v1

Environment Variables

Click to expand backend variables

# Database
MONGODB_URI=mongodb://localhost:27017/SubscriptionManager

# JWT
JWT_SECRET=your_jwt_secret_key_here
JWT_REFRESH_SECRET=your_refresh_secret_key_here
JWT_EXPIRE=15m
JWT_REFRESH_EXPIRE=7d

# URLs
FRONTEND_URL=http://localhost:3000

# Email (Optional)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your_email@gmail.com
SMTP_PASSWORD=your_app_password

Click to expand frontend variables

REACT_APP_API_URL=http://localhost:5000/api/v1
REACT_APP_ENV=development

---

📚 Documentation

📖 Quick Start Get up and running in 5 minutes	🚀 Deployment Deploy to production step-by-step	🔌 API Docs Complete API endpoint reference
🤝 Contributing How to contribute to the project	📋 Changelog Version history and updates	📄 License MIT License details

---

🏗️ Project Structure

subscription-management/
├── 📁 backend/
│   ├── 📁 config/          # Database & logger configs
│   ├── 📁 controllers/     # Business logic
│   ├── 📁 middleware/      # Auth, validation, security
│   ├── 📁 models/          # Mongoose schemas
│   ├── 📁 routes/          # API endpoints
│   ├── 📁 services/        # Email service
│   ├── 📄 index.js         # Entry point
│   └── 📄 vercel.json      # Deployment config
│
├── 📁 frontend/
│   ├── 📁 src/
│   │   ├── 📁 components/  # React components
│   │   ├── 📁 context/     # Global state
│   │   ├── 📁 services/    # API services
│   │   ├── 📁 theme/       # MUI theming
│   │   └── 📄 App.js       # Main component
│   └── 📄 vercel.json      # Deployment config
│
└── 📁 docs/                # Documentation

---

🎨 Screenshots

Click to view all screenshots

Dashboard - Light Mode

Subscriptions List

Settings & Dark Mode

Calendar View

Coming soon - Payment calendar visualization

Mobile Responsive

Optimized for all screen sizes

---

🔌 API Endpoints

Authentication

Method	Endpoint	Description
POST	/api/v1/auth/signup	Register new user
POST	/api/v1/auth/login	Authenticate user
POST	/api/v1/auth/refresh-token	Refresh access token
POST	/api/v1/auth/logout	Logout user
POST	/api/v1/auth/forgot-password	Request password reset

Subscriptions

Method	Endpoint	Description
GET	/api/v1/subscriptions	Get all subscriptions
POST	/api/v1/subscriptions	Create subscription
GET	/api/v1/subscriptions/:id	Get single subscription
PUT	/api/v1/subscriptions/:id	Update subscription
DELETE	/api/v1/subscriptions/:id	Delete subscription

Dashboard

Method	Endpoint	Description
GET	/api/v1/dashboard/stats	Get statistics
GET	/api/v1/dashboard/spending	Get spending data
GET	/api/v1/dashboard/upcoming	Get upcoming payments

📖 View Complete API Documentation →

---

🤝 Contributing

We welcome contributions! Here's how you can help:

1. 🍴 Fork the repository
2. 🌿 Create your feature branch (git checkout -b feature/AmazingFeature)
3. 💻 Commit your changes (git commit -m 'Add some AmazingFeature')
4. 📤 Push to the branch (git push origin feature/AmazingFeature)
5. 🔀 Open a Pull Request

📖 Read our Contributing Guidelines for more details.

---

🐛 Bug Reports & Feature Requests

Found a bug or have a feature idea?

• 🐞 Report a Bug
• 💡 Request a Feature
• 💬 Ask a Question

---

📊 Project Status

Status: ✅ Production Ready - Actively Maintained

---

🎯 Roadmap

Version 2.1.0 (Coming Soon)

• Email verification on signup
• Two-factor authentication (2FA)
• Data export (CSV/PDF)
• Bulk operations
• Mobile notifications

Version 2.2.0

• Social authentication (Google, GitHub)
• Family sharing features
• Advanced analytics
• Custom categories with icons
• Multi-language support

Version 3.0.0

• AI-powered recommendations
• Price tracking
• Banking API integration
• Chrome extension
• Mobile app (React Native)

---

📝 License

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

---

👨‍💻 Author

Venu Prasad

---

🌟 Show Your Support

If you found this project helpful, please consider:

• ⭐ Starring the repository
• 🍴 Forking the project
• 📢 Sharing with your network
• 🐛 Reporting bugs
• 💡 Suggesting new features

---

Built with ❤️ using MERN Stack

⬆ Back to Top