Building a browser-based room planner with Codex: what I learned

I am creating a free browser tool called Small Room Solver, designed to help users experiment with different furniture layouts before moving furniture around their space. Users can draw their room, input furniture measurements, and easily move items in 2D, with an option to view the arrangement in 3D. There's no need for an account, and any changes made are saved locally within the browser unless the user chooses to share a snapshot.

I utilized OpenAI Codex to build and troubleshoot the application. The technology stack includes Astro, React, and TypeScript, with SVG for the 2D editor and Three.js through React Three Fiber for the 3D preview. Changes are saved locally in IndexedDB, and the project's constraints are outlined in an AGENTS.md file, ensuring features such as accurate measurements and local edits remain consistent.

While developing Small Room Solver, I focused on iterative improvements: describing a desired behavior, implementing it using Codex, verifying the results in the browser, and adjusting as needed. I also incorporated frontend design and accessibility skills into the project. For the geometry and other core logic, I used Vitest, and Playwright was employed to test browser interactions and accessibility.

A few key lessons from building Small Room Solver are to keep measurements separate from the artwork. The entered dimensions are stored as integer millimetres to maintain precision. The canvas zoom, furniture illustrations, and 3D view all utilize the same underlying measurements, ensuring consistency across different views. Undo functionality follows the user's actions, and a drag operation to add furniture generates multiple pointer updates but only creates a single Undo step. Grouping those updates into a single gesture required explicit handling in the editor state.

When loading the 3D preview, it's triggered upon request to avoid loading it during the initial editor load, which helps keep the application lightweight. If there are issues with the 3D renderer, the 2D editor remains functional and usable. Currently, I'm working on improving the first-time experience for users. Many people have reached the website, but I haven't received much feedback or usage from the planner feature yet.

To address this, I've simplified the controls and added a short, silent looping demo to showcase what users can do before accessing the planner. I'm curious to know what aspects of the planner feel confusing or hinder progress when rearranging a bedroom or home office. You can check it out at https://smallroomsolver.com/.