Roomify is an interactive, browser-based 2D interior design application that allows users to layout and furnish rooms in real time. Designed with a clean and modern user interface, the application enables users to set custom room dimensions and drag-and-drop realistic furniture models—such as sofas, beds, doors, and windows—directly onto a floor plan. Once placed, items can be selected, moved, rotated, and scaled. The app also features an inspector panel for fine-tuning coordinates and dimensions, along with a toggleable grid-snapping system to ensure clean, precise layout alignments.
Under the hood, the project is engineered using React, Vite, and TypeScript, styled with Tailwind CSS. Rather than relying on heavy external canvas frameworks, the interactive floor plan is built entirely with native inline SVGs. This architecture guarantees that the room scales responsively to fit any screen size and remains crystal clear at any zoom level. From a software design perspective, the application maintains a strict separation of concerns by storing all room and furniture coordinates in real-world meters, translating them into pixels dynamically only during the render cycle to keep scaling and snapping logic mathematically clean.
To deliver a premium, lag-free user experience, the application implements advanced frontend event handling. While the initial catalog transfer is handled by the HTML5 Drag and Drop API, layout translation, rotation, and resizing are powered by native React Pointer Events combined with the Pointer Capture API to lock mouse tracking during fast movements. By resolving event propagation and event bubbling challenges, the app seamlessly coordinates background click-to-deselect behaviors with persistent, stateful interactions in the properties inspector, showcasing advanced state synchronization and DOM manipulation skills.