Full directory tree with explanations of every folder and file in the ScaleRocket Mobile app.

Project Structure

ScaleRocket Mobile follows Expo Router conventions with a clean separation of concerns.

Directory Tree

scalerocket-mobile/
├── app/                    # Expo Router screens (file-based routing)
│   ├── _layout.tsx         # Root layout (providers, auth guard)
│   ├── index.tsx           # Entry redirect
│   ├── (auth)/             # Auth route group (no tab bar)
│   │   ├── _layout.tsx     # Auth layout (stack navigator)
│   │   ├── login.tsx       # Login screen
│   │   ├── register.tsx    # Register screen
│   │   └── forgot-password.tsx
│   ├── (tabs)/             # Main app route group (tab bar)
│   │   ├── _layout.tsx     # Tab layout configuration
│   │   ├── index.tsx       # Home / Dashboard
│   │   ├── profile.tsx     # User profile
│   │   └── settings.tsx    # Settings screen
│   └── modal.tsx           # Modal screen example
├── components/             # Reusable UI components
│   ├── ui/                 # Base components (Button, Input, Card...)
│   └── screens/            # Screen-specific components
├── lib/                    # Utilities and configurations
│   ├── auth.ts             # Auth helpers
│   ├── theme.ts            # Theme context and colors
│   └── utils.ts            # General utilities
├── assets/                 # Static assets
│   ├── images/             # App images
│   ├── fonts/              # Custom fonts
│   └── splash.png          # Splash screen image
├── app.json                # Expo configuration
├── tsconfig.json           # TypeScript config
└── package.json            # Dependencies

Backend-Specific Files

lib/
├── supabase.ts             # Supabase client initialization
├── auth.ts                 # Auth with Supabase Auth
└── storage.ts              # Supabase Storage helpers

The Supabase client is initialized with expo-secure-store for token persistence.

convex/                     # Convex backend functions
├── _generated/             # Auto-generated types and API
├── auth.ts                 # Auth configuration
├── schema.ts               # Database schema
└── functions/              # Server functions (queries, mutations)
lib/
├── convex.ts               # Convex client provider
└── auth.ts                 # Auth helpers wrapping Convex Auth

The convex/ directory contains your backend logic. Types are auto-generated.

The `app/` Directory

Every file in app/ becomes a route. Folders with parentheses () are route groups that define layouts without adding a URL segment.

Path	Route	Purpose
`app/index.tsx`	`/`	Entry point, redirects to login or home
`app/(auth)/login.tsx`	`/login`	Login screen
`app/(tabs)/index.tsx`	`/` (with tabs)	Dashboard
`app/(tabs)/profile.tsx`	`/profile`	Profile
`app/modal.tsx`	`/modal`	Presented as modal

The `components/` Directory

Components are split into two categories:

components/ui/ — Generic, reusable components (Button, Input, Card, Avatar). No business logic.
components/screens/ — Components tied to specific screens (DashboardChart, ProfileForm). May contain business logic.

The `lib/` Directory

Shared utilities and configurations:

File	Purpose
`auth.ts`	Sign in, sign up, sign out helpers
`theme.ts`	Theme context, color tokens, useTheme hook
`utils.ts`	Date formatting, validation, general helpers

The `assets/` Directory

Static files bundled with the app:

images/ — PNGs, SVGs used in the app
fonts/ — Custom font files (loaded via expo-font)
splash.png — The splash screen image (1284x2778 recommended)
icon.png — The app icon (1024x1024)

Path Aliases

The @ alias resolves to the project root via tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Use @/components/ui/Button instead of ../../../components/ui/Button.

Project Structure

On this page