A modern, full-stack web application for managing and tracking subscription services with advanced features like dark mode, CSV export, renewal countdowns, and mobile-responsive design.
- Dark/Light Mode Toggle - Seamless theme switching with system preference detection
- Responsive Design - Perfect on desktop, tablet, and mobile devices
- Smooth Animations - Framer Motion powered interactions
- Glass Morphism Effects - Modern backdrop blur and transparency
- Gradient Backgrounds - Beautiful color schemes throughout
- Add/Edit/Delete Subscriptions - Full CRUD operations
- Smart Categories - Entertainment, Music, Software, Cloud, News, etc.
- Quick Add Templates - Pre-configured popular services
- Service Icons - Visual representation for each subscription
- Status Tracking - Active, Expired, Cancelled states
- Summary Cards - Total subscriptions, active count, monthly spending
- Interactive Charts - Monthly spending trends and category breakdowns
- Renewal Countdown - Color-coded badges showing days until renewal
- Spending Analytics - Visual insights into subscription costs
- Progressive Disclosure - Shows essential info first on mobile
- Touch-Optimized - Perfect for mobile interactions
- Responsive Tables - Smart column hiding on smaller screens
- Mobile Navigation - Icon-only navigation on mobile devices
- CSV Export - Export filtered and sorted subscription data
- Data Persistence - Local storage for theme preferences
- Real-time Updates - Instant UI updates on data changes
- Error Handling - Graceful error states and user feedback
- React 19.2.0 - Latest React with modern hooks
- React Router - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Smooth animations and transitions
- Recharts - Beautiful, responsive charts
- Axios - HTTP client for API calls
- React Toastify - Elegant notifications
- Node.js - JavaScript runtime
- Express.js - Web application framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- CORS - Cross-origin resource sharing
- Cron Jobs - Automated renewal reminders
- ESLint - Code linting and formatting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
- Git - Version control
- Node.js (v14 or higher)
- MongoDB (local or cloud instance)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/smart-subscription-tracker.git cd smart-subscription-tracker -
Install backend dependencies
cd backend npm install -
Install frontend dependencies
cd ../frontend npm install -
Set up environment variables
# Create .env file in backend directory MONGODB_URI=mongodb://localhost:27017/subscription-tracker PORT=5000 JWT_SECRET=your-secret-key -
Start the development servers
# Terminal 1 - Backend cd backend npm run dev # Terminal 2 - Frontend cd frontend npm start
-
Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Clean, modern interface with summary cards
- Interactive charts showing spending patterns
- Responsive design that works on all devices
- Seamless theme switching
- Consistent dark theme across all components
- System preference detection
- Touch-optimized interface
- Progressive disclosure of information
- Smooth animations and transitions
- Automatic system preference detection
- Persistent theme storage
- Smooth transitions between themes
- Consistent color scheme throughout
- Monthly spending trends
- Category-wise breakdown
- Interactive charts with hover effects
- Quick insights and statistics
- Color-coded badges based on urgency
- Real-time countdown calculations
- Visual indicators for due dates
- Smart status management
- Export filtered and sorted data
- Professional CSV formatting
- One-click download functionality
- Date formatting for Indian locale
- Progressive disclosure of information
- Touch-optimized interactions
- Responsive table layouts
- Mobile-first design approach
POST /api/auth/register- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logout
GET /api/subscriptions- Get all subscriptionsPOST /api/subscriptions- Create new subscriptionPUT /api/subscriptions/:id- Update subscriptionDELETE /api/subscriptions/:id- Delete subscription
- Primary: Blue (#3B82F6) to Teal (#14B8A6)
- Secondary: Slate grays for text and backgrounds
- Accent: Green for success, Red for errors, Orange for warnings
- Dark Mode: Slate-900 to Slate-50 gradient
- Headings: Bold, gradient text effects
- Body: Clean, readable font stack
- Code: Monospace for technical content
- Cards: Rounded corners (rounded-xl), subtle shadows
- Buttons: Gradient backgrounds, hover effects
- Forms: Clean inputs with focus states
- Tables: Responsive, mobile-friendly layouts
cd frontend
npm run build
# Deploy the build foldercd backend
# Set environment variables
# Deploy with your preferred platform- Create a MongoDB Atlas cluster
- Update MONGODB_URI in environment variables
- Configure network access and database user
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team - For the amazing framework
- Tailwind CSS - For the utility-first CSS approach
- Framer Motion - For smooth animations
- Recharts - For beautiful chart components
- MongoDB - For the flexible database solution
- GitHub: @yourusername
- LinkedIn: Your LinkedIn Profile
- Email: your.email@example.com
Made with ❤️ and lots of ☕
⭐ Star this repo if you found it helpful!