Folders Architecture

/.github

GitHub (opens in a new tab) configuration files for GitHub actions, PR templates and README assets.

/.husky

GIT hooks created with Husky (opens in a new tab).

/.storybook

Storybook (opens in a new tab) configuration.

/.vscode

VS Code workspace settings (opens in a new tab).
The extensions.json file contains some recommended extensions for the project.

/e2e

End-to-end tests folder for Playwright (opens in a new tab) tests.

/node_modules

This folder should NEVER be tracked on GIT because it contains all dependencies files of the project.
These files are downloaded when you install the dependencies with pnpm install.

/prisma

Prisma (opens in a new tab) folder for database schema and seed scripts.

Prisma generator and client blocs are defined in the /schema/main.prisma file.

All other schema files organize related models / enum together. For example, in /schema/user.prisma you will be able to find all models / enum related or used by a User model, like VerificationToken model or UserRole enum.

/public

This folder contains static assets which will be exposed at the root of the website by NextJS. See NextJS static assets documentation (opens in a new tab) for more details.

/scripts

Folder for scripts that will be auto executed on build or setup step.

/scripts/build-info.ts

This scripts will be run on postinstall and will auto generate a build-info.json file with commit and date info that can be display in the application.

/src

Root folder of all the source code of the application. When importing files, you can use @/ to reference this folder.

/src/app

Next router folder, all the routes of the application are declared in this folder. See the Next App Router documentation (opens in a new tab) for more details.

/src/components

React generic UI components. In this folder, all components should be "dumb", focus on UI rendering and without business logic. These components should be documented in Storybook.

/src/emails

This folder contains all emails templates created with react-email (opens in a new tab).

/src/features

All business features for client code or code shared between client and server.

/src/hooks

React generic hooks that can be use accross the application.

/src/lib

Global configuration for client libraries or libraries shared between client and server. If you need a configuration only on the server side, use the src/server/config folder.

/src/locales

Folder which contains all the translations files. Use i18n Ally VS Code extension (opens in a new tab) for help on this part 😅.

/src/server

All the code for the server ONLY code.

/src/server/config

Configuration of all server only libraries.

/src/server/routers

All tRPC routers that contains API routes splitted by features.

/src/server/router.ts

The root file for all tRPC routers. This is the entry point of the API.

/src/theme

Customization of the Chakra UI theme (opens in a new tab).

/src/types

Global TypeScript types available accross all the code base without imports.

/src/env.mjs

Allows to validate and transform environment variables. This will enforce strong typing for environment variables.
Update this file when you add/remove/update some environment variables.

/.env

This file is LOCAL and should NEVER be tracked on GIT. All sensitive information should be set in this .env file by each developers.

/.env.example

This file IS tracked on GIT, make sure that you NEVER put sensitive information in this file. All sensitive information should be set in the .env. This file show an example of the .env that a new developer on the project can duplicate to create their own .env file.