Roomatic

Main screen
Adding furniture
Sharing room

Inspiration

We've all experienced the frustration of losing items in storage—digging through boxes, forgetting what's where, and wasting time searching for things we know we own. Traditional storage solutions lack visibility and organisation, turning our rooms into chaotic mases. We wanted to create a solution that brings clarity to physical storage through digital visualisation, making it easy to track, find, and organise belongings in a 3D space.

What it does

Roomatic is an interactive 3D room storage organiser that helps users visualise and manage their physical storage spaces. Users can:

Design their storage layout by dragging and placing various furniture types (wardrobes, cabinets, shelves, bins) in a virtual 3D room
Track items by adding detailed inventories to each storage container
Search instantly with a powerful search feature that highlights which containers hold specific items
Organise efficiently with collision detection, and rotation controls
Create multiple rooms to organize different spaces independently

How we built it

We built Roomatic using:

React for component-based UI management and state handling
React Three Fiber and Three.js for rendering the 3D room environment
@react-three/drei for advanced 3D controls and helpers (camera controls, grids, lighting)

Challenges we ran into

Learning how to render 3D space and model a room

Accomplishments that we're proud of

Creating a fully functional 3D storage management system

What we learned

3D web development requires careful consideration of performance, especially with raycasting and collision detection running every frame
State management in 3D applications is fundamentally different from traditional 2D apps—position, rotation, and interaction state must be carefully orchestrated

What's next for Roomatic

Adding custom room shapes that can better reflect an actual room
QR code support for linking a storage space to the list of applications displayed on the app