Start Here!

Hi!

Thanks for purchasing the Forj Boilerplate from me! This guide will help you set it up, customise the database, and troubleshoot any issues you may encounter. Let’s get started!

If you have any questions, issues, feature suggestions, etc., feel free to reach out to me on [Twitter]

Follow along to get the app up and running in 5-10 minutes!

Clone The Repo From GitHub

  1. Clone the boilerplate repo from GitHub with a new project name (e.g. new-project-name)
  • git clone git@github.com:timohuennebeck/nextjs-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. Remove the existing remote origin
  • git remote remove origin

  1. Create a [new GitHub repo]

  2. Include the remote URL to the new GitHub repo

  • git remote add origin https://github.com/username/new-repo.git
  1. Push the code
  • git push -u origin main

Install dependencies

  • npm install

Rename .env.example to .env.local

You should 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. Don’t worry, we’ll go through each of them and where to find them / set them up later throughout this guide.

.env.local
NEXT_PUBLIC_STRIPE_SECRET_KEy=
NEXT_PUBLIC_STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEy=
NEXT_PUBLIC_RESEND_EMAIL_API_KEy=
NEXT_PUBLIC_EMAIL_LOGO_BASE_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEy=
NEXT_PUBLIC_SITE_URL=

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 you familiar with the boilerplate before we start setting it up!

    • middleware.ts
      • api
      • ...
      • email
      • helper
      • ...
      • admin.ts
      • client.ts
  • /src/middleware.ts handles middleware (e.g. authentication, etc.).
  • /src/app/api/ handles API calls (each route.ts is one API endpoint).
  • /src/lib/ handles logic (e.g. stripe functions, supabase functions, etc.).
  • /src/lib/email contains email templates that are sent to users.
  • /src/lib/helper contains helper functions (e.g. format dates, handle supabase errors, etc.).
  • /src/services/ contains Supabase client and admin configurations, and centralises database interactions and queries.
Database