A web application for managing and visualizing personal subscriptions. Get a clear overview of your recurring costs, identify unused services, and take control of your subscription spending. Using the @hr222sy/subscription-tracker module.
- ✅ Add and manage subscriptions - Track name, price, frequency, and category
- ✅ Remove subscriptions - Delete subscriptions you no longer need
- ✅ Frequency toggle - View costs in weekly, monthly, or yearly
- ✅ Automatic cost conversion - See how subscriptions add up over different timeframes
- ✅ Real-time total calculation - Always know your total recurring costs
- ✅ Secure validation - Input validation and sanitization on frontend and backend
- ✅ Rate limiting - Protection against abuse (100 req/min)
Subscription Dashboard helps individuals take control of their subscription spending. Track all recurring costs in one place, identify unused services and make informed decisions about which subscriptions to keep.
This project demonstrates Clean Code principles and object-oriented design in a full-stack application using a custom npm module. Use the @hr222sy/subscription-tracker module in your own projects, study the codebase or contribute improvements. See DEVELOPER.md for more details.
Created as part of course 1dv610 at Linnaeus University, demonstrating code quality, maintainability, and software design patterns.
🚀 Try the application: https://subscription-dashboard-9yzo.onrender.com
- Core Features
- Purpose
- Live Demo
- Screenshot
- Installation
- Usage
- Known Limitations
- Technologies
- Security
- Project Structure
- For developers
- License
- Author
- Academic Context
- Node.js ≥20.6.0
- npm ≥10.0.0
- Browser: Modern browser with ES6+ support
- Clone the repository:
git clone https://github.com/HannaRV/subscription-dashboard.git
cd subscription-dashboard- Install dependencies:
npm install- Start the server:
npm start- Open browser:
http://localhost:3000
- Fill in subscription details:
- Name (max 20 characters)
- Price (SEK, 0 or positive number)
- Frequency (weekly/monthly/yearly)
- Category (max 20 characters)
- Click "Add Subscription"
- Subscription appears in the list
- Find the subscription in your list
- Click "Remove" button
- Subscription is deleted immediately
- Use the "View as:" dropdown
- Select weekly, monthly, or yearly
- All subscriptions and total cost convert automatically
- Original billing frequency is always shown
- Total cost displays at the bottom
- Updates automatically based on selected frequency
- Includes all active subscriptions
- No data persistence - Data is stored in memory only. Reloading the page clears all subscriptions.
- No edit functionality - To modify a subscription, you must delete and re-add it.
- No usage analytics - UsageAnalyzer from the module is not implemented in this MVP.
- No category grouping - Subscriptions are not grouped by category.
Planned for future versions:
- LocalStorage for session persistence
- Edit subscription functionality
- Usage tracking (cost per hour)
- Category breakdown with charts
- Backend database with user accounts
- Node.js (≥20.6.0) - Runtime environment
- Express 5 - Web framework
- @hr222sy/subscription-tracker (v1.0.0) - Custom npm module for subscription logic
- helmet - Security headers
- express-rate-limit - Rate limiting
- Vanilla JavaScript (ES6+) - No frameworks
- HTML5 - Semantic markup
- CSS3 - Styling
The application implements multiple security layers:
- ✅ Helmet - Security headers (CSP, HSTS, X-Frame-Options, etc.)
- ✅ Rate Limiting - 100 requests per minute per IP
- ✅ Input Validation - Frontend (HTML5) + Backend (middleware) validation
- ✅ Error Handling - Centralized error handling with proper responses
- ✅ URL Encoding - Safe handling of subscription names
subscription-dashboard/
├── src/ # Backend application code
│ ├── server.js # Entry point
│ ├── controllers/ # Request handlers
│ ├── models/ # Data access layer
│ ├── routes/ # API routes
│ ├── middleware/ # Validation, security, error handling
│ └── views/ # HTML templates
├── public/ # Frontend assets (CSS, JS)
├── docs/ # Documentation
└── package.json
Want to understand the codebase or contribute?
See the Developer.md for:
- Detailed architecture documentation
- Design pattern explanations
- How to add new features
- Code organization guidelines
Available Scripts:
npm start # Start production server
npm run dev # Start development server with auto-reloadMIT
Hanna Rubio Vretby
📧 hr222sy@student.lnu.se
🎓 Linnaeus University
This project was created as part of Laboration 3 (L3) in course 1dv610 at Linnaeus University, focusing on:
- Clean Code principles (Robert C. Martin)
- Object-oriented programming
- Software design patterns
- Code quality and maintainability