IntroductionProject structure

8-Hour App follows a simple rule:

• Routes live in src/app/
• Features live in src/features/
• Reusable building blocks live in src/shared/

Folder map (high level)

text

app/ — navigation (screens)

Expo Router is file-based routing: a file is a screen.

Typical patterns:

• Tabs: src/app/(tabs)/[tab]/index.tsx
• Pages: src/app/[route]/[page].tsx
• Root layout/providers: src/app/\_layout.tsx

Keep screens thin. Screens should mostly compose UI + call feature/shared code.

features/ — what your app does

Each folder is a feature module you can:

• keep
• delete
• or duplicate to build something new.

Good feature modules usually contain:

• feature screens/components
• feature-specific hooks
• feature-specific helpers

Vibe-coding workflow: copy an existing feature folder, rename it, replace the UI + logic, and keep shared patterns.

shared/ui/

Reusable UI components built with Tamagui. If you’re about to create a button/card/input from scratch, check here first.

shared/config/

Personalization only. This is where your app becomes “your app”:

• onboarding flow (onboarding.config.ts)
• feature toggles
• prompts/copy/settings defaults

Do not put SDK setup here.

shared/lib/

Infrastructure and clients:

• Supabase client
• analytics SDK init
• purchase SDK init
• anything that talks to the outside world

shared/store/

Zustand state and persistence. Treat it like your local database.

Naming & conventions

• Files: kebab-case (main-button.tsx)
• Components: PascalCase (MainButton)
• Functions/vars: camelCase
• Prefer import type { ... } for type-only imports.

Path aliases (use them)

Aliases are configured so you avoid ../../../.

• @/ → ./src/
• @images/ → ./assets/images/
• @icons/ → ./assets/icons/

Example:

typescript

Where to change what

• Flow / copy / onboarding / toggles: src/shared/config/
• SDK wiring / clients: src/shared/lib/
• Screens & navigation: src/app/
• Feature code: src/features/