SaaSavant: Feature Complete SaaS Boilerplate

Table of Contents

• Introduction
• Key Features
  • Authentication and Authorization
  • Subscription Management with Stripe
  • Admin Dashboard
    • Paginated User List
    • Announcements
  • User Dashboard
    • User Account Management
    • Support Ticket System
  • Email Notifications
  • Real-time Database with Firestore
  • Responsive Design
• Technology Stack
  • Frontend
  • Backend
  • Payments
  • Email Service
  • Hosting and Deployment
  • Version Control
• Getting Started with SaaSavant
• Conclusion

Introduction

SaaSavant is a robust and feature-rich SaaS boilerplate designed to accelerate your software-as-a-service project. Built with the latest technologies and best practices, SaaSavant provides a strong foundation for any SaaS application, whether you're building a simple tool or a complex platform.

SaaSavant was built with the following technologies:

• Next.js (opens in a new tab)
• JavaScript (opens in a new tab)
• TypeScript (opens in a new tab)
• Firebase (opens in a new tab)
• Stripe (opens in a new tab)
• SendGrid (opens in a new tab)
• tailwindcss (opens in a new tab)
• Framer Motion (opens in a new tab)

Default User Flow:

By default, new users sign up with email and password which gives them access to the free tier. From their user dashboard they can upgrade to a paid tier and view their account details. Clicking Upgrade will redirect them to the Dashboard/subscribe page where they can choose a paid tier. Choosing a paid tier will create a Stripe checkout portal where they can pay for their subscription. After that, they are given access to paid features.

Key Features

Authentication and Authorization

SaaSavant includes a secure and scalable authentication system powered by Firebase Authentication. It supports a preconfigured sign-in flow using email and password.

Other authentication methods, such as Google, Facebook, and GitHub, Apple, Microsoft, and Twitter can be added as well by enabling them from the Firebase dashboard.

Additionally, role-based authorization ensures that users have access only to the parts of the application they need.

Authentication in SaaSavant is pre-configured for signing up, signing in, sending password reset emails, and deleting accounts.

Subscription Management with Stripe

SaaSavant integrates seamlessly with Stripe to handle subscription payments. The boilerplate includes:

• Subscription plans: Create and manage multiple subscription tiers.
• Automatic billing: Charge customers on a recurring basis.
• Webhooks: Listen for and handle events such as successful payments, subscription cancellations, and failed payments.
• Account Management: Allow users of your SaaS application to manage their subscription details.

Admin Dashboard

The admin dashboard in SaaSavant provides a comprehensive interface for managing your application. Key features include:

1. User List and Support Ticket Components

• User Management: View and manage all registered users.
• Support Ticket Management: View and manage all support tickets.
• Pagination: Display users or tickets in pages, with a limit of 50 users per page or 10 tickets per page. Customize these values in the respective components file.

2. Admin Announcements

• Create Announcements: Admins can create and publish announcements to be displayed to all users.
• Pagination: Display announcements in pages, with a limit of 5 announcements per page. Customize these values in the respective components file.

Newsletter

• Create Newsletters: Admins can create and publish newsletters using a rich text editor. Newsletters are sent to all users. Users can unsubscribe from the newsletter if they choose to.
• Pagination: Display newsletters in pages, with a limit of 1 newsletter per page. Customize these values in the respective components file.

User Dashboard

Each user has access to a personalized dashboard where they can:

• View Subscription Details: Access information about their current subscription and manage billing.
• Upgrade Subscription: Easily upgrade to a premium plan directly from their dashboard.
• Submit or Access Support Tickets: View their submitted support tickets and track their status.

1. User Account Management

• Upgrade to Premium: Users can upgrade their subscription plan if they haven't already.
• Manage Account: Paid tier users can manage their subscription details.
• Reset Password: Users can easily reset their password if they forget it.
• Delete Account: Users have the option to delete their account if they choose to leave the service.

2. Stripe Account Management

• Users can manage their Stripe account details and subscriptions.
• SaaSavant is preconfigured to autogenerate a Stripe URL for each user when they subscribe. This URL can be used to manage their Stripe account.
• Clicking the "Manage Subscription" button from their user account page will take them straight to their Stripe account using this Stripe URL.

Support Ticket System

SaaSavant features a built-in support ticket system that allows users to:

• Submit Tickets: Users can submit support tickets from their dashboard, including details and attachments if needed.

• Track Status: View the status of their tickets, which are initially marked as 'submitted' and can be updated to 'open' or 'resolved' by admins.

• Admin Management: Admins can view, respond to, and manage all support tickets from their dashboard.

Email Notifications

SaaSavant integrates with SendGrid to send email notifications for various events. Sample use cases include:

• Welcome emails upon registration (pre-configured and included)
• Newsletter updates (pre-configured and included)
• Support ticket updates
• App update notifications

Real-time Database with Firestore

Firestore serves as the primary database for SaaSavant, providing real-time data synchronization and offline support:

• Storing user profiles and subscription data
• Managing support tickets
• Logging user activities and interactions

SEO Optimization and Best Practices in SaaSavant

SaaSavant is designed with SEO in mind to help enhance your website's visibility and search engine ranking. Here's how SaaSavant supports SEO:

Policies Page

A cookies, terms and conditions, and privacy policy page has been pre-generated in SaaSavant. You can customize this page to suit your specific needs.

1. Built-In Next.js SEO Integration

SaaSavant leverages Next.js's powerful SEO capabilities to simplify the process of optimizing your site:

• Dynamic Metadata: Automatically generates meta tags based on your siteMetadata.js content, ensuring each page is optimized for search engines.

2. OpenGraph Tags for Social Media

SaaSavant includes support for OpenGraph meta tags to improve how your content appears on social media platforms:

• Enhanced Social Previews: Pre-configured for Facebook, Twitter, and LinkedIn.
• Consistent Appearance: Ensure a professional and cohesive look across social media channels.

3. Dynamically Generated Meta Tags

Each page in SaaSavant has dynamically generated meta tags, allowing for:

• Individual Page Optimization: Tailor meta tags for each page to better match search intent and improve ranking.
• Automated Management: Streamline the management of meta tags, ensuring consistency and effectiveness across your site.

4. Auto-Generated Sitemap

When you build or deploy your SaaSavant project, a sitemap is automatically generated:

• Complete URL List: The sitemap includes all the URLs of your site, aiding search engines in discovering and indexing your content.
• Robots.txt: Allows search engines to crawl and index your site.

5. Vercel Analytics and Speed Insights

SaaSavant includes support for Vercel Analytics and Speed Insights, which provide valuable insights into your site's performance.

• Vercel Analytics: Collects analytics data from your site and sends it to Vercel, which provides insights into your site's performance.
• Speed Insights: Collects performance data from your site and sends it to Vercel, which provides insights into your site's performance.

Just enable them in your project settings from the Vercel dashboard, we've done everything else for you.

By incorporating these features, SaaSavant ensures that your site is well-optimized for search engines and social media, helping you achieve better visibility and engagement.

Responsive Design

SaaSavant is built with a mobile-first approach, ensuring that your application looks great and functions seamlessly across all devices, from desktops to smartphones.

Technology Stack

Frontend

• Next.js: For server-side rendering, static site generation, and overall performance.
• React: The core library for building the user interface.
• Tailwind CSS: A utility-first CSS framework for fast and responsive UI development.
• Framer Motion: For adding smooth animations and interactions to the UI.
• React Toastify: For displaying toast notifications.

Backend

• Firebase Authentication: For secure and scalable user authentication.
• Firebase Firestore: A real-time NoSQL database for storing user data, subscriptions, and tickets.
• Firebase Cloud Functions: To handle server-side logic, such as processing Stripe webhooks.

Payments

• Stripe: For handling subscription payments, including recurring billing and webhooks.

Email Service

• SendGrid: For sending transactional emails, such as registration confirmations, newsletters, or support updates.

SaaSavant is pre-configured to send your users a welcome email with a link to their Dashboard when they register.

Hosting and Deployment

• Vercel: SaaSavant is designed to be hosted on Vercel, providing fast and reliable deployment with global CDN and automatic SSL, however you can choose to host it wherever Next.js apps are supported.

Conclusion

SaaSavant is designed to save you time and effort, allowing you to focus on building the core functionality of your SaaS product. With its comprehensive feature set and modern technology stack, SaaSavant is the ideal starting point for your next SaaS application.