Makerkit - Remix and Firebase SaaS starter

MakerKit is a SaaS Starter for bootstrapping projects built with Remix, Firebase, and Tailwind CSS.

I built Makerkit for developers and small teams who want to launch SaaS products quickly and with a clean, well-structured, and well-commented codebase.

The Makerkit SaaS boilerplate lets you scaffold a fully working SaaS skeleton so you can focus on building a profitable business.

Makerkit is a starter project, not a framework. That means you get the complete codebase and can edit it entirely, line by line.

Main Features

1. Starter project built on top of Remix and Firebase
2. SSR support for the internal application's pages
3. Authentication with Firebase Auth with multiple strategies:
   1. Traditional Email/Password Authentication
   2. OAuth providers (Google, Twitter, Facebook, GitHub, Apple, etc.)
   3. Email Link Authentication
   4. Phone Number Authentication
   5. Multi-Factor Authentication (MFA/2FA)
   6. Multi-Account support (e.g., users can link to one or multiple providers)
4. Simple SaaS data model supported by a Firestore database
5. Support for Organizations: i.e., groups of users:
   1. Members can invite new members
   2. Users have hierarchical roles: Owner, Admin, Member
      1. You can extend/update these as you wish
   3. Updating a member's role
   4. Removing members from organizations
   5. Members can also create new organizations
   6. Transferring ownership to another member
6. Built-in payments and subscriptions with Stripe Checkout
7. Modern light and dark themes with Tailwind CSS
8. Reusable UI components built with Tailwind CSS, Headless UI
9. Google Analytics integration with basic tracking included (user ID, screen views) [optional]
10. Error tracking and monitoring with Sentry [optional]
11. Newsletter sign-up forms for Converkit and OctopusMail
12. The base project includes Cypress E2E tests
13. Rich documentation and resources with much of the source code explained through blog posts
14. Recipes to extend the codebase through documentation and Git patches

For more information, visit https://makerkit.dev.

Walkthrough

Let's take a look at all the screens of this SaaS Starter. Then, we will show the light and dark themes you can configure from the Tailwind CSS configuration file.

By default, Makerkit uses a light theme, which can be configured using the Tailwind CSS configuration.

Website and Marketing Pages

The Makerkit SaaS Starter is a unified codebase for your marketing website and your internal app, just like a modern web application should be.

Pages

The marketing website has three built-in pages:

1. Home Page
2. FAQ page (with Google's featured snippets support)
3. Pricing Page with a simple pricing grid

Home Page

Authentication

The Makerkit's boilerplate uses Firebase Auth for authenticating your SaaS users.

Authenticating Users

The boilerplate is pre-configured to authenticate users with:

1. Email/Password credentials
2. Google and Facebook
3. Email Links (not added by default to the pages)
4. Multi-Factor Authentication with SMS
5. Multi-Account providers (e.g., users can link their account to multiple providers)

Adding other providers supported by Firebase Auth is very simple.

Users can also self-recover a password by requesting a link to reset it.

Account Linking

Users can link multiple accounts. For example, assuming a user signs up using Facebook SignIn, they can later connect the account to other providers such as Google Auth, or using Email/Password.

Multi-Factor Authentication

Users can enable MFA using a Phone Number, where they'll receive an SMS to verify it.

Once verified, users will be prompted for a verification code sent to their verified phone number to perform certain actions, such as signing in, updating their password, and anything that requires users to re-authenticate.

Dashboard

The Dashboard is the initial page users get redirected to when they sign in and is considered the home page of the application (i.e., the internal side of the website).

The dashboard page is voluntarily empty (you will change it anyway!).

Settings

User Profile

Users can update various settings about their profile, which is stored directly in Firebase Auth. For example, if they signed up with an Email/Password, they would be able to edit them:

Organization

Similarly, users can update their organization's details, such as their names and their logos:

Team Members

Users can invite other team members to their organization and assign them roles. By default, the starter uses three roles:

• 1. Owner
• 2. Admin
• 3. Member

Of course, you can add your own and extend the logic of the existing ones.

Transferring Ownership

Owners of an organization can transfer ownership to another member: the previous owner will be turned into an Admin.

Invites

Invites to your team members are written with MJML and React.

When the user clicks on the CTA, they are redirected to the application where they can sign in or sign up.

Invite Flows

The inviting flow handles two scenarios:

1. When the user is signed-in
   1. The application offers either:
      1. accept the invite with the current account
      2. accept the invite with another account and sign-up with a different email
2. when the user is not signed-in
   1. the user is asked to sign-up for an account (or sign in if they have one)

Subscriptions

The Makerkit starter uses Stripe Checkout for handling payments and subscriptions. The starter offers a simple plan selector for picking a plan, but you can extend it depending on your product's plans:

Cypress E2E Tests

The Makerkit starter is tested with well-written Cypress E2E tests:

Developer Experience

1. The Firebase Emulators are configured by default during development
2. Rich set of scripts for common tasks, such as running the CI tests
3. Rich documentation
4. Well-commented codebase

FAQ

Do you have a Community?

Yep, we're on Discord.

We also host Office Hours every other Friday for help, feedback, show&tell, or to chat code and SaaS!

Can I see the code before buying?

Yep! We can hop on a call and chat about the codebase and your use case.

I will not be salesy: I will tell you during the call if Makerkit isn't right for you.

How is the codebase distributed?

You will download the repository as a static folder from Gumroad and then be asked for your GitHub username so I can add you to the private repository on GitHub.

How many projects can I use it for?

As many as you want!

Buy once, use forever.

Makerkit is not for me. Can I get a refund?

No one should pay for something that isn't right for them.

Please let me know within 14 days of the purchase, and you'll be refunded 100% of what you paid. No questions asked (I'd love feedback, though!).

I am stuck. Can you help?

Yes. You can message me on Discord or by Email.

Depending on the timezone, you can expect a reply within 24 hours during work days.

Can I open-source a project built using MakerKit?

I hope you understand that our kits will not be valuable if published open-source (except for the constant updates!).

How can I update my project with the latest changes?

After getting an invite to our Github repository, you will be able to update the repository by pulling the latest changes with Git.

How many kits are there?

Makerkit offers two SaaS kits:

1. Next.js + Firebase
2. Remix + Firebase

We're also working on a starter kit to build internal and external Shopify apps.

What is MakerKit ideal for?

MakerKit is ideal for SaaS (Software as a Service), online publications, blogs, documentation websites, and more.

What is MakerKit not very ideal for?

While coding with Remix and Firebase is a lot of fun, you must be proficient with React (and Typescript) or keen on learning it if you purchase a license.

You should consider something more straightforward if you are not confident in your React skills (especially newer concepts like Hooks).

Also, MakerKit is not the right choice if Firebase is not the right choice for your project in the first place.

Feel free to contact me to check if it's right for your project.