TBP Fellows Directory
An interactive 3D yearbook for The Bridge Program's 2026 cohort, bringing 286 fellow profiles and nearly 1,000 event memories into navigable infinite canvases.
Project Overview
TBP Fellows Directory is an interactive digital yearbook and memory archive for The Bridge Program's 2026 cohort. Instead of presenting a conventional grid, it uses React Three Fiber and Three.js to place fellow portraits throughout a continuously navigable 3D canvas. Selecting a portrait opens a detailed profile, while a searchable directory provides a structured alternative for finding people. A second infinite canvas presents event memories across 999 photographs and videos, including proximity-aware audio for video content. Supabase stores fellow records, event metadata, and profile-change requests; Cloudinary delivers optimized media; and an AI-assisted moderation workflow helps administrators review proposed profile edits. The application is deployed on Vercel and adapts texture quality, preload volume, and concurrency to the user's device and network conditions.
Key Features
- Infinite Fellows Canvas — explore 286 cohort portraits through a responsive 3D space with mouse, keyboard, touch, and device-orientation controls
- Memories Canvas — browse nearly 1,000 event photos and videos with adaptive media delivery and proximity-aware audio
- Searchable Directory — find fellows by name and explore profiles containing university, camp, house, biography, contact details, and social links
- Profile Update Workflow — fellows can submit identity, biography, social, contact, and cropped-photo changes for review without directly modifying live data
- AI-Assisted Moderation — Mistral vision and text models help review profile-change requests while preserving human approval controls
Challenges & Solutions
- Rendering hundreds of textured media planes without exhausting browser memory, solved with chunk-based spatial rendering, depth and distance culling, throttled updates, and bounded LRU caches
- Distributing recurring portraits across an unbounded 3D space without visible nearby duplicates, solved with deterministic seeded permutations and coprime lattice strides
- Serving large photo and video collections across variable network conditions, handled through Cloudinary transformations, connection-aware quality settings, controlled texture concurrency, and progressive loading
- Keeping local fallback manifests and Supabase records synchronized while ensuring approved profile and headshot updates propagate immediately across the canvas and directory
- Supporting desktop and mobile navigation consistently, including inertial panning, pinch zoom, keyboard flight controls, touch gestures, and browser audio-unlock restrictions
System Architecture
Architecture
| Layer | Responsibility | Technology |
|---|---|---|
| Presentation | Fellows canvas, memories canvas, directory, profile editing, admin review | React 19, TypeScript, CSS Modules |
| 3D rendering | Spatial chunk generation, camera movement, texture planes, culling, proximity audio | Three.js, React Three Fiber, Drei, WebGL |
| Data | Fellow profiles, event media, profile-update requests and review functions | Supabase REST and PostgreSQL |
| Media | Responsive image/video transformations and CDN delivery | Cloudinary |
| Moderation | Conservative text and portrait review for submitted profile changes | Mistral AI |
| Delivery | Vite production bundle and hosting | Vercel |
Rendering pipeline
The camera position is mapped to 110-unit spatial chunks. Only chunks within the configured render distance are generated, while planes outside the depth and distance thresholds fade out and stop rendering. Deterministic hashing assigns media to each chunk, and bounded plane and texture caches prevent an unbounded canvas from producing unbounded memory use.
Data flow
The application loads a local manifest as an offline-safe baseline, fetches up to 1,000 Supabase records, and merges remote fields over matching IDs or slugs. Profile edits are written to a review queue rather than directly to live fellow records. Approved changes are applied through controlled database functions and immediately merged back into the client state.
Database Design
Supabase data model
- fellows — identity, name, university, cohort grouping, photo, biography, contact details, and social links
- event_media — source folder, media type, optimized and original URLs, dimensions, duration, and byte size
- fellow_profile_requests — proposed field changes, changed-field list, AI verdict and reasoning, review status, reviewer note, and timestamps
Public clients use the Supabase publishable key for approved read and request-submission flows. Administrative review operations are exposed through restricted database functions rather than embedding service credentials in the browser.