Sveltekit Netlify Stripe Fauna Example screenshot

Sveltekit Netlify Stripe Fauna Example

Author Avatar Theme by Claytonfarr
Updated: 11 Jul 2024
85 Stars

SaaS boilerplate example with SvelteKit + Tailwind + Netlify Identity (GoTrue) + Stripe + Fauna.

Categories

Overview

The SaaS starter boilerplate is an elegant and user-friendly serverless app that can serve as a reference or starting point for building a SaaS application. The focus of this project was to utilize modern tooling and infrastructure, while keeping the number of platforms and expertise required to a minimum. Although there are a few remaining items to add, this boilerplate provides a solid starting point for working with the included tools and platforms.

Features

Tools & Platforms

  • SvelteKit: A lightweight framework for building web applications.
  • Netlify Identity authentication / GoTrue: A user authentication and management system.
  • Stripe subscriptions & customer portal: Integration with Stripe for handling subscription billing and management.
  • Fauna GraphQL database: A flexible and scalable database for storing user data.
  • Tailwind: A utility-first CSS framework for creating customizable designs.
  • SveltePreprocess for Pug markup: Allows for using the Pug templating language within Svelte components.
  • Deployment as serverless app on Netlify via SvelteKit’s Netlify Adapter: Enables easy deployment of the app on Netlify.

Functionality

  • Authentication: Supports authentication via JWT cookie and Netlify Identity / GoTrue. Includes email templates and account management UX.
  • Helper methods: Provides helper methods to access the GoTrue and Fauna APIs without a JavaScript client.
  • Subscription billing and management: Allows users to manage their subscriptions and billing methods using Stripe.
  • User database: Stores user data using the Fauna GraphQL API.
  • Responsive layouts: Creates responsive layouts using SvelteKit and Tailwind.
  • Configurable color system: Allows for customization of the app’s color scheme through Tailwind.
  • Configurable form components: Provides flexible, browser-based validation using the Constraint Validation API.
  • Configurable modal and notifications components: Allows for easy customization of modals and notifications.
  • SvelteKit serverless functions: Supports the use of serverless functions (endpoints) with SvelteKit.

Installation

To install the SaaS starter boilerplate, follow these steps:

  1. Clone the repository:
git clone <repository-url>
  1. Install the required dependencies:
npm install
  1. Set up the necessary environment variables:
# Example .env file
GOOGLE_ANALYTICS_ID=your-google-analytics-id
STRIPE_SECRET_KEY=your-stripe-secret-key
FAUNA_SECRET_KEY=your-fauna-secret-key
  1. Start the development server:
npm run dev
  1. Access the app in your browser at http://localhost:5000.

Summary

The SaaS starter boilerplate is a comprehensive solution for building a serverless SaaS application. It offers a wide range of features, including user authentication, subscription management, flexible layouts, and customizable components. The integration with popular tools and platforms like SvelteKit, Netlify, Stripe, and Fauna makes it easy to get started and create a scalable application. While there are some suggested additions and improvements, the boilerplate provides a solid foundation and serves as a valuable reference for building upon.