How MakerKit Speeds Up Feature Development For Your New SaaS

MakerKit isn’t like most SaaS boilerplates.

Typically, you see a SaaS boilerplate advertise the good stuff like authentication, payments, databases, blogs, etc.

Now if you’re a founder who can code or you’re a developer reporting to a founder, it’s great to be able to say, “I’ve got authentication set up! It was so easy!” That’s great; you saved time on it with some basic configuration. Most boilerplates let you do this.

But that’s not all a boilerplate should save you time on. It should make the actual development of your product easier as well. That means making it easy to build APIs to access your data and UIs to display it.

Often times, developers spend a lot of time deliberating on what development patterns or tools to use. You can avoid that with MakerKit’s development experience and focus on shipping fast.

Development Setup

As a developer, you might think you have to do things quick and dirty to take your SaaS live as quickly as possible. Part of that often means neglecting your initial setup.

Global Configuration

MakerKit provides a global configuration file for adding the following:

• App metadata such as name, description, etc

• Page routes for your application

• Social links for your application footer

• Authentication methods such as Google, Email, etc

• Default light/dark theme selection

• Stripe subscriptions

In addition to the main configuration file, there are files for configuring:

• Code style with Prettier

• Tailwind CSS for styling

• Translations and locales

• Sending emails and more

Environment Variables

You get a few files with some preset environment variables right out of the box. This makes it easy to set up Supabase or Firebase quickly in different environments and also provides a place for any environment variables you may inevitably add while developing.

Architecture

MakerKit follows best practices for folder structure, whether it is Next.js’ app router or its simple structure for Remix apps. It also provides data models for some of its inbuilt features, such as organizations, so you won’t be lost if you’re building a B2B SaaS.

In a future post, I’ll talk about how to keep your folders and files structured so it’s easy to update the MakerKit codebase with the latest code. If you’re an experienced developer, you will find it very intuitive to do this.

Documentation

MakerKit provides extensive documentation for every combination of tech stack it has for developers to dive into and integrate the things I’ve talked about so far and more.

It also provides developers with the ability to generate their own documentation through ContentLayer. You create a bunch of Markdown files in a simple folder structure, and it will generate documentation that’s actually nice to look at for yourself or other developers.

Setting up good custom documentation will save you time and headaches if you plan to onboard more than one developer to your project. You can just tell your developer to update it along the way while they’re pumping out code, so it’s not a tedious experience to update it later in one go.

With all that setup out of the way, now we can jump to the fun stuff.

User Interface (UI)

There are a few UI goodies you can take advantage of out of the box.

First off, Tailwind CSS helps developers build layouts and components faster. There are always debates about what kind of styling pattern is best amongst developers, but there aren’t many SaaS boilerplates that don’t ship with Tailwind CSS out of the box.

And if you want to leverage some reusable components, MakerKit has its own UI kit baked in that is based on Shadcn and Radix UI (older versions). You can get everything from individual components like buttons, inputs, alerts, and dropdowns to entire headers, popups, and forms.

You get lucide or heroicons (older versions) out of the box for icons as well. This is a really nice extra touch, rounding up a great experience for developing UIs in MakerKit.

Data Management (APIs)

To fetch and write data from either Supabase or Firebase, there are example React hooks that you can simply copy, paste, and modify to your liking. This removes doubt about how to interact with the database for most operations.

In the event that you need to use API routes or server actions, there are sample code snippets in the documentation for this as well. If you’re not satisfied with using the Fetch API, the codebase comes with the swr package installed to save you time on things like setting up caching of API requests. Uploading files to storage is also covered with sample code snippets.

Translations

MakerKit's codebase uses translations using the package i18next, which helps you easily create multi-language applications. There is a folder structure for adding new languages and translations, as well as a language switcher component available to use out of the box.

Sending Emails

MakerKit lets you hook up transactional mail services such as SendGrid, MailGun, and more through a simple configuration file. You can then use a simple React hook in the codebase to send emails within your application. InBucket is configured to help you test email sends locally as well.

Building Forms

MakerKit comes with the react-hook-form package installed for developing forms quickly. Search the codebase for instances of react-hook-form being used, and you will find examples of usage such as the profile settings page.

Bonuses

Here are some additional ways to speed up development:

GitHub Copilot

I’ve found GitHub Copilot to work really well with autocompletion within a MakerKit project.

For example, if I have built a couple of API routes, I can create a new API route file and start typing code like this, export async function GET and it will attempt to give me similar boilerplate API code as the other files.

Reusable Packages

The codebase is set up to handle dependencies like any other npm project. If you’re a developer, you already know this and may consider it trivial. 

But if you’re a founder trying to just add an emoji picker, for example, you can follow the instructions to install a popular package such as emoji-mart and add one to your app. 

You can search GitHub for packages and filter by JavaScript or TypeScript in the search results to find something you can leverage.

In a future post, I’ll dive into the security and stability benefits of what MakerKit provides out of the box. But for now, you should have an idea of what it takes to develop faster with this boilerplate.