In this section - we will take an overview of the Remix Supabase codebase. We will look at the different folders and files and what they do.
The "supabase" folder
This is the folder generated by Supabase when initiating a new project. In this folder, Supabase stores the local configuration config.toml, the database migrations, the seed file and the tests.
Most importantly, you will be more interested in the migrations folder. This folder contains the database migrations that seed your database with the necessary tables and data when starting the Supabase server.
It's here where you will be editing or adding new migrations to your database.
The "public" folder
In this folder you can store static files that you want to serve from your application. For example, you can store images, fonts, etc. in this folder.
The "app" folder
The app folder contains the various folders and files:
corelibcomponentsroutesi18nconfiguration.tsdatabase.types.ts
The "core" folder
The core folder contains the building blocks of your application, and the core utilities that you will use throughout your application.
It does not contain any business logic, but rather contains the building blocks that you will use to build your business logic.
Reusable components
The core/ui folder contains the reusable components that you will use throughout your application.
It's best to place here components not related to your app's business logic. For example, you can place here components like Button, Input, Select, etc.
The "lib" folder
The lib folder contains business-logic related code - and it's here where you will be writing most of your code.
The "components" folder
The components folder contains the various components that you will use throughout your application.
For example, here you can add components such as UsersList, UserDetails, UserForm, etc. If they relate to a feature, this is a good place to put them.
The "routes" folder
This is the Remix routes folder. It contains the various routes that your application will have.
The "i18n" folder
This folder contains the settings and utilities for internationalization in your application.
The "configuration.ts" file
This file contains the configuration for your application. It's here where you will configure your auth providers, your application's name, etc.
The "database.types.ts" file
This file is automatically generated by Supabase. It contains the types for your database tables and we use it to add type-safety to our database queries.