3D Floor Map & Viewer
An interactive 3D map of a large office floor, built to replace a spreadsheet-based floor map for an IT team.
An illustrative 3D model made for this portfolio. See the screenshots for the real thing.
Screenshots
Screenshots use invented demo data: every name, team and hostname is made up.
Overview
IT teams often track desks and equipment in a color-coded spreadsheet. This app turns that into a 3D map where each desk can be clicked to see its setup and open issues, searched across floors, and edited with a built-in layout editor.
Problem
A spreadsheet floor map is hard to search, easy to break, and can only be edited safely by one person at a time.
Solution
A 3D and top-down plan view with search, status colors, a layout editor, Excel import, reports and live collaboration.
Architecture
React Three Fiber renders the floor, using GPU instancing so large floors stay fast. Zustand holds app state, and Supabase provides accounts, live updates and daily backups.
Stack
Key features
- 3D and top-down plan views, with click-to-inspect desks
- Search across floors that flies the camera to the result
- Layout editor with undo, redo and ready-made bays
- Excel import that reads an existing floor map
- Live cursors, an activity feed, reports and backups
Security notes
- Three roles (admin, IT, viewer) enforced by row-level security, and anyone without a role sees nothing
- Public sign-up is off, so accounts are created individually
- Every change is recorded in an activity history