DOCSEARCHbyAlgolia
Submit Docs

Open SaaS Starter Kit

repository·main·Indexed 12 days ago

https://github.com/wasp-lang/open-saas

An open-source, full-stack SaaS starter kit built on the Wasp framework. It provides integrated authentication, type safety, and deployment capabilities using a stack that includes React, NodeJS, Prisma, Astro, Starlight, Tailwind CSS, and ShadCN UI. The kit includes built-in support for payments (Stripe, Polar.sh, Lemon Squeezy), AI integration, and a documentation/blog system.

Tokens
59K
Snippets
166
Records
266
Agent score
94%

What's inside Open SaaS

  1. Overview of Open SaaS Template

    main

    Open SaaS is a fully open-source, free-to-use template designed to jumpstart SaaS development. It provides a pre-configured stack of powerful tools and frameworks to handle common SaaS requirements like payments, authentication, and analytics.

    Core Technology Stack

    • Framework: Wasp (Full-stack React, NodeJS, Prisma)
    • Documentation & Blog: Astro with Starlight theme
    • Payments: Stripe, Lemon Squeezy, or Polar
    • Analytics: Plausible or Google Analytics
    • AI/LLM: OpenAI
    • Storage: AWS S3
    • Email: SendGrid, MailGun, or SMTP
    • Styling: TailwindCSS and ShadCN

    Key Features via Wasp

    Because the template is built on Wasp, you benefit from:

    • Full-stack Authentication: Email verification and social auth.
    • End-to-end Type Safety: Automatic type inference for backend functions on the frontend and type-safe navigation links.
    • Jobs: Background cron jobs and queues defined via the configuration file.
    • One-command Deployment: Easy deployment to Fly.io, Railway, Netlify, Cloudflare, or Heroku.

  2. Overview of Admin Dashboard features

    main

    The Admin dashboard at /admin provides two primary views:

    Analytics Dashboard

    Displays aggregated metrics from various sources:

    • Payment Processor: Total revenue and daily revenue for the past week.
    • Analytics (Google or Plausible): Total page views, percentage change in views, and top sources/referrers with unique visitor counts.
    • Database: Total registered users, total paying users, and their respective daily changes.

    Users Page

    Allows administrators to manage and monitor the user base. You can search and filter users by:

    • Email address
    • Subscription/payment status
    • Admin status

  3. Overview of Open SaaS technology stack

    main

    Open SaaS is a full-stack template built on the following core technologies:

    • Framework: Wasp (React, NodeJS, Prisma)
    • Documentation/Blog: Astro with the Starlight template
    • Payments: Stripe, Polar.sh, or Lemon Squeezy
    • UI/Styling: ShadCN UI and Tailwind CSS
    • AI Integration: AI-ready with custom plugins/rules for tools like Claude Code and Cursor; includes OpenAI API examples
    • Database/Storage: Prisma ORM and AWS S3 for file uploads
    • Email: SendGrid, MailGun, or SMTP
    • Analytics: Plausible or Google Analytics
    • Testing: Playwright for end-to-end tests

  4. Overview of the Open SaaS Tech Stack

    main

    Open SaaS is a fully open-source, free-to-use SaaS template built using the following core technologies:

    Core Frameworks

    • Wasp: The primary full-stack framework (React, NodeJS, Prisma) used to build the application logic.
    • Astro & Starlight: Used for the documentation and blog components of the project.

    Integrated Services

    • Payments: Supports Stripe, Lemon Squeezy, or Polar.
    • Analytics: Supports Plausible or Google Analytics.
    • AI/LLM: Integrated with OpenAI.
    • Storage: Uses AWS S3 for file uploads.
    • Email: Supports SendGrid, MailGun, or standard SMTP.
    • Styling: Built with TailwindCSS and ShadCN.

    Key Wasp Features Leveraged

    • Full-stack Authentication: Includes email verification and social authentication.
    • End-to-end Type Safety: Automatic type inference for backend functions on the frontend and type-safe navigation links.
    • Jobs: Background cron jobs and queues defined via the configuration file.
    • One-command Deploy: Deployment support for Fly.io, Railway, Netlify, Cloudflare, and Heroku.

  5. Overview of Admin Dashboard pages

    main

    The Admin dashboard provides two primary views:

    Analytics Dashboard

    Displays aggregated metrics including:

    • Payments: Total revenue and daily revenue for the past week.
    • Analytics: Total page views, percentage change in views, and top referrers.
    • Users: Total registered users, total paying users, and their respective daily changes.

    Users

    A management interface to view all registered users. You can search and filter the user list by:

    • Email address
    • Subscription/payment status
    • Admin status

  6. Project Structure for Open SaaS Docs and Blog

    main

    The documentation and blog are built using Astro and Starlight. The project follows this directory structure:

    • src/content/docs/: Contains .md or .mdx files. Each file is exposed as a route based on its filename.
    • src/content/docs/blog/: Specifically for blog posts. It is recommended to use .mdx files here.
    • src/assets/: For images and videos used in guides and posts (referenced via relative paths).
    • public/: For static assets like favicons and banner images.
    • public/banner-images/: Specifically for social media preview images and blog cover images (must use .webp extension).
    • src/components/: Contains custom Astro components.
    .
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── content/
│   │   ├── docs/
│   │   │   ├── blog/
│   │   │   ├── guides/
│   │   │   └── ...
│   │   └── config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json

  7. What is llms.txt and why does it matter for vibe coding?

    main

    An llms.txt file is a structured documentation file in plain text format specifically designed for Large Language Models (LLMs).

    Purpose: It provides AI coding tools (like Claude Code) with up-to-date, concise knowledge about the frameworks and tools you are using. This helps reduce hallucinations and prevents the AI from suggesting outdated code.

    Usage: Many developer tools now support this. You can check if a tool provides one by appending /llms.txt to its documentation URL.

  8. Implement Subscription Payments

    main

    Open SaaS supports Stripe, Lemon Squeezy, and Polar. The payment flow follows these steps:

    1. Checkout Session: A server-side action creates a session.
    2. Redirect: The user is sent to the payment processor.
    3. Webhook: The processor sends a webhook event to your app.
    4. Update: Your server handles the webhook to update the user's subscription status.

    Core logic is located in src/payment/paymentProcessor.ts (the PaymentProcessor object) and src/payment/operation.ts (checkout session logic).

  9. Compare Open SaaS with paid boilerplates

    main

    When choosing a SaaS boilerplate, consider cost, deployment flexibility, and AI-friendliness.

    Open SaaS vs. Paid Boilerplates (e.g., ShipFast, Supastarter):

    • Price: Open SaaS is free and open-source, whereas paid options range from $250-$800+.
    • Auth: Open SaaS includes built-in auth (email/password, Google, GitHub, etc.) without third-party providers. Paid options often rely on services like Clerk or Supabase.
    • Deployment: Open SaaS supports Railway, Fly.io, or any VPS (no vendor lock-in). Paid options typically lean towards Vercel + Supabase.
    • Codebase Structure: Open SaaS uses a single app with feature-based organization and colocated fullstack code. Paid options often use monorepos (Turborepo) or separate third-party libraries for each service, which increases complexity for AI tools to navigate.

  10. Configure SEO and Discoverability

    main

    Open SaaS uses three mechanisms to ensure SEO friendliness:

    1. Meta Tags: Managed in src/client/head.wasp.ts (Title, Description, Open Graph, Twitter cards).
    2. JSON-LD Schema: Managed in src/landing-page/components/SchemaMarkup.tsx to provide structured data for search engines and LLMs.
    3. Prerendering: Converts React marketing pages into static HTML at build time so crawlers can index content without executing JavaScript.

  12. Configure the application using main.wasp

    main

    Open SaaS is built on the Wasp framework. The main.wasp file located in the app/ root is the central configuration file where you define the application's structure. The Wasp compiler uses this file to manage boilerplate for:

    • Auth: Authentication flows and user management.
    • Routes and Pages: Application navigation and routing.
    • Prisma Database Models: Data entities and schema.
    • Operations: Data read and write functions.
    • Background Jobs: Asynchronous tasks.
    • Email Sending: Configuration for email services.