Navigating the your Remix Supabase Turbo Starter Kit 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 Remix 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 Remix app, which is a React framework that allows you to build static and server-rendered web applications.

The Remix 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 Remix 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.

Diving into the Codebase

The codebase is structured in a way that makes it easy to navigate and update. Here are some of the key files and directories you should be aware of:

- apps
---
 web
---
-- app
---
-- components
---
-- config
---
-- lib
---
-- content
---
-- styles
---
-- supabase

Diving into apps/web

The apps/web directory is where the Remix app lives. Here are some of the key directories and files you should be aware of:

1. app - this is where the main app lives. This is where you define the routes of the application.
2. components - this is where you define the shared components of the application.
3. config - this is where you define the configuration of the application.
4. lib - this is where you define the shared libraries of the application.
5. content - this is where you define the content of the application (by default, uses Keystatic Markdoc files)
6. styles - this is where you define the styles of the application.
7. supabase - this is where you define the Supabase configuration, migrations and tests

Diving into app

The app directory is where the routing of the application is defined. Here are some of the key files you should be aware of:

- app
---
 home
---
 (marketing)
---
 auth
---
 join
---
 admin
---
 update-password
---
 server-sitemap.xml

Let's break down the directories:

1. home - this is where the internal home of the application lives. This is where you define the routes when the user is logged in.
2. (marketing) - this is where the marketing pages of the application live. This is where you define the routes when the user is not logged in. It's a pathless route, so you don't see it in the URL.
3. auth - this is where the authentication pages of the application live. This is where you define the routes for the login, signup, and forgot password pages.
4. join - this is where the join pages of the application live. This route is the route where the user can join a team account following an invitation.
5. admin - this is where the admin pages of the application live. This is where you define the routes for the super admin pages.
6. update-password - this is where the update password pages of the application live. This is the route the user is redirected to after resetting their password.
7. server-sitemap.xml - this is where the sitemap of the application is defined.

Diving into (dashboard)

The (dashboard) directory is where the internal dashboard of the application lives. Here are some of the key files you should be aware of:

---
 home
---
---
 (user)
---
---
 [account]

Let's break down the directories:

1. (user) - this is where the user pages of the application live. This is where you define the routes for the personal account pages.
2. [account] - this is where the account pages of the application live. This is where you define the routes for the team account pages.

The home path allows us to separate the marketing pages from the internal dashboard pages.

So the user home page would be /home/user and the account home page would be /home/[account].