Building Beyond CRUD with Claude and Codex: How we Created an Interactive Digital Museum

Most conversations about AI coding tools revolve around how swiftly they can produce a landing page or set up an application. However, the author sought to delve into more complex engineering tasks when building Loupe, an interactive digital museum using Claude and Codex. Visitors can explore planetary worlds, examine dinosaurs, investigate jet engines, trace human evolution, and witness Apollo 11’s lunar descent.

The focus lies in the underlying mechanisms that bring these experiences to life, such as content, application state, rendering, and user input, and how AI coding agents can assist in constructing and perfecting this system.

The project architecture relies on multiple technologies, including Next.js and React Routes for page composition and interactive interfaces, TypeScript for contracts between content, state, and rendering, Three.js for geometry, materials, lighting, cameras, and shaders, React Three Fiber for composing Three.js scenes via React Drei, model loading, orbit controls, and other scene utilities, GSAP for motion and animation tooling, Zustand for shared interaction state, Vitest for content, calculation, state, and component tests, Playwright for browser-level interaction tests, and Vercel for hosting.

The central challenge lies in coordinating two separate systems. React manages user decisions like selecting a planet, opening an evidence panel, or changing viewing modes. Meanwhile, the 3D renderer manages continuously altering properties, such as camera position, rotation, and shader time. To avoid forcing the entire interface to update with every movement, Loupe separates content, logic, and presentation.

Content is handled by content layers, while logic is managed by logic layers, and presentation is dealt with by component layers.

This separation proves beneficial when working with AI agents. For instance, a task can focus on a specific responsibility, such as fixing how a selected planetary feature is aligned with the camera, without affecting content or comparison controls. Such targeted approaches are more manageable and reviewable than a general request to enhance the planet page.

Rendering a world in the Atlas of Worlds involves combining procedural geometry with loaded textures and selected model assets. A globe can be represented as a sphere, with its appearance determined by the surface map, material, lighting, orientation, and extra layers. Different modes introduce distinct representations, such as interior layers, rings, magnetic-field guides, or mission-related geometry.

This approach demonstrates that a detailed appearance isn't always necessary through a complicated imported mesh; often, the texture and material suffice to capture the necessary detail.

The canvas configuration explicitly outlines rendering choices, such as camera settings, device pixel ratio, and WebGL parameters. These factors significantly impact how the GPU processes pixels on high-density screens and the overall visual quality of the final result. State management coordinates the entire exhibit, with selections influencing various aspects like available modes, selected features, lighting defaults, comparison state, camera commands, and explanatory content.

Zustand stores this state information, enabling seamless transitions between worlds while preserving relevant data and ensuring a smooth user experience.