Welcome to SupaSaaS

Hey there, Ant here 👋

I have designed this boilerplate to be as easy to use as possible, with a focus on developer experience with clean, concise and well-commented code that is modular and easy to extend.

For those of you who are newer to React or NextJs development, then SupaSaaS is a great place to start from and learn how to build a SaaS app from scratch.

If you're an experienced developer, then you'll find the boilerplate easy to understand, extend and customize.

My own experience of boilerplates has always left me somewhat unsatisfied, oftentimes with lots of bloated code and features that I don't need. For example, a boilerplate might offer Plausible and Pirsch analytics, but I had to go and remove the Plausible code if I wanted to use Pirsch.

Another annoying thing I found with boilerplates was how poorly they were set up to handle SEO. Sure they handled the BASIC stuff like meta titles and descriptions, but not the more advanced stuff like Open Graph images for social sharing, or Twitter card meta tags, or even structured data schema snippets for Google. These are HUGE for SEO and can make a big difference in how your app ranks in search engines and ultimately how many users you get.

I wanted to create a boilerplate that was clean, easy to use and more importantly, easy to cherry pick exactly what you want in your app, and that's what I've done with SupaSaaS.

Here's an overview of the basic setup to get you up and running locally, it's super easy and you'll be shipping features for your next app in no time.

How to get started

Clone the repository

First things first, once you have purchased the boilerplate you'll need to clone the repository to your local machine. You can do this by running the following command in your terminal.

git clone `https://github.com/supasaas-boilerplate/starter.git`

Remove the remote origin

You want to disconnect your local copy of the repository from the original repository on GitHub. This is because you'll be pushing your changes to your own repository. You can do this by running the following command in your terminal.

git remote remove origin

Create a new .env file

You'll need to create a new .env file from the example. This file will contain your environment variables. You can do this by running the following command in your terminal.

cp .env.example .env

Install dependencies

You'll need to install the project dependencies. You can do this by running the following command in your terminal.

npm install

Start the development server

You're all set! You can now start the development server. You can do this by running the following command in your terminal.

npm run dev

Configuration

The config for your app is stored in the centralized folder src/config. Here you'll find all the configuration files for your app. You can easily modify these files to suit your needs.

They are:

• auth.ts
• config.ts
• pricing.ts
• routes.tsx

auth.ts

This file is where the NextAuth configuration is stored. You can update this file to add new social auth providers, or add custom event handling.

config.ts

Here you can update the main configuration for your app. You can update the app name, description, and other settings here.

@/config/config.ts
// App and founder details
export const appName = "My SaaS";
export const founderName = "John Doe";
export const founderTwitterLink = "https://x.com/jdoe123";
export const founderTwitterHandle = "@jdoe123";
export const founderAvatar = "/johndoe.png";
export const founderRole = "Founder";
export const emailFrom = "john@doe.com";
export const discordLink = "https://discordlink";
export const youTubeLink = "https://youtube.com/johndoe";
export const supportEmail = "support@doe.com";

// SEO metadata
export const metaPageTitle = "SEO Friendly Meta Title.";
export const metaPageDescription =  "Seo friendly meta page description.";
export const metaKeywords = ["Nextjs boilerplate", "Saas starter"];
export const openGraphImageUrl = "https://myapp.com/images/og-image.jpg";
export const blogOpenGraphImageUrl = "https://myapp.com/images/og-image.jpg";

// Website details
export const googleSiteVerificationId = "";
export const websiteUrl = process.env.NEXT_PUBLIC_SITE_URL || "localhost:3000";
export const signInCallbackUrl = "/dashboard";

// Example plan name for feature gating
export const requiredPlan = "Pro";

// Lemon Squeezy affiliate program
export const affiliateProgramLink = "https://johndoe.lemonsqueezy.com/affiliates";

// Canny feedback url
export const cannyUrl = "https://johndoe.canny.io";

pricing.ts

Here you can update the price plans for your app. The payments integration built into SupaSaas is smart enough to handle whether these plans are subscription-based or one-time payments.

Just set your pricing and the apps webhook integrations with Stripe and Lemon Squeezy will handle the rest.

@/config/pricing.ts
// Pricing details
export const affiliatePercent = 40;
export const recommendedText = "Most Popular";

// Pricing for one-time payments
export const pricingPlans = [
  {
    title: "Basic",
    available: true,
    recommended: true,
    price: 99,
    priceCompare: 199,
    description: "Plan description",
    checkoutUrl: "#",
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
  {
    title: "Pro",
    available: true,
    recommended: false,
    price: 149,
    priceCompare: 299,
    description: "Plan description",
    checkoutUrl: "#",
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
];

routes.tsx

This file is where you can update the navigation menu for the apps dashboard sidebar.

You can edit or add new routes, headings, dividers and external links.

@/config/routes.tsx
export const dashboardMenu = [
  {
    view: "/my-dashboard",
    name: "Dashboard",
    icon: <CircleUser className="size-4" />,
    component: <DashboardPage />,
    type: "link",
  },
  {
    view: "",
    name: "Protected Pages",
    icon: null,
    component: null,
    type: "heading",
  },
  {
    view: "",
    name: "divider",
    icon: null,
    component: null,
    type: "divider",
  },
  {
    view: "/protected-view",
    name: "Private (Pro Plan Required)",
    icon: <Eye className="size-4" />,
    component: <ProtectedView />,
    type: "link",
  },
  {
    view: "",
    name: "Resources",
    icon: null,
    component: null,
    type: "heading",
  },
  {
    view: "",
    name: "divider",
    icon: null,
    component: null,
    type: "divider",
  },
  {
    view: "/docs",
    name: "Docs",
    icon: <Book className="size-4" />,
    component: null,
    type: "link",
  },
  {
    view: "/canny",
    name: "Feedback",
    icon: <Lightbulb className="size-4" />,
    component: null,
    type: "external-link",
    href: `${cannyUrl}`,
  },
  {
    view: "/affiliate",
    name: "Affiliate Program",
    icon: <Handshake className="size-4" />,
    component: null,
    type: "link",
  },
];

Project structure

The project structure is as follows:

📦src
 ┣ 📂actions        // NextJs server actions
 ┣ 📂app
 ┃ ┣ 📂(dashboard)  // Route grouping to seperate app dashboard
 ┃ ┣ 📂(frontend)   // and landing page layouts
 ┃ ┣ 📂api          // API routes
 ┣ 📂components
 ┣ 📂config
 ┣ 📂hooks
 ┣ 📂lib
 ┣ 📂store          // Zustand state management
 ┣ 📂styles
 ┣ 📂types
 ┗ 📂__tests__      // Jest unit testing and Playwright e2e testing