Welcome
Welcome to the Supaplate documentation!
I'm glad you're here and I can't wait to see what you build with Supaplate.
Please read this guide carefully as it will help you understand how Supaplate works and how to use set it up to build your next project.
About Supaplate
Supaplate is a boilerplate, that means, a code template to be used as a starting point for your next project.
It has the core features that most projects need, like user authentication, profile management, payments, localization, dark mode etc.
Supaplate is just a starting point
Supaplate isn't a full-featured application, you need to add the features you need to it.
It's feature set is intentionally minimalistic, we only include the most necessary features to get you started, it is up to you to build on top of it to create your own project.
About this Guide
This guide is meant to be read in order, from start to finish.
This guide is not a tutorial on any of the underlying technologies used in Supaplate (React Router, Supabase, Tailwind CSS, etc.), for that you can refer to their official documentation.
This guide will show you how to configure Supaplate to build your project, it will explain the conventions used, the structure of the project and it will explain how to use the features provided by Supaplate.
Supaplate's code is extensively commented, so apart from reading this guide, take some time to read the comments on the source code to understand the codebase.
About you, the maker
You should be familiar with the following technologies:
- React
- React Router 7 (previously known as Remix)
- Supabase
- Tailwind CSS
- Drizzle ORM
- TypeScript
- SQL
If you are not familiar with these, you can learn about them by reading their official documentation.
- React Router Documentation
- Tailwind CSS Documentation
- Supabase Documentation
- TypeScript Documentation
- Drizzle Documentation
Skip the tutorial, learn by doing!
Instead of reading long tutorials learn by doing with the Maker Masterclass course, where you will learn how to build a real life project with React Router, Supabase, Tailwind CSS and more.
By the end of the course you will be able to build whatever you can think of and you will be able to customize Supaplate to the exact needs of your project.
Features
Here is everything that Supaplate includes divided by feature group:
Authentication
- β Email/Password Authentication
- β Social Authentication (10+ providers)
- β Magic Link Authentication
- β OTP Authentication
- β Email Verification
- β Forgot Password
- β Social Account Linking/Unlinking
- β Logout
- β Protected routes (Dashboard, Profile, etc.)
User Profiles
- β Edit profile information
- β Avatar upload
- β Secure email change
- β Change password
- β E2E Testing with Playwright
Production Features
- β Sentry
- β Google Analytics / Google Tag Manager integration
- β Channel Talk integration
Payments
- β Toss Payments κ²°μ μμ ― Integration
- β Payment verification
- β User payment history
Extra Features
- β Localization (Translations)
- β Dark mode
- β Markdown based Blog
- β OG Image generation
- β Legal pages (Terms of Service, Privacy Policy, etc.)
- β Contact form with hCaptcha and Turnstile integration
- β Sitemap generation
- β Transactional emails
- β Cron jobs system
Feel free to remove features
You don't have to use all the features that Supaplate includes, you can remove the ones you don't need.
Just remove the feature group from the ./src/app/features folder, the links in the navigation bar and the routes in the ./app/routes.ts file.
Technical details
Supaplate is built with the following packages/providers: