> ## Documentation Index
> Fetch the complete documentation index at: https://mf2.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Structure

> How the mf² monorepo is organized.

mf² is a monorepo: multiple packages in a single repository, managed by [Turborepo](https://turborepo.com) and [Bun](https://bun.sh) workspaces. The structure is predictable by design. Humans and AI agents find what they need in the same places every time.

## Apps

Each app in `apps/` is self-contained and deployable independently. Apps should not depend on other apps. Each has an `env.ts` file at the root that composes environment variables from the packages it uses.

Add your deployment URLs to your [environment variables](/setup/env) under `NEXT_PUBLIC_APP_URL`, `NEXT_PUBLIC_WEB_URL`, and `NEXT_PUBLIC_DOCS_URL`.

| App                          | Port | Subdomain               | Purpose                        |
| ---------------------------- | ---- | ----------------------- | ------------------------------ |
| [app](/apps/app)             | 3000 | `app.{yourdomain}.com`  | Main SaaS application          |
| [web](/apps/web)             | 3001 | `www.{yourdomain}.com`  | Marketing website              |
| [api](/apps/api)             | 3002 | `api.{yourdomain}.com`  | Webhooks and cron jobs         |
| [email](/apps/email)         | 3003 | n/a                     | Email templates                |
| [docs](/apps/docs)           | 3004 | `docs.{yourdomain}.com` | Documentation site             |
| [storybook](/apps/storybook) | 6006 | n/a                     | Component workshop             |
| [mobile](/apps/mobile)       | n/a  | n/a                     | React Native + Expo mobile app |
| [desktop](/apps/desktop)     | n/a  | n/a                     | Electron desktop app           |

## Packages

Each package in `packages/` wraps a single concern behind a typed interface. This makes swapping implementations easy. For example, the `backend` package contains everything related to Convex (schema, functions, agents). Swap the backend without touching the rest of the app.

Packages export everything the apps need: middleware, hooks, components, and [environment variables](/setup/env). Every package is scoped under `@repo/`:

```ts title="Example imports" theme={null}
import { auth } from "@repo/auth";
import { Button } from "@repo/design-system/components/ui/button";
import { analytics } from "@repo/analytics";

// Mobile equivalents
import { Button } from "@repo/design-system-native/components/ui/button";

// Desktop uses the same web design system
import { Button } from "@repo/design-system/components/ui/button";
```

## Why this structure matters for agents

An AI agent reads one package, follows the typed exports, and makes a change. The type checker validates the result. To add a feature that touches auth and payments, the agent reads `@repo/auth` and `@repo/payments`: two focused directories, not files scattered across the tree.

The `apps/` and `packages/` split limits blast radius. An agent modifying a package runs `turbo build --filter=<package>...` to verify only the affected code. Fast feedback, fewer mistakes.