Hi Developer! 👋

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:

git clone git@github.com:timohuennebeck/2mrw-boilerplate.git new-project-name

Upon installing the repo, move into the new project (e.g. new-project-name)

cd new-project-name

Let’s now remove the existing remote origin

git remote remove origin

You now have to create a new GitHub repo [here]
Let’s add the remote URL to our new GitHub repo

git remote add origin https://github.com/username/new-repo.git

Push the code

git push -u origin main

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

Install dependencies

npm install

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].

.env.local

NEXT_PUBLIC_SITE_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
LOOPS_API_KEY=

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.

- - ...

/src/middleware.ts handles middleware (e.g. authentication, etc.).
/src/app/api/ handles API calls (each route.ts file is one API endpoint).
/src/config/ contains configuration files
/src/emails/ contains email templates
/src/enums/ contains TypeScript enums
/src/interfaces/ contains TypeScript interfaces
/src/lib/qClient/ contains the React Query client configuration
/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
- utils/ - contains functions such as formatting dates, handling Supabase errors, etc.

Configuration Files