Prototype Shell

Architecture & File Structure

The prototype lives under /prototype/ in the App Router. All pages share the same layout with PhoneFrame, BottomNav, and state management via usePrototypeState.

apps/web/src/
├── app/[locale]/prototype/   # Page routes (19 pages)
│   ├── layout.tsx            # PrototypeStateProvider + PhoneFrame
│   ├── page.tsx              # Entry router (→ home or onboarding)
│   ├── onboarding/           # 5-step onboarding flow
│   ├── home/                 # Home Feed
│   ├── explore/              # Explore + detail pages
│   ├── messages/             # Conversations
│   ├── dashboard/            # Host/Au Pair dashboard
│   ├── journey/              # Gamification journey
│   └── ...
├── components/
│   ├── prototype/            # 12 prototype-specific components
│   └── ui/                   # 9 reusable UI primitives
├── hooks/
│   ├── use-prototype-state.tsx   # 4-state context (localStorage)
│   └── use-perspective.tsx       # au-pair | host-family (cookie)
└── lib/
    └── prototype-mock-data.ts    # Types + mock data collections

Prototype States

The prototype has 4 states that control navigation, content, and visible features. State is persisted in localStorage.

const { state, setState, isAuPair, isHostFamily, isSearching, isMatched } = usePrototypeState();
// state: "ap-searching" | "ap-matched" | "hf-searching" | "hf-matched"
// Persisted in localStorage("aupairgo-prototype-state")

Layout Shell

Responsive design: fullscreen on mobile, iPhone frame with state switcher on desktop.

Mobile (< sm)              Desktop (>= sm)
┌────────────────┐         ┌─────────────────────────────────┐
│ Full-screen    │         │  Backdrop (stone-900/60 blur)   │
│                │         │                                 │
│ ┌────────────┐ │         │  ┌──────────┐  ┌────────────┐  │
│ │ ProtoHeader│ │         │  │ PhoneFrame│  │   State    │  │
│ ├────────────┤ │         │  │ 390×844px │  │  Switcher  │  │
│ │            │ │         │  │           │  │            │  │
│ │  Content   │ │         │  │  Content  │  │ ● ap-search│  │
│ │  (scroll)  │ │         │  │  (scroll) │  │ ● ap-match │  │
│ │            │ │         │  │           │  │ ● hf-search│  │
│ ├────────────┤ │         │  ├───────────┤  │ ● hf-match │  │
│ │ BottomNav  │ │         │  │ BottomNav │  └────────────┘  │
│ └────────────┘ │         │  └──────────┘              [✕]  │
└────────────────┘         └─────────────────────────────────┘

Every page follows the same structure: Header → scrollable content → BottomNav.

// Every prototype page follows this pattern:
<div className="flex flex-1 flex-col overflow-hidden bg-stone-50">
  <ProtoHeader title="..." showBack />    {/* or <HomeHeader /> */}
  <div className="flex-1 overflow-y-auto">
    {/* Page content */}
  </div>
  <BottomNav />
</div>

Navigation

Dynamic bottom tabs change based on state. Additional pages are accessible via the More menu.

Bottom Tabs (state-dependent)

More Menu (always available)

Pages & Routes

19 pages organized in 5 categories: Entry, Main Tabs, More Menu, Actions, and Detail views.

Prototype Components

12 specialized components for the prototype. All live under components/prototype/.

UI Primitives

9 reusable base UI components based on Shadcn/Radix. Located under components/ui/.

Color Scheme

Data Model & Mock Data

All data comes from prototype-mock-data.ts. Defines types and static test data for the prototype.

Post Categories

Internationalization

All texts are translated via next-intl. Prototype translations use the 'prototype.*' namespace in JSON files.

// Namespaces in messages/{locale}.json:
prototype.nav.*          // Bottom nav labels
prototype.home.*         // Home page
prototype.explore.*      // Explore page
prototype.messages.*     // Messages
prototype.dashboard.*    // Dashboard
prototype.profile.*      // Profile
prototype.journey.*      // Journey (gamification)
prototype.learning.*     // Learning
prototype.perks.*        // Perks
prototype.create.*       // Create post
prototype.notifications.* // Notifications
prototype.favorites.*    // Favorites
prototype.settings.*     // Settings
prototype.help.*         // Help
prototype.onboarding.*   // Onboarding flow
prototype.common.*       // Shared labels (back, save, cancel...)

// 14 active locales:
de (default), en, es, fr, id, it, ka, nb, ne, nl, pt, th, uk, zh