DocumentationReact Router 7 and Supabase

Navigating the your React Router Supabase Turbo Starter Kit codebase

Learn how to navigate the codebase of the React Router Supabase Turbo Starter Kit. Understand the project structure and how to update the codebase.

As mentioned before, this SaaS Starter Kit is modular, thanks to Turborepo - which makes it easy to manage multiple packages in a single repository.

Project Structure

The main directories in the project are:

  1. apps - the location of the React Router app
  2. packages - the location of the shared code and the API

apps Directory

This is where the app (or the apps, should you add more) lives. The main app is a React Router app, which is a React framework that allows you to build static and server-rendered web applications.

The React Router app defines:

  1. the configuration of the project
  2. the routes of the application

packages Directory

This is where the shared code and the API live. The shared code is a collection of functions that are used by both the React Router app and the API. The API is a serverless function that is used to interact with the Supabase database.

The shared code defines:

  1. shared libraries (Supabase, Mailers, CMS, Billing, etc.)
  2. shared features (admin, accounts, account, auth, etc.)
  3. UI components (buttons, forms, modals, etc.)

All apps can use and reuse the API exported from the packages directory. This makes it easy to have one, or many apps in the same codebase, sharing the same code.