Skip to content
Start UI Start UI Start UI Documentation

Folders Architecture

/.github

GitHub configuration files for GitHub actions, PR templates and README assets.

/.storybook

Storybook configuration files.

/.vscode

VS Code workspace settings. The extensions.json file contains some recommended extensions for the project.

/.e2e

End-to-end tests folder for Playwright tests.

/prisma

Prisma 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

Static assets served as-is (images, icons, robots.txt, etc.).

/src

Main application source code.

/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.

/src/env

Environment variables and validation utilities.

/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/layout

Layout components and page wrappers.

/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 for help on this part 😅.

/src/routes

Tanstack Start router folder, all the routes of the application are declared in this folder. See the Tanstack Start documentation for more details.

/src/server

All the code for the server ONLY code.

/src/styles

Global styles, Tailwind config, or CSS utilities.

/src/tests

Unit and integration tests.

/src/types

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

/src/providers.tsx

Top-level React providers (context, theme, query client, etc.).

/src/routeTree.gen.ts

Generated route tree file (auto-generated, don’t edit manually).

/src/router.ts

Router configuration and setup.

/.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.

/lefthook.yml

GIT hooks created with Lefthook.

/vite.config.ts

Vite build and dev server configuration.

/vitest.config.ts

Vitest configuration for unit and integration tests.