MakerKit uses Next.js, Firebase, Firestore, Tailwind CSS, Zod, Pino, Headless UI, Typescript and Cypress to build wonderful SaaS applications
MakerKit is built primarily with Next.js, Firebase, and Tailwind CSS.
Under the hood, there are many more libraries and architectural decisions you should know.
The front-end is therefore fully built with React, leveraging React Hooks and the best practices available today.
Firebase is one of the most popular PaaS out there, with a very generous free tier and fairly affordable pricing for growing applications.
MakerKit uses Firebase for Authentication, Firestore for storing your data, Storage for storing files, and AppCheck to protect your endpoints against possible attacks.
The bulk of the application's theme, built with Tailwind 3, is stored in three CSS files rather than HTML.
It may sound like a bad practice, but we approached this way to help you find and edit the theme's CSS in one single place.
We designed the theme in both light and dark themes, so you can choose to use both according to your user's OS settings, or you can manage it using a local cookie.
Some components, such as
Modal, have been
extended using Headless UI, an accessible library
built by the Tailwind Team.
MakerKit uses Tailwindf CSS for styling all the other components too.
We wrote every single line of code with strictly-typed Typescript both on the client and server-side.
The API endpoints are validated and protected with Zod, which also helps with strong-typing.
We ship MakerKit with Cypress, likely the most popular E2E testing framework.
We made lots of examples and utilities to change the tests as you develop your application.
We lint the codebase with a very strict EsLint configuration, but we distribute it with less strict params so that it won't be in your way as you're experimenting with the starter.
We will show you how to add stricter parameters if that's your thing, but we do not recommend jumping head-in with it. It's much better to activate the stricter configuration once you have already shipped the product and are looking to stabilize it.
Furthermore, the codebase is formatted with Prettier automatically.
We configured the application to be translated by default thanks to the next-i18n package.
Using translation files can help you if you want to translate your apps in multiple languages, but it also allows you to find the text strings you want to replace.
In this way, you do not need to change strings in the codebase, but they're neatly organized in JSON files.
MakerKit uses Pino, a lightweight logging library.
API errors are logged with just enough information to help you debug your API routes.