Project Structure

The generated project contains three main directories: mobile/ for the React Native (Expo) app, web/ for the Next.js web app, and backend/ for the Node.js API server.

Root Level

my-app/
├── mobile/              # React Native (Expo) app
├── web/                 # Next.js web app
├── backend/             # Node.js (Fastify) backend
├── scripts/             # Setup and deployment scripts
├── docker-compose.yml   # Development Docker config
├── docker-compose.prod.yml  # Production Docker config
└── README.md            # Project documentation

Mobile App Structure

The mobile app uses Expo Router for file-based navigation with a clean separation of concerns between app routes and reusable code.

mobile/
├── app/                     # Expo Router pages
│   ├── _layout.tsx          # Root layout (SDK init, auth check)
│   ├── +not-found.tsx       # 404 screen
│   ├── (auth)/              # Authentication screens
│   │   ├── _layout.tsx
│   │   ├── login.tsx
│   │   └── register.tsx
│   ├── (onboarding)/        # Onboarding flow (if enabled)
│   │   ├── _layout.tsx
│   │   ├── page-1.tsx
│   │   ├── page-2.tsx
│   │   └── page-3.tsx
│   ├── (tabs)/              # Main tab navigation
│   │   ├── _layout.tsx
│   │   └── index.tsx
│   └── paywall.tsx          # Paywall screen (if enabled)
├── src/
│   ├── services/            # API and SDK services
│   │   ├── api.ts           # Axios API client
│   │   ├── sdkInitializer.ts
│   │   └── ...              # SDK-specific services
│   ├── store/               # Zustand state stores
│   │   ├── index.ts         # Store exports
│   │   ├── auth.store.ts
│   │   ├── session.store.ts
│   │   └── ...              # Feature-specific stores
│   ├── hooks/               # Custom React hooks
│   ├── components/          # Reusable UI components
│   │   ├── ui/              # Base UI components
│   │   └── auth/            # Auth-specific components
│   ├── constants/           # Theme and app constants
│   └── utils/               # Utility functions
├── assets/                  # Images, fonts, icons
│   └── images/
├── app.json                 # Expo configuration
├── eas.json                 # EAS Build configuration
└── package.json

Web App Structure

The web app uses Next.js App Router with a clear separation between public and protected routes.

web/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── (auth)/          # Public auth pages
│   │   │   ├── login/
│   │   │   ├── register/
│   │   │   └── forgot-password/
│   │   ├── (app)/           # Protected app pages
│   │   │   ├── dashboard/
│   │   │   └── settings/
│   │   ├── auth/            # OAuth callback routes
│   │   │   └── callback/
│   │   ├── globals.css      # Global styles with dark mode
│   │   ├── layout.tsx       # Root layout with providers
│   │   └── page.tsx         # Home page
│   ├── components/
│   │   ├── ui/              # shadcn/ui base components
│   │   ├── auth/            # Auth forms and buttons
│   │   ├── settings/        # Settings page components
│   │   └── providers/       # React context providers
│   ├── lib/
│   │   ├── auth/            # Auth utilities and server actions
│   │   └── utils.ts         # Helper functions
│   └── store/               # Zustand state stores
├── public/                  # Static assets
├── tailwind.config.ts       # Tailwind configuration
├── next.config.ts           # Next.js configuration
└── package.json

Route Groups

The (auth) and (app) folders are Next.js route groups. They organize routes without affecting the URL structure. (auth) routes are public, while (app) routes require authentication.

Backend Structure

The backend follows a clean architecture with separate layers for controllers, domain logic, and infrastructure.

backend/
├── controllers/
│   ├── rest-api/            # Fastify REST API
│   │   ├── server.ts        # Server setup
│   │   ├── index.ts         # Entry point
│   │   ├── plugins/         # Fastify plugins
│   │   │   ├── auth.ts      # JWT authentication
│   │   │   ├── config.ts    # Configuration
│   │   │   └── error-handler.ts
│   │   └── routes/          # API route handlers
│   │       ├── auth.ts
│   │       └── sessions.ts
│   └── event-queue/         # BullMQ workers (if enabled)
│       ├── index.ts
│       └── workers/
├── domain/                  # Business logic
│   ├── auth/
│   │   ├── schema.ts        # Zod validation schemas
│   │   └── repository.ts    # Data access
│   ├── user/
│   └── session/
├── prisma/
│   └── schema.prisma        # Database schema
├── utils/                   # Shared utilities
│   ├── jwt.ts
│   ├── errors.ts
│   └── db.ts
├── Dockerfile
└── package.json

Conditional Files

Some directories and files are only generated based on your selected features and integrations. For example, (onboarding)/ is only created if onboarding is enabled, and event-queue/ only appears if the event queue is enabled.