SaaSify is a Full-Stack SaaS Subscription Management Dashboard designed to help users and teams manage, analyze, and optimize their software subscriptions with smart analytics and real-time tracking.
This project demonstrates an advanced full-stack architecture using Next.js, TypeScript, Node.js, Express, and MongoDB — combining powerful backend logic with a sleek, interactive frontend interface.
- JWT Authentication with secure cookie management
- Password Hashing using bcryptjs
- CSRF Protection for enhanced security
- Rate Limiting to prevent abuse
- Helmet.js for security headers
- CORS Configuration for cross-origin requests
- User Registration & Login with email validation
- Profile Management with editable user information
- Role-based Access Control (Admin, Manager, User)
- Secure Session Management
- Add, Edit, Delete subscriptions with full CRUD operations
- Category Organization (Entertainment, Work, Tools, Other)
- Status Tracking (Active, Paused, Canceled)
- Renewal Date Management with smart notifications
- Price Tracking with monthly/yearly calculations
- Interactive Analytics with real-time data visualization
- Spending Insights and trend analysis
- Upcoming Renewals tracking
- Category-wise Breakdown of subscriptions
- Monthly Spending Overview
- Dark/Light Mode Toggle with system preference detection
- Responsive Design for all device sizes
- Smooth Animations using Framer Motion
- Modern Glass-morphism design elements
- Intuitive Navigation with sidebar context
- RESTful API with comprehensive endpoints
- MongoDB Atlas database integration
- TypeScript for type safety
- Modular Architecture with clean code structure
- Environment Configuration management
- Error Handling with proper HTTP status codes
- React.js (Framework: Next.js 15.5.6)
- TypeScript (Type Safety)
- Tailwind CSS (Styling)
- Framer Motion (Animations)
- Lucide React (Icons)
- Next.js App Router (Routing)
- Node.js (Runtime Environment)
- Express.js (Web Framework)
- TypeScript (Type Safety)
- MongoDB + Mongoose (Database & ODM)
- JWT (Authentication)
- bcryptjs (Password Hashing)
- CORS & Helmet (Security)
- Rate Limiting (API Protection)
- MongoDB Atlas (Cloud Database)
- Mongoose ODM (Object Document Mapping)
- Schema Validation with TypeScript interfaces
- ESLint (Code Linting)
- TypeScript Compiler (Type Checking)
- tsx (TypeScript Execution)
- Git (Version Control)
Make sure you have the following installed on your system:
- Node.js (v18 or higher)
- MongoDB Atlas account
- Git
git clone https://github.com/your-username/SaaSify-Dashboard-Subscription-Management.git
cd SaaSify-Dashboard-Subscription-Management# Navigate to backend directory
cd backend
# Install dependencies
npm install
# Create environment file
cp .env.example .envConfigure your .env file:
NODE_ENV=development
PORT=4000
MONGO_URL=your_mongodb_atlas_connection_string
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRES_IN=7d
COOKIE_NAME=saasify_token
CORS_ORIGIN=http://localhost:3000Start the backend server:
# Development mode
npm run dev
# Production mode
npm run build
npm start# Navigate to frontend directory (in a new terminal)
cd frontend
# Install dependencies
npm install
# Start the development server
npm run dev- Create a MongoDB Atlas account
- Create a new cluster
- Get your connection string
- Replace
your_mongodb_atlas_connection_stringin your.envfile - The database will be automatically created when you first run the application
# Terminal 1 - Backend
cd backend
npm run dev
# Terminal 2 - Frontend
cd frontend
npm run dev# Build and start backend
cd backend
npm run build
npm start
# Build and start frontend
cd frontend
npm run build
npm start- Frontend: http://localhost:3000
- Backend API: http://localhost:4000
- API Documentation: http://localhost:4000/api
SaaSify-Dashboard-Subscription-Management/
├── backend/
│ ├── src/
│ │ ├── config/
│ │ │ └── env.ts # Environment configuration
│ │ ├── db/
│ │ │ └── mongoose.ts # Database connection
│ │ ├── middleware/
│ │ │ ├── auth.ts # JWT authentication
│ │ │ ├── csrf.ts # CSRF protection
│ │ │ └── security.ts # Security middleware
│ │ ├── models/
│ │ │ └── User.ts # User model
│ │ ├── routes/
│ │ │ ├── auth.ts # Authentication routes
│ │ │ ├── profile.ts # User profile routes
│ │ │ ├── protected.ts # Protected routes
│ │ │ └── csrf.ts # CSRF routes
│ │ └── index.ts # Main server file
│ ├── package.json
│ └── tsconfig.json
├── frontend/
│ ├── src/
│ │ ├── app/
│ │ │ ├── auth/
│ │ │ │ ├── login/
│ │ │ │ ├── signup/
│ │ │ │ └── forgot-password/
│ │ │ ├── dashboard/
│ │ │ │ ├── analytics/
│ │ │ │ ├── billing/
│ │ │ │ ├── notifications/
│ │ │ │ ├── profile/
│ │ │ │ └── settings/
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ ├── DashboardLayout.tsx
│ │ │ ├── DashboardNavbar.tsx
│ │ │ ├── Navbar.tsx
│ │ │ └── ui/
│ │ │ └── ThemeToggle.tsx
│ │ ├── contexts/
│ │ │ ├── SidebarContext.tsx
│ │ │ └── UserContext.tsx
│ │ └── lib/
│ │ ├── api.ts
│ │ └── utils.ts
│ ├── package.json
│ └── next.config.ts
├── README.md
└── LICENSE
POST /api/auth/register- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logoutPOST /api/auth/forgot-password- Password reset
GET /api/profile- Get user profilePUT /api/profile- Update user profileDELETE /api/profile- Delete user account
GET /api/protected- Access protected contentGET /api/csrf-token- Get CSRF token
- Total Subscriptions count
- Monthly Spending calculation
- Upcoming Renewals tracking
- Category Distribution charts
- Spending Trends over time
- Grid/List View toggle
- Search & Filter functionality
- Category Organization
- Status Management (Active/Paused/Canceled)
- Renewal Date Tracking
- Price Monitoring
- Responsive Design for mobile/tablet/desktop
- Dark/Light Theme with system preference
- Smooth Animations and transitions
- Intuitive Navigation
- Real-time Updates
- JWT Authentication with secure cookies
- Password Hashing using bcryptjs
- CSRF Protection for form submissions
- Rate Limiting to prevent abuse
- Input Validation with Zod schemas
- Security Headers with Helmet.js
- CORS Configuration for cross-origin requests
- Connect your GitHub repository
- Set environment variables
- Deploy automatically on push
- Connect your GitHub repository
- Configure build settings
- Deploy automatically on push
NODE_ENV=production
PORT=4000
MONGO_URL=your_production_mongodb_url
JWT_SECRET=your_production_jwt_secret
JWT_EXPIRES_IN=7d
COOKIE_NAME=saasify_token
CORS_ORIGIN=https://your-frontend-domain.com- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Vercel for deployment platform
- MongoDB for the database solution
- Tailwind CSS for the utility-first CSS framework
- Framer Motion for smooth animations
- Lucide for beautiful icons
If you have any questions or need help with the project, please:
- Check the Issues page
- Create a new issue if your problem isn't already reported
- Contact the maintainers