Project structure

How to find your way in the project.

The starter kit is setup as a monorepo which is managed by Yarn 4 and Turbo Repo.

Folder structure

The folder structure looks as following:

PathPackage nameDescription
apps/webwebNext.js (app router) frontend app.
apps/web/features/commonThe app's common functionality, for example layouts, that is shared across features.
apps/web/features/*Domain specific code is grouped within individual features.
packages/api@acme/apiThe tRPC API service.
packages/auth-authjs@acme/auth-authjsAuth.js (NextAuth) authentication adapter
packages/auth-supabase@acme/auth-supabaseSupabase authentication adapter
packages/billing-stripe@acme/billing-stripeStripe billing adapter
packages/config@acme/configConfiguration for billing plans and feature flags
packages/env@acme/envType-safe environment variables
packages/db@acme/dbDatabase schemas and migrations using Drizzle
packages/email@acme/emailEmail service using Resend
packages/i18n@acme/i18ni18n helpers and utilities
packages/next@acme/nextNext.js helpers and utilities
packages/ui@acme/uiThis is your shared UI library, and included all custom pre-built components
packages/theme@acme/themeYour custom Chakra UI theme. This extends the Saas UI Pro theme by default.

Features

Application code is grouped by feature, this means that all related assets, like components, hook, pages are grouped in a single feature folder. This setup will help to keep the code base maintainable as it grows. It will make it easier to add/remove new features and prevent any unwanted side effects when refactoring or removing functionality, due to too much interdependencies.

A few rules to make sure the codebase stays maintainable.

  • Shared functionality is located in the common feature, other features can import from here.
  • Treat features as standalone packages, keep them as decoupled as possible.
  • If a component is used in multiple features and doesn't depend on external state (like data fetching), consider adding it to the ui library, otherwise add it to the common feature.
  • Keep components clean, eg if there is complex business logic, like useQuery or useMutation hooks, move them into a separate hook in hooks/

Was this helpful?