Buy Pro
Docs
Folder Structure

Folder Structure

Learn how to navigate the codebase of the starter kit.

The folder structure is as unopinionated as possible. This makes it easy to learn, adapt and modify. The whole project is built entirely with React server components and server actions. Zod schemas are used for input validation on both frontend and backend.

Folders

DirectoryPurpose
/actionsHandles server-side mutations (Create, Update, Delete)
/appNext.js App Router components
/componentsReusable UI components
/constantsStores application-wide constants and configuration
/dataFetches data from the database or external APIs
/emailsEmail templates using React Email
/hooksCustom React hooks
/libShared utility functions and services
/prismaContains Prisma schema and migration files
/publicStatic assets like images and fonts
/schemasDefines validation schemas for data
/typesTypeScript types and interfaces

Tree View

This is a representation of the actual files and folders.

CRUD

The core workflow revolves around three key directories:

  /actions  → Server Actions (Create/Update/Delete)
  /data     → Data Functions (Read)
  /schemas  → Zod Schemas (Validation)

To illustrate with examples:

  • Action: Add new contact with /actions/contacts/add-contact.ts
  • Data: Retrieve contacts with /data/contacts/get-contacts.ts
  • Schema: Validate form and action with /schemas/contacts/add-contact-schema.ts

Parallel Routes

Folders that start with an @-prefix, such as @personalDetails, are slots for parallel routes. They provide an implicit suspense and error boundary. In case one parallel route throws an error, the "Try again" default error https://achromatic.dev/docs/components/default-error gets displayed while all the other parts still work. Super powerful!

Parallel Routes

In this example the layout, representing the developer's page, contains two parallel routes slots @apiKeys and @webhooks. Each section loads and functions independently.