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