---
title: Project structure
description: Learn about the project structure and how to navigate it.
url: /docs/web/installation/structure
---

# Project structure

The main directories in the project are:

* `apps` - the location of the main apps
* `packages` - the location of the shared code and the API

### `apps` Directory

This is where the apps live. It includes web app (Next.js), mobile app (React Native - Expo), and the browser extension (WXT - Vite + React). Each app has its own directory.

### `packages` Directory

This is where the shared code and the API for packages live. It includes the following:

* shared libraries (database, mailers, cms, billing, etc.)
* shared features (auth, mails, billing, ai etc.)
* UI components (buttons, forms, modals, etc.)

All apps can use and reuse the API exported from the packages directory. This makes it easy to have one, or many apps in the same codebase, sharing the same code.

## Repository structure

By default the monorepo contains the following apps and packages:

<Files>
  <Folder name="apps" defaultOpen>
    <Folder name="web - Web app (Next.js)" />

    <Folder name="mobile - Mobile app (React Native - Expo)" />

    <Folder name="extension - Browser extension (WXT - Vite + React)" />
  </Folder>

  <Folder name="packages" defaultOpen>
    <Folder name="analytics - Analytics setup" />

    <Folder name="api - API server (including all features logic)" />

    <Folder name="auth - Authentication setup" />

    <Folder name="billing - Billing config and providers" />

    <Folder name="cms - CMS setup and providers" />

    <Folder name="db - Database setup" />

    <Folder name="email - Mail templates and providers" />

    <Folder name="i18n - Internationalization setup" />

    <Folder name="shared - Shared utilities and helpers" />

    <Folder name="storage - Storage setup" />

    <Folder name="ui - Atomic UI components">
      <Folder name="shared" />

      <Folder name="web" />

      <Folder name="mobile" />
    </Folder>
  </Folder>

  <Folder name="tooling" defaultOpen>
    <Folder name="eslint - ESLint config" />

    <Folder name="github - Github actions" />

    <Folder name="prettier - Prettier config" />

    <Folder name="typescript - TypeScript config" />
  </Folder>
</Files>

## Web application structure

The web application is located in the `apps/web` folder. It contains the following folders:

<Files>
  <Folder name="public - Static assets" />

  <Folder name="src" defaultOpen>
    <Folder name="app - Main application" />

    <Folder name="assets - Optimized static assets" />

    <Folder name="config - Global app config" />

    <Folder name="modules - Application modules" />

    <Folder name="lib - Communication with third-party packages" />

    <Folder name="utils - Shared utilities" />
  </Folder>

  <File name=".env.local" />

  <File name="env.config.ts" />

  <File name="eslint.config.js" />

  <File name="next.config.ts" />

  <File name="package.json" />

  <File name="tsconfig.json" />

  <File name="turbo.json" />
</Files>