Schedule Design Patterns

Lessons extracted from building the /europe/schedule page — a single-file (~2000 line) React component with a 2D room×time grid, 1D session list, modal detail view, multi-axis filtering, favorites, theming, and semantic search.

Architecture

Single-file component is fine for schedule pages

The entire page lives in one .tsx file. Sub-components (TypeBadge, SpeakerPhoto, SessionModal, GridOverview, SessionCard, FilterPill, StarButton) are defined in the same file. This avoids prop-drilling across module boundaries and keeps the schedule self-contained. Extract to separate files only when reuse is needed elsewhere.

Build-time data extraction with getStaticProps

Raw JSON (with nullable/optional fields) is normalized at build time into clean ScheduleSession objects with guaranteed string fields (empty string, not null). This eliminates null checks throughout the render logic.

Synthetic plenary sessions

Plenary/logistics sessions (breakfast, lunch, expo hours) are hardcoded as a PLENARY_SESSIONS array and merged with speaker sessions at build time. They get id: 10000 + i to avoid collisions.

Theme System

Semantic token objects, not CSS variables

Define a Theme type with ~40 semantic tokens (bg, bgCard, text, textSecondary, border, accent, gridHeaderBg, starActive, etc.). Create DARK_THEME and LIGHT_THEME constants. Pass t: Theme and isDark: boolean to every sub-component.