Overview

SaasKit Pro is a production-ready, full-stack SaaS starter kit built with Next.js 15 and TypeScript. It provides everything you need to launch a subscription-based SaaS platform in days instead of months.

This complete solution includes authentication, payment processing, subscription management, usage tracking, admin dashboard, email notifications, and much more. Built with modern best practices and ready for production deployment.

Perfect for: Developers who want to build their complete SaaS business on top of a solid foundation. Customize the code, add your features, and launch your product faster than building from scratch.

🚀 Key Features

  • Beautiful SaaS Landing Page

    Modern, conversion-optimized landing page

  • Super Admin Panel

    Powerful dashboard with analytics and management

  • Subscription Management

    Complete plan management with unlimited tiers

  • User Dashboard

    Comprehensive portal with billing and usage tracking

  • Login with Google

    OAuth authentication with NextAuth.js

  • Full Stripe Integration

    Complete payment processing with webhooks

  • Automatic Subscription Renewal

    Seamless recurring billing automation

  • Smart Proration System

    Fair billing for upgrades/downgrades with confirmations

  • Customizable Sign Up & Login Pages

    Full control over authentication pages from admin

  • Smart Usage Tracking

    Plan-based limits with automatic monthly resets

  • Email System

    Beautiful templates for transactional emails

  • Content Management

    Dynamic CMS for easy customization

  • Responsive Design

    Mobile-first with dark mode support

  • Production Ready

    Security best practices and optimizations

  • AI-Powered Features

    AI content generator, chatbot, analytics, and plan recommendations

  • Support Ticket System

    Complete customer support with ticket management, status tracking, and threaded conversations

Installation

1

Extract Files

Extract the downloaded package to your desired location.

unzip saaskit-pro.zip
cd saaskit-pro
2

Install Dependencies

Install all required npm packages.

npm install
3

Set Up Environment Variables

Create a .env.local file in the root directory with these minimal required variables:

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

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=generate-random-secret-here

# Google OAuth (optional)
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

# OpenAI API Key (for AI features - optional but recommended)
OPENAI_API_KEY=your-openai-api-key-here

Important: Stripe and Email settings are configured through the admin panel (Super Admin → Settings), not in environment variables. See the Configuration section for details.

4

Set Up MongoDB

Make sure MongoDB is running on your system, or use MongoDB Atlas cloud service.

Tip: For local development, install MongoDB Community Edition or use MongoDB Atlas (free tier available).

5

Seed the Database

Initialize the database with demo data including users, plans, and page content.

npm run seed

Demo Credentials Created:

Super Admin: admin@saaskit.com / admin123
Regular User: user@saaskit.com / admin123

⚠️ Important: Change these passwords after first login!

6

Run the Application

Start the development server.

npm run dev

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

Access Points:

Configuration

Plan Configuration

Default plans are configured in the database. Access admin panel to customize:

  • Login as Super Admin → Go to Plans section
  • Create or edit subscription plans
  • Set pricing, features, and limits

Quick Start Guide

🚀 Get Your SaaS Running in 5 Minutes

1️⃣

Install: Run npm install and set up your environment variables

2️⃣

Seed: Run npm run seed to initialize database with demo data

3️⃣

Start: Run npm run dev and login with demo credentials

4️⃣

Configure: Set up Stripe keys and email settings (Login as Super Admin → Settings)

5️⃣

Customize: Edit landing page, login, and signup content (Login as Super Admin → Content)

📋 Demo Credentials (Created by seed script):

Super Admin:

Email: admin@saaskit.com

Password: admin123

Regular User:

Email: user@saaskit.com

Password: admin123

⚠️ Security: Change passwords after first login!

Integrations

SaasKit Pro comes with built-in integrations for Stripe, SMTP email, and Google OAuth. All integrations are configured through the admin panel for easy management.

Stripe

Payment processing, subscriptions, and billing automation

SMTP

Transactional emails, notifications, and communications

Google

OAuth authentication with Google accounts

Stripe Integration

Configure Stripe for payment processing:

  1. Create a Stripe account at stripe.com
  2. Get your API keys from Stripe Dashboard → Developers → API keys
  3. Login as Super Admin → Go to Settings
  4. Navigate to Stripe Integration section
  5. Enter your Stripe credentials (test and live keys)
  6. Configure webhook at https://yourdomain.com/api/webhooks/stripe
  7. Test the connection using the test button

Note: Use test mode for development and switch to live mode for production.

SMTP Email Integration

Configure SMTP for sending transactional emails:

  1. Login as Super Admin → Go to Settings
  2. Navigate to Email Settings section
  3. Enter your SMTP configuration (host, port, username, password)
  4. Set the "From" email and name
  5. Test email delivery using the "Send Test Email" button
  6. Save the settings

Gmail Example:

  • SMTP Host: smtp.gmail.com
  • SMTP Port: 587
  • Enable 2-factor authentication and create an app password

Google OAuth Integration

Enable Google sign-in for your users:

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the Google+ API
  4. Create OAuth Client ID (Web application)
  5. Add redirect URI: http://localhost:3000/api/auth/callback/google
  6. Copy Client ID and Client Secret
  7. Add to your .env.local file: 
    GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
  8. Restart your development server

Important: Update the redirect URI with your production domain when deploying.

📚 Detailed Documentation

For detailed setup instructions and troubleshooting, see:

Features

Beautiful SaaS Landing Page

Modern, conversion-optimized landing page with hero section, features, pricing, and testimonials

Super Admin Panel

Powerful admin dashboard with user management, analytics, content management, and system settings

Subscription Management

Complete plan management system with unlimited subscription tiers, features, and usage limits

User Dashboard

Comprehensive user portal with profile management, billing, usage tracking, and account settings

Login with Google

OAuth authentication supporting Google sign-in along with email/password via NextAuth.js

Full Stripe Integration

Complete payment processing with subscriptions, invoices, automated billing, and webhook handling

Automatic Subscription Renewal

Seamless recurring billing with automatic subscription renewals and payment processing

Smart Proration System

Automatic prorated billing for fair upgrades/downgrades with confirmation modals and scheduled transitions

Customizable Sign Up & Login

Full control over authentication page content, branding, features, and messaging from admin panel

Smart Usage Tracking

Plan-based limits, usage monitoring, automatic monthly resets, and usage warnings

Email System

Beautiful email templates for welcome emails, invoices, password resets, and notifications with SMTP support

Content Management

Dynamic content management system for easy customization of landing, login, and signup pages without code changes

Responsive Design

Mobile-first design with dark mode support that works perfectly on all devices

Production Ready

Security best practices, error handling, deployment configurations, and performance optimizations included

AI Content Generator

Generate landing page content, blog posts, testimonials, and marketing copy with AI-powered content creation tool

AI-Powered Chatbot

Knowledge base-powered customer support chatbot with clickable suggested questions, context-aware responses, and admin-managed knowledge base

AI Analytics & Insights

Intelligent analytics with actionable insights, growth recommendations, risk identification, and opportunity analysis for both admin and users

AI Plan Recommendations

Personalized subscription plan recommendations based on usage patterns, with urgency indicators and cost-benefit analysis

Support Ticket System

Complete customer support system with ticket creation, status tracking, priority management, and threaded conversations for both users and admins

🤖 AI-Powered Features

SaasKit Pro includes four powerful AI features powered by OpenAI to enhance your SaaS platform with intelligent automation and insights.

📋 Prerequisites:

Add OPENAI_API_KEY=your-key-here to your .env.local file to enable all AI features.

AI Content Generator

Available in Super Admin → Content Management

Generate high-quality content for your landing page, blog posts, testimonials, and marketing materials with AI assistance.

Features:

  • Generate landing page hero sections
  • Create feature descriptions
  • Write blog posts
  • Generate customer testimonials
  • Create pricing plan descriptions
  • Multiple tone options (professional, friendly, casual)
  • Adjustable content length
  • Automatic saving to CMS

Usage:

Navigate to Super Admin → Landing Page → Content Management, then use the AI Content Generator widget to create content for any section.

AI-Powered Customer Support Chatbot

Available to all users | Managed in Super Admin → Chatbot

Intelligent customer support chatbot powered by knowledge base, providing instant answers to user questions with clickable suggested questions.

Features:

  • Knowledge base-powered responses
  • Clickable suggested questions
  • Context-aware conversations
  • User account information integration
  • Plan and usage awareness
  • Minimizable floating widget
  • Conversation history
  • Professional support responses

Admin Management:

Super Admin → Chatbot allows you to:

  • Configure chatbot name and theme
  • Set welcome message
  • Manage knowledge base (FAQs, docs, URLs)
  • Customize system prompts
  • Upload files for knowledge base
  • Scrape content from URLs

Note: Chatbot only answers questions covered in the knowledge base, ensuring accurate and controlled responses.

AI Usage Analytics & Insights

Available in Super Admin → AI Analysis & User → AI Analytics

Get intelligent insights and actionable recommendations based on your platform's analytics data or personal usage patterns.

Admin Features:

  • Platform-wide analytics insights
  • Growth opportunities identification
  • Risk identification
  • Revenue optimization suggestions
  • User engagement analysis
  • Actionable recommendations

User Features:

  • Personal usage pattern analysis
  • Usage optimization suggestions
  • Plan recommendations
  • Account insights
  • Personalized suggestions

AI-Recommended Plan Upgrades

Available in User → Billing Page

Get personalized subscription plan recommendations based on your usage patterns, with urgency indicators and cost-benefit analysis.

Features:

  • Personalized plan recommendations
  • Usage pattern recognition
  • Urgency indicators (low/medium/high)
  • Cost-benefit analysis
  • Alternative plan suggestions
  • Direct upgrade links
  • Button-triggered loading (not automatic)

Usage:

Navigate to User Dashboard → Billing, then click "Get Recommendations" button to receive AI-powered plan upgrade suggestions based on your current usage.

🎫 Support Ticket System

SaasKit Pro includes a complete support ticket system that allows users to create support tickets and super admins to manage and respond to them. This provides a professional customer support workflow integrated directly into your SaaS platform.

User Features

Available in User Dashboard → Support Tickets

Features:

  • Create new support tickets with subject and description
  • Set ticket priority (low, medium, high, urgent)
  • Add optional category for better organization
  • View all tickets with status badges
  • Search and filter tickets by status
  • View ticket details and conversation history
  • Reply to tickets and continue conversations
  • Track ticket status in real-time

Ticket Status:

  • Open - Newly created ticket
  • In Progress - Admin is working on it
  • Resolved - Issue has been resolved
  • Closed - Ticket is closed

Ticket Priority:

  • Low - General inquiries
  • Medium - Standard support requests
  • High - Important issues
  • Urgent - Critical issues requiring immediate attention

Admin Features

Available in Super Admin → Support Tickets

Management Features:

  • View all support tickets from all users
  • Ticket statistics dashboard (total, open, in progress, resolved, closed)
  • Search tickets by user name, email, or ticket number
  • Filter tickets by status and priority
  • View detailed ticket information
  • Respond to tickets with admin replies
  • Update ticket status (open, in_progress, resolved, closed)
  • Change ticket priority

Workflow:

  • When admin replies, ticket status automatically changes to "in_progress" if it was "open"
  • Admins can manually update ticket status at any time
  • All replies are tracked with timestamps
  • Last replied date and author are displayed
  • Threaded conversation view for easy tracking
  • Color-coded status badges for quick identification

Technical Details

Database Model: Support tickets are stored in MongoDB with full conversation history, status tracking, and metadata.

API Endpoints: RESTful API endpoints for creating, reading, updating tickets, and managing replies.

Real-time Updates: Ticket status and replies are updated in real-time for both users and admins.

Unique Ticket Numbers: Each ticket gets a unique ticket number (e.g., TICKET-000001) for easy reference.

Access Control: Users can only view their own tickets, while super admins can view and manage all tickets.

Billing & Proration System

SaasKit Pro includes a sophisticated billing system with smart proration, ensuring fair billing for all subscription changes. The system handles upgrades, downgrades, and cancellations seamlessly with Stripe integration.

Plan Upgrades

When a user upgrades their plan:

  • Prorated Charge: User pays only for the remaining time at the new rate
  • Credit Applied: Unused amount from old plan is credited
  • Immediate Access: User gets upgraded features right away
  • Confirmation Modal: Shows exact prorated amount before charging

Example: User paid $10 for Professional plan, 15 days remain. Upgrading to $99 Enterprise plan charges: $99 - ($10 × 15/30) = $94.00

Plan Downgrades

When a user downgrades their plan:

  • End of Period: Downgrade takes effect at current subscription end date
  • No Immediate Change: User keeps current features until period ends
  • Scheduled Change: System schedules the downgrade automatically
  • Notification: User is informed about scheduled downgrade

Example: User on $99 Enterprise plan wants to downgrade to $29 Starter. They keep Enterprise until billing cycle ends, then automatically move to Starter.

How Proration Works

1 Calculate Remaining Time

System calculates how many days remain in the current billing period (e.g., 15 days out of 30).

2 Calculate Credit from Old Plan

Calculate unused portion: Old Plan Price × (Days Remaining ÷ Days in Month)

Credit = $10 × (15 ÷ 30) = $5.00

3 Calculate Prorated Amount

Subtract credit from new plan price to get the prorated charge.

Prorated Charge = $99 - $5.00 = $94.00

4 Show Confirmation & Process

Display a confirmation modal showing the exact prorated amount. On user confirmation, charge the card and upgrade immediately.

Free Plan Transitions

Paid → Free

  • • Stripe subscription cancelled at period end
  • • User retains paid features until current period expires
  • • Automatically moved to free plan after cancellation

Free → Paid

  • • Redirects to Stripe Checkout for payment
  • • Immediate access upon successful payment
  • • Full month charged (no proration needed)

✨ Billing System Features

  • Automatic proration calculation
  • Stripe webhook integration for real-time updates
  • Invoice generation and tracking
  • Plan change history tracking
  • Beautiful confirmation modals for upgrades
  • Scheduled downgrade notifications
  • Email notifications for billing events
  • Comprehensive admin billing dashboard

Tech Stack

Frontend & Backend

  • Next.js 15 with App Router
  • TypeScript
  • React 19
  • Tailwind CSS 4

Services & Integrations

  • MongoDB with Mongoose
  • Stripe for Payments
  • NextAuth.js
  • Nodemailer for Emails

Deployment

Deploy to Vercel

Vercel is recommended for Next.js applications:

  1. Push your code to GitHub
  2. Import your repository on Vercel
  3. Add all environment variables in Vercel dashboard
  4. Deploy!
npm install -g vercel
vercel --prod

Other Deployment Options

  • Netlify: Supports Next.js deployments with serverless functions
  • Railway: Easy deployment with MongoDB Atlas and Redis support
  • DigitalOcean App Platform: Managed platform for scalable apps
  • Docker: Containerized deployment option available

Project Structure

saaskit-pro/
├── app/
│   ├── api/              # API routes
│   ├── auth/             # Authentication pages
│   ├── dashboard/        # User dashboard
│   ├── saas-admin/       # Admin panel
│   └── settings/         # User settings
├── components/           # React components
├── lib/                  # Utility functions
├── models/               # Database models
├── scripts/              # Helper scripts
└── public/               # Static assets

Developer's Guide

This guide will help you understand how to customize and extend SaasKit Pro to build your own SaaS business. The codebase is fully documented and ready for customization.

Understanding the Architecture

SaasKit Pro follows Next.js 15 App Router architecture with a clear separation of concerns:

  • app/ - Routes, pages, and API endpoints
  • components/ - Reusable React components
  • lib/ - Utility functions and helpers
  • models/ - Database models (Mongoose)
  • scripts/ - Helper scripts for setup and migrations

Tip: Start by exploring app/ directory to understand the routing structure.

Adding New Features

1. Create New API Endpoints

Add new API routes in app/api/:

app/
└── api/
    └── your-feature/
        └── route.ts  # GET, POST, PUT, DELETE handlers

2. Create New Database Models

Add new models in models/:

// models/YourModel.ts
import mongoose, { Document, Schema } from 'mongoose';

export interface IYourModel extends Document {
  field1: string;
  field2: number;
  // ... your fields
}

const YourModelSchema = new Schema({
  // ... your schema
}, { timestamps: true });

export default mongoose.models.YourModel || 
  mongoose.model('YourModel', YourModelSchema);

3. Create New Pages

Add new pages in app/:

app/
└── your-page/
    └── page.tsx  # Your React component

Quick Customization Tips

Change Branding & Content

Edit settings (Login as Super Admin → Settings) or update:

  • Logo: app/layout.tsx
  • Colors: tailwind.config.ts
  • Company info: Admin settings panel
  • Login & Signup pages: (Login as Super Admin → Content)

Modify Subscription Plans

Edit plans via admin panel (Login as Super Admin → Plans) or directly in the database.

Customize Email Templates

Edit templates in lib/email.ts to match your brand.

Add New User Fields

Update the User model in models/User.ts and add form fields in profile pages.

Customization Guide

Styling & Theme

SaasKit Pro uses Tailwind CSS for styling. Customize the design:

  • Edit tailwind.config.ts for colors and theme
  • Modify component styles in components/
  • Add custom CSS in app/globals.css

Database Customization

Extend or modify database models:

  • Add fields to existing models in models/
  • Create new models for your features
  • Run migrations using provided scripts

Warning: Always backup your database before making schema changes!

API Customization

Modify or extend API endpoints:

  • Edit existing routes in app/api/
  • Add authentication checks to protected routes
  • Implement rate limiting if needed
  • Add custom validation and error handling

Extending Features

Add Additional Payment Methods

While Stripe is built-in, you can add other payment processors:

  • PayPal integration
  • Bank transfers
  • Cryptocurrency payments
  • Custom payment gateways

Create new API routes in app/api/billing/ for your payment method.

Add Third-Party Integrations

Common integrations you might want to add:

  • Slack: Notifications and team management
  • Zapier: Automation workflows
  • Google Analytics: Advanced tracking
  • AWS Services: File storage, AI services
  • SendGrid: Enhanced email deliverability

Building Custom Features

Examples of features you might want to add:

Common Additions

  • Multi-tenancy support
  • Team/organization management
  • Advanced reporting & analytics
  • White-label solutions
  • API keys management

Advanced Features

  • AI-powered features
  • Webhook integrations
  • GraphQL API
  • Real-time features (WebSockets)
  • Mobile apps (React Native)

Best Practices

  • Keep your code organized and well-commented
  • Follow TypeScript best practices
  • Test your changes thoroughly before deployment
  • Use environment variables for sensitive data
  • Version control your changes with Git
  • Document any custom features you add
  • Optimize database queries for performance
  • Implement proper error handling

API Documentation

SaasKit Pro provides a comprehensive RESTful API for managing your SaaS platform. All API endpoints require authentication via NextAuth.js session cookies.

Base URL:

https://yourdomain.com/api

Authentication:

All API requests require a valid session cookie. Users can only access their own data, while super admins can access all data.

API Authentication

All API endpoints use NextAuth.js for authentication. Requests must include a valid session cookie from an authenticated user.

Authentication Method

Authentication is handled via HTTP-only session cookies. When a user logs in through the web interface, a session cookie is automatically set.

# Example: Making an authenticated request
fetch('/api/user/profile', {
  credentials: 'include'  # Include session cookies
})

Authorization Levels

  • Public: No authentication required (e.g., content endpoints)
  • User: Requires authenticated user session
  • Super Admin: Requires authenticated user with isSuperAdmin: true

User APIs

User Profile

GET /api/user/profile

Get current user's profile information

// Response
{
  "_id": "user_id",
  "email": "user@example.com",
  "name": "User Name",
  "plan": "professional",
  "subscriptionStatus": "active",
  "currentPeriodEnd": "2025-02-01T00:00:00.000Z",
  ...
}

PUT /api/user/profile

Update user profile

// Request Body
{
  "name": "Updated Name",
  "phone": "+1234567890",
  "company": "Company Name",
  "address": "123 Main St"
}

Dashboard

GET /api/dashboard

Get dashboard statistics and data

// Response
{
  "stats": {
    "monthlyUsage": 150,
    "plan": "professional"
  },
  "invoiceStats": {
    "total": 10,
    "paid": 8,
    "pending": 2
  },
  "isSuperAdmin": false
}

Support Tickets

GET /api/support/tickets

Get user's support tickets

Query params: ?status=open

POST /api/support/tickets

Create a new support ticket

// Request Body
{
  "subject": "Ticket Subject",
  "description": "Ticket description",
  "priority": "medium",
  "category": "billing"
}

GET /api/support/tickets/[id]

Get a specific ticket

PUT /api/support/tickets/[id]

Add reply to a ticket

// Request Body
{
  "message": "Reply message"
}

Usage Tracking

GET /api/usage

Get user's usage statistics and limits

Admin APIs

⚠️ Super Admin Required: All admin APIs require super admin privileges.

Users Management

GET /api/admin/users

Get all users with pagination

GET /api/admin/users/[id]

Get a specific user

PUT /api/admin/users/[id]

Update user information

GET /api/admin/users/export

Export users data (CSV/JSON)

Plans Management

GET /api/admin/plans

Get all subscription plans

POST /api/admin/plans

Create a new plan

PUT /api/admin/plans/[id]

Update a plan

DELETE /api/admin/plans/[id]

Delete a plan

Support Tickets (Admin)

GET /api/admin/support/tickets

Get all support tickets with statistics

Query params: ?status=open&page=1&limit=10

System Statistics

GET /api/saas-admin

Get system-wide statistics and analytics

System Settings

GET /api/settings

Get system settings

POST /api/settings

Update system settings (Stripe, Email, etc.)

Billing APIs

Plans

GET /api/plans

Get all available subscription plans

Plan Upgrades

POST /api/billing/upgrade

Upgrade user's subscription plan

// Request Body
{
  "plan": "professional",
  "priceId": "price_xxx"
}

POST /api/billing/confirm-upgrade

Confirm and process plan upgrade

Invoices

GET /api/billing/invoices

Get user's invoices

GET /api/billing/invoice/[id]/download

Download an invoice

Stripe Synchronization

POST /api/billing/sync-stripe

Manually sync user's subscription with Stripe

AI APIs

📋 Prerequisites:

All AI APIs require OPENAI_API_KEY to be configured in your environment variables.

AI Content Generator

POST /api/ai/content-generator

Generate content using AI (Super Admin only)

// Request Body
{
  "type": "hero",
  "tone": "professional",
  "length": "medium",
  "context": "SaaS platform description"
}

AI Chatbot

POST /api/ai/chatbot

Send a message to the AI chatbot

// Request Body
{
  "message": "User question",
  "conversationHistory": []
}

GET /api/chatbot/suggested-questions

Get suggested questions for chatbot

AI Analytics & Insights

POST /api/ai/analytics

Get AI-powered analytics and insights

Available for both users and admins

AI Plan Recommendations

POST /api/ai/plan-recommendations

Get personalized plan upgrade recommendations

Support & Demo

Live Demo

Explore the live demo to see SaasKit Pro in action.

View Live Demo

Visit Our Website

Visit our company website to learn more about our products and services.

Visit codearistos.net

Get Support

Contact support via WhatsApp or email for assistance with implementation.

WhatsApp: +8801777024443 Email: rizvi.mahmud.plabon@gmail.com
Need Help?