Introduction to MakerKit: a SaaS boilerplate for Next.js and Firebase

MakerKit is the Next.js boilerplate project for SaaS built to get you started on the right foot.

MakerKit is a fully SSR-rendered Next.js application that uses Firebase for authentication, database (with Firestore), and storage. MakerKit is ideal for any SaaS application or dynamic websites such as walled Online Publications.

It particularly shines when you wish to provide uniform navigation between your marketing site, documentation, and internal application.

What does the boilerplate provide?

Tech Stack

We built MakerKit with some of the best technologies available today, such as Next.js, Tailwind, and Firebase:

• Scalable Next.js structure template, perfect for the most ambitious projects
• Beautiful Tailwind 3 CSS theme - with dark mode!
• Full Firebase setup with local emulators
• Reusable UI components as building blocks (which you can easily swap with your own or your favorite library) based on Radix UI
• SSR-compatible Authentication flow, including 3rd-party providers (Google, Facebook, Twitter, GitHub, etc.)

Template Features

MakerKit is fully functioning from the beginning and comes with the following features:

• Payments with Stripe, and support for subscriptions (or, alternatively, using Lemon Squeezy)
• Onboarding flow, which allows your users to set up their accounts and create their organization
• Organizations: users can create and edit organizations. An organization is a group of users. You can rename the Organization entity according to your domain (for example, teams, projects, etc.)
• Team Members: users can invite other users to join their organization and assign them a role
• MDX-powered Blog and Documentation generators - already SEO-optimized for you

Marketing

Marketing matters! But don't get hung up on the technicalities. MakerKit provides:

• Newsletter Sign-up form for ConvertKit, but easy to adapt to more providers
• Google Analytics script baked-in
• Email Templates you can write with React using [React.email] (https://react.email)

Debugging and Testing

Never waste time chasing bugs again.

Assuming you have created a Sentry account, MakerKit can catch exceptions (and possible bugs) and report them to Sentry whenever they happen in both client and server-side code:

• Error Tracking set up with Sentry
• Comprehensive E2E Tests suite with Cypress, which you can use and learn from

After you buy

You're not going to be left alone. We offer help and support:

• Access to the team for feedback, requests, and general support. We're here to support you build your SaaS.

This documentation introduces each of the points above and guides you through so that you can easily adjust MakerKit to your application's domain.

MakerKit has plenty of resources for using both Next.js and Firebase - and if you're stuck, you can always reach out to me for help.