• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Introduction
    • Technical Details
    • Clone the Repository
    • Running the Project
    • Common Commands
    • Updating the Codebase
    • Conventions
    • Navigating the Codebase
    • Walkthrough
    • Migrating from Remix
    • Code Health and Testing
    • FAQ

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.

On this page
  1. Project Structure
    1. apps Directory
    2. packages Directory