Spatium
Brand-Agnostic 3D Gym Floor Planner
A web-based 3D gym floor planning tool that lets gym managers and equipment managers design, reconfigure, and optimize their facility layouts. Users define room dimensions, place equipment with real-world sizing, and manipulate objects in a live 3D space. The product is freemium: core planning is free, with premium features unlocked via subscription.
Tech Stack
Results & Metrics
Challenges Faced
Real-Time 3D Performance
A floor plan can hold hundreds of equipment items, all of which must render and respond to dragging at 60fps inside the browser without dropping frames.
Spatial Accuracy & Collision
Equipment must be sized to real-world dimensions, snap cleanly to a grid, and detect overlaps and clearance violations so layouts are physically buildable.
Serializable, Undoable State
The entire layout needs to serialize to JSON for storage, version history, and collaboration — while supporting first-class, low-latency undo/redo on every change.
How I Solved Them
Instanced R3F Rendering
Built the editor in React Three Fiber with instanced meshes, BVH-accelerated raycasting, and ref mutation inside the render loop to sustain 60fps with 200+ items.
Pure Layout Engine
Isolated collision, clearance, snapping, and zoning into a pure-TypeScript engine with zero React/Three.js imports — fully unit-testable without a WebGL context.
Undoable Zustand Store
Held the canonical layout in a Zustand store where every mutation flows through named, undoable actions backed by Immer patches for cheap structural sharing.
System Architecture
Turborepo monorepo with a Next.js App Router frontend and a React Three Fiber 3D editor. Layout state lives in a Zustand store with Immer-based undo/redo, backed by a pure-TypeScript engine for collision, clearance, snapping, and zones. Layouts persist as JSON in Prisma + Neon Postgres, with Clerk for org-level auth and S3/R2 for GLB equipment models.