Next 15 Mongodb SaaS Template

Overview

The SaaS Starter Template is a powerful and modern boilerplate designed to kickstart your next software-as-a-service (SaaS) project. Built with the latest technologies and best practices, this template includes all the essential features and components to help you rapidly develop and deploy your idea.

Key Features

• Latest Next.js 15: Leverages the cutting-edge features of Next.js 15 for server-side rendering and optimal performance.
• TypeScript Integration: Ensures type safety and robust code, making development faster and less error-prone.
• Tailwind CSS: Provides a utility-first CSS framework for building modern and responsive user interfaces.
• ShadCN Components: Includes pre-designed and customizable components to speed up UI development.
• Stripe Integration: Seamlessly handles payment processing for subscriptions or one-time payments.
• Role-Based Authentication: Implements secure user and admin role management with next-auth.
• Prisma ORM with MongoDB: Offers a scalable and efficient database setup with Prisma and MongoDB.
• Resend for Transactional Emails: Simplifies email management with reliable and efficient delivery.
• Cloudinary for File Storage: Handles image and file storage with powerful APIs and optimization.
• Prebuilt User Dashboard: A feature-rich dashboard with reusable components for user management and analytics.
• Modern Landing Page: A clean, professional landing page with SEO-friendly tags and all essential sections.
• SEO Optimization: Includes meta tags and structured data to enhance discoverability.

---

Features in Detail

Next.js 15

Next.js 15 brings unmatched performance and developer experience with:

• Server Actions for direct database interaction.
• Improved routing with App Router.
• Enhanced image and font optimization.
• Built-in middleware for request handling.

TypeScript

• Type Safety: All components and API routes are strictly typed.
• Enhanced Developer Experience: Autocomplete and error detection during development.
• Scalability: Ideal for long-term, complex projects.

Tailwind CSS

• Responsive Design: Easily create mobile-friendly layouts.
• Customizable: Extend the default theme for unique designs.
• Fast Development: Use predefined utility classes for rapid styling.

ShadCN Components

• Includes pre-styled and customizable UI elements.
• Covers common use cases like modals, buttons, forms, and tables.
• Fully accessible and compatible with Tailwind CSS.

Stripe Integration

• Subscription Management: Supports recurring and one-time payments.
• Secure Transactions: Handles sensitive payment data with Stripe’s PCI-compliant infrastructure.
• Easy Configuration: Prebuilt hooks and API routes for seamless integration.

Role-Based Authentication

• next-auth: Implements secure and scalable user authentication.
• Role Management: Differentiates between normal users and admins.
• Session Handling: Built-in session management with JSON Web Tokens (JWT).

Prisma ORM with MongoDB

• Data Modeling: Simplifies database schema definition with Prisma schema.
• Efficient Queries: Enables powerful and optimized database queries.
• Migration Support: Easy database migrations for evolving schemas.

Resend for Transactional Emails

• Email Delivery: Reliable and scalable email delivery for sign-ups, notifications, and more.
• Easy Integration: Configured with environment variables for seamless use.

Cloudinary for File Storage

• Media Management: Upload and manage images and other files effortlessly.
• Optimization: Delivers optimized and responsive media for all devices.

Prebuilt User Dashboard

• Includes reusable components for:
  • User profiles
  • Account settings
  • Data tables
  • Notifications
• Fully responsive and mobile-friendly.

Modern Landing Page

• Sections Included:
  • Hero section
  • Features overview
  • Pricing plans
  • Testimonials
  • FAQ
  • Contact form
• Customizable: Modify sections to fit your project’s branding.

SEO Optimization

• Preconfigured meta tags, sitemap, and robots.txt.
• Schema.org structured data for better search engine understanding.
• Fast-loading and mobile-friendly design.

---

Getting Started

Prerequisites

• Node.js >= 18
• npm
• MongoDB Atlas or local MongoDB instance
• Stripe account

Installation

1. Clone the repository:

   git clone <repository-url>
   

2. Navigate to the project directory:

   cd saas-starter-template
   

3. Install dependencies:

   npm install
   

4. Set up environment variables: Create a .env file in the root directory and include the following:

   DATABASE_URL=
   GOOGLE_CLIENT_ID=
   GOOGLE_CLIENT_SECRET=
   AUTH_SECRET=
   STRIPE_SECRET_KEY=
   STRIPE_WEBHOOK_SECRET=
   NEXT_PUBLIC_APP_URL=
   NEXTAUTH_URL=
   RESEND_API_KEY=
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
   CLOUDINARY_CLOUD_NAME=
   CLOUDINARY_API_KEY=
   CLOUDINARY_API_SECRET=
   NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=
   NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL=
   NEXT_PUBLIC_TINY_MCE_API_KEY=
   GITHUB_TOKEN=
   

5. Run database migrations:

   npx prisma migrate dev
   

6. Start the development server:

   npm run dev
   

---

Folder Structure

template/ 
├── src/
│   ├── app/
│   │   ├── (landing)/
│   │   │   ├── templates/
│   │   │   │   ├── [id]/
│   │   │   │   │   ├── _components/
│   │   │   │   │   │   └── TemplateClient.tsx
│   │   │   │   │   └── page.tsx
│   │   │   ├── layout.tsx
│   │   │   ├── pricing/
│   │   │   │   └── page.tsx
│   │   │   ├── support/
│   │   │   │   └── page.tsx
│   ├── api/
│   │   ├── webhooks/
│   │   │   ├── stripe/
│   │   │   │   └── route.ts
│   ├── components/
│   │   ├── ui/
│   │   │   ├── button.tsx
│   │   │   ├── badge.tsx
│   │   │   ├── card.tsx
│   ├── lib/
│   │   ├── prisma.ts
│   ├── types/
│   │   ├── Template.ts
│   │   ├── User.ts
│   ├── utils/
│   │   ├── inviteToGithubOrg.ts
├── public/
│   ├── images/
│   │   └── logo.png
├── .env
├── .gitignore
├── next.config.js
├── package.json
├── README.md
├── tsconfig.json

---

Customization

Updating the Landing Page

Modify the components in /src/app/(landing)/ to fit your branding and content needs.

Adding New Routes

Create new routes under the /src/app/ directory. Use API routes in /src/api/ for backend logic.

Extending the Dashboard

Add new components in /src/components/ui/ and include them in the appropriate layout or feature.

---

Deployment

1. Build the application:

   npm run build
   

2. Deploy on your preferred platform (e.g., Vercel, AWS, DigitalOcean).
3. Ensure all environment variables are correctly set in the deployment environment.

---

Conclusion

This SaaS Starter Template is your go-to solution for quickly launching SaaS applications. It combines modern technologies, best practices, and prebuilt features to save development time and effort. Whether you’re building a subscription service, an admin panel, or any other web-based project, this template has got you covered.