Project structure
Before we start looking at the features of Supaplate, we need to familiarize ourselves with the project structure.
This page will give you a quick overview of the main directories and their purpose, for an explanation of each file please read the source code as it is extensively commented.
The project is organized into the following main directories:
βββ app/βββ e2e/βββ public/βββ sql/βββ transactional-emails/
app
The app
directory is the main directory for the project.
βββ core/βββ debug/βββ locales/βββ features/β βββ auth/β βββ blog/β βββ contact/β βββ cron/β βββ home/β βββ legal/β βββ payments/β βββ settings/β βββ users/βββ i18n.ts# Internationalization Configurationβββ root.tsx# Root component (React Router Specific)βββ routes.ts# Routes (React Router Specific)βββ app.css# CSS file (Tailwind CSS + Shadcn UI variables)βββ entry.client.tsx# Client entry point (React Router Specific)βββ entry.server.tsx# Server entry point (React Router Specific)
core
The core
directory contains the core functionality of the project. It is where you put all the components, hooks, utils, etc. that are shared accross the project and used in multiple features.
debug
The debug
directory contains a couple of files to help you debug integrations with Sentry and Google Analytics, it is meant to be deleted before deploying to production.
locales
The locales
directory contains examples of the translations for the project.
βββ en.ts# Language code for English.βββ es.ts# Language code for Spanish.βββ ko.ts# Language code for Korean.
features
The features
directory contains the features of the project, each feature has its own directory that may contain all or some of the following folders:
βββ lib/# Utility functions.βββ api/# API routes.βββ components/# Components.βββ screens/# Screens.βββ layouts/# Layouts.βββ docs/# Only used by the blog and legal features.βββ mutations.ts# Code that modifies data in the database.βββ queries.ts# Code that reads data from the database.βββ schema.ts# Drizzle ORM schema.
This structure is not set in stone
This isn't the only way to organize the code, you can change this structure to fit your needs, it is the structure that worked for me and the one I recommend you to use, but you can do whatever you want.
e2e
The e2e
directory contains the end-to-end tests for the project.
βββ assets/# Assets used by the tests.β βββ avatar-test.jpgβββ auth/# End-to-end tests for the auth feature.β βββ forgot-password.spec.tsβ βββ join.spec.tsβ βββ login.spec.tsβ βββ magic-link.spec.tsβββ settings/# End-to-end tests for the settings feature.β βββ settings.spec.tsβββ users/# End-to-end tests for the users feature.β βββ change-email.spec.tsβ βββ change-password.spec.tsβ βββ delete-profile.spec.tsβ βββ edit-profile.spec.tsβββ utils/# Utility functions for the tests.βββ test-helpers.ts
sql
The sql
directory contains the migration files created by Drizzle Kit as well as a functions directory with a couple of useful functions.
βββ functions/β βββ handle_sign_up.sqlβ βββ set_updated_at.sqlβββ migrations/
transactional-emails
The transactional-emails
directory is a fully fledged React Email project.
βββ emails/# React Email Templatesβ βββ change-email.tsxβ βββ confirm-email.tsxβ βββ magic-link.tsxβ βββ reset-password.tsxβ βββ welcome.tsxβββ out/# Rendered HTML Outputβ βββ change-email.htmlβ βββ confirm-email.htmlβ βββ magic-link.htmlβ βββ reset-password.htmlβββ package-lock.jsonβββ package.json