Introduction
Thanks for purchasing the 2mrw Boilerplate from me! Follow along to get the app up and running in 10-15 minutes!
Feel free to reach out to me on Twitter in case of questions, issues, feature suggestions, etc.
Clone The Boilerplate From GitHub
- To get started, please run the following command to clone the repo from GitHub:
- Upon installing the repo, move into the new project (e.g. new-project-name)
- Let’s now remove the existing remote origin
-
You now have to create a new GitHub repo here
-
Let’s add the remote URL to our new GitHub repo
- Push the code
- Let’s add the 2mrw (original) boilerplate as upstream (so that we can fetch future updates):
In order to get future updates from the original boilerplate, use the following commands to fetch and merge the latest changes:
Install dependencies
Rename .env.example to .env.local
You have a .env.example
file in the root of the codebase. Let’s rename it to .env.local
.
You should now have a .env.local
file with the variables below. That’s it for now. Let’s continue to the configuration files section here.
You can now continue with the rest of this guide to set up things such as the database, stripe, resend (emails), etc. to get the app running!
Project File Structure
Here’s a quick overview of the codebase structure to get ourselves familiar with the boilerplate. Keep in mind that this doesn’t include folders such as components, app
, etc.
-
/react-email-starter/
contains email templates -
/supabase/
contains supabase edge functions and migration files -
/src/middleware.ts
handles middleware (e.g. authentication, etc.). -
/src/middleware/handlers
contains various functions and handlers that are used inside the middleware.ts file -
/src/app/api/
handles API calls (each route.ts file is one API endpoint). -
/src/config/
contains configuration files -
/src/enums/
contains enums -
/src/interfaces/
contains all interfaces that are not props from a component -
/src/lib/qClient/
contains the React Query client configuration -
utils/
contains functions such as formatting dates, handling Supabase errors, etc. -
/src/services/
contains Supabase client and admin configurations, and centralises database interactions and queries.database/
database operations (e.g. HTTP requests, etc.)domain/
domain logicemail/
email serviceintegration/
external services such as Supabase, Loops, etc.stripe/
Stripe integration