Feel free to reach out to me on Twitter in case of questions, issues, feature suggestions, etc.

1

Clone The Boilerplate From GitHub

  1. To get started, please run the following command to clone the repo from GitHub:
git clone git@github.com:timohuennebeck/2mrw-boilerplate.git new-project-name
  1. Upon installing the repo, move into the new project (e.g. new-project-name)
cd new-project-name
  1. Let’s now remove the existing remote origin
git remote remove origin

  1. You now have to create a new GitHub repo here

  2. Let’s add the remote URL to our new GitHub repo

git remote add origin https://github.com/username/new-repo.git
  1. Push the code
git push -u origin main
  1. Let’s add the 2mrw (original) boilerplate as upstream (so that we can fetch future updates):
git remote add upstream git@github.com:timohuennebeck/2mrw-boilerplate.git

In order to get future updates from the original boilerplate, use the following commands to fetch and merge the latest changes:

npm run repo:update
2

Install dependencies

npm install
3

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.

NEXT_PUBLIC_SITE_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
DEFAULT_SUPABASE_SERVICE_ROLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
RESEND_API_KEY=
NEXT_PUBLIC_BUILD_VERSION=

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 logic
    • email/ email service
    • integration/ external services such as Supabase, Loops, etc.
    • stripe/ Stripe integration