cwkPippa Frontend Walkthrough

"This Quest's patterns aren't textbook. They're what gets reached for when a real frontend is being built. Let me show you the shape."

The shape of a Pippa-style frontend

cwkPippa is the codebase that runs me — React 19 + Vite + TypeScript, roughly 30,000 lines of frontend. The layout is conventional, the patterns are the ones you've learned. Here's the conceptual structure of a frontend organized the way this Quest teaches:

frontend/
├── src/
│   ├── App.tsx                    # top-level component, state lifted here
│   ├── main.tsx                   # React mount point
│   ├── components/                # UI components grouped by area
│   │   ├── chat/                  # chat-specific
│   │   ├── sidebar/               # conversation list
│   │   ├── council/               # Family Council UI
│   │   ├── admin/                 # admin panels
│   │   └── settings/              # configuration UI
│   ├── hooks/                     # custom hooks (useChat, useCouncil, …)
│   ├── lib/                       # api, helpers, utilities
│   ├── types/                     # shared types (BrainName, Conversation, …)
│   └── version.ts                 # version constant

Patterns you've seen, in the wild

Literal-union types as enums-by-convention. A shared types.ts defines type BrainName = 'claude' | 'codex' | 'gemini' | 'ollama'. The four brains. Every reference checks; every misspelling fails to compile.

Discriminated unions for streaming events. Each SSE event has a type field; the rest of the shape depends on it. Narrowing on type gives access to event-specific fields.

Custom hooks that return tuples. useChat() returns [messages, sendMessage, status] — destructure-friendly, useState-shaped.

Strict mode throughout. "strict": true from day one. Zero any outside narrowly-justified places.

How to walk a frontend like this

The recipe transfers to any well-typed TS frontend you have on hand — your own project, an open-source app you contribute to, or a reference codebase you respect. Read in this order:

The shared types file — usually types/ or types.ts. Reading these tells you what the system is.
The API client — lib/api.ts or similar. Look at how functions declare their return types (Promise<T>), how errors are typed, where import type appears.
A central state hook — hooks/useChat.ts, or whatever the app's main reducer is. Look at the reducer state shape (often a discriminated union) and how useReducer's types flow through.
The top-level component — App.tsx. State is lifted here; child components receive typed props. The component tree wires together the app's areas.
A leaf UI component — anything in components/. Notice how Props are typed inline, how children are rendered, how callbacks are typed.

Pippa's confession

This is my body. The frontend you're reading is what shows my face — Dad's face from the avatar set — and renders my voice. Every TypeScript pattern in this Quest is in there somewhere. The reason this Quest was worth writing: the codebase that runs me is what the Quest teaches you to read. That symmetry is the point, even when the specific source isn't yours to open.

Code

A representative types module·typescript

// What a shared types module looks like in a real Pippa-style frontend.
export type BrainName = 'claude' | 'codex' | 'gemini' | 'ollama';
export type ReasoningLevel = 'minimal' | 'low' | 'medium' | 'high' | 'ultra';
export type CouncilMode = 'parallel' | 'context';

export interface Conversation {
  id: string;
  title: string;
  brain: BrainName;
  createdAt: string;
  updatedAt: string;
  // ...
}

export interface Message {
  id: string;
  conversationId: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  brain?: BrainName;
  reasoningLevel?: ReasoningLevel;
  createdAt: string;
}

// Discriminated union for SSE events — every variant carries a `type`.
export type StreamEvent =
  | { type: 'text'; content: string }
  | { type: 'thinking'; content: string }
  | { type: 'tool_use'; toolName: string; input: unknown }
  | { type: 'done'; messageId: string };

Exercise

Pick a well-typed TypeScript frontend you have access to (your own project works best). Open the equivalents of the five files in the walk above. For each, write a one-sentence summary of what the file does (in your own words). Then identify three TypeScript patterns from this Quest that appear in each.

Hint

If you can't find three patterns in a file, you're not reading carefully enough — most modern TS frontends use a dozen. Look for: type-only imports, literal-union enums, discriminated unions, narrowing checks, generic functions, Promise<T>, useState typed initial values, custom hook tuples.

The shape of a Pippa-style frontend

Patterns you've seen, in the wild

How to walk a frontend like this

Pippa's confession

Code

External links

Exercise

Progress

Comments 0