Developer shows how he built Roomify, an AI interior visualizer on React and Puter

Full-stack developer Andrey has shown how he built Roomify, a web app that turns an ordinary floor plan into a photorealistic 3D render in a few seconds. The project is interesting not only for its output but for its architecture: instead of a classic backend, it uses React on the client and the Puter platform for file storage, KV data, serverless workers and AI model calls.

A serverless architecture

Roomify rests on a fairly modern but pragmatic stack: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React and the Puter.js SDK. The author chose Puter not as an add-on service but as a practical replacement for a separate server. The platform provides file storage, a key-value database, serverless workers and access to AI models straight from the browser. That let him build the project faster, without spending time on DevOps, API-layer setup or maintaining his own server infrastructure.

The data flow looks like this: the user uploads a floor plan in the browser, the frontend sends the file to Puter, gets a public URL back and passes it to the project-creation worker function. When a render is needed, a separate ai.render3d worker starts. It fetches the source image, builds a prompt, calls a Claude or Gemini model, saves the finished image back to file storage and updates the project metadata in KV. The result is that the client gets a nearly full-fledged API without its own server, and talks to it through puter.action calls.

How the interior is generated

The heart of Roomify is the function that generates a 3D view from a 2D plan. In the worker, the author describes the scene in text: he asks the model to account for walls, windows and doors, choose a camera angle, add furniture, materials, light and shadows, and then return an image in the style of professional architectural visualization. This approach does not require manual scene setup in Blender or 3ds Max, and it lets you show a client a clear result noticeably faster than a classic interior-rendering pipeline.

"Convert this floor plan into a photorealistic 3D image of the interior"

The frontend is likewise built around a simple use case. The home page lists projects and lets you upload a new plan, while the visualizer page automatically starts generation if there is no render yet. react-compare-slider compares the original drawing with the finished image, so the user sees the difference between "before" and "after" right away. The author also added protection against re-triggering generation using useRef, because in React Strict Mode effects can fire twice in development.

The project's bottlenecks

As work progressed, it turned out that the hardest part was not the interface but reconciling the limits of the platform, the AI models and the browser logic. Roomify had to be adapted to input file size, model response latency and quirks of client-side state. Some problems were solved in fairly down-to-earth ways: frontend validation, saving files separately from metadata, and extra flags that stop the app from creating a project or generating a render twice.

• Input image limit: up to 10 MB, JPG/PNG only
• Generation can take up to 10–15 seconds
• Base64 is awkward to store directly because of limits on transferred data
• In dev mode, React could trigger generation again
• Mobile adaptation of the compare slider needed separate tuning

The project already works as a finished prototype, and the author's next steps are quite practical: adding interior style selection, editing results after generation, support for vector formats such as SVG and DXF, a mobile app on React Native, and integrations with BIM systems. In this form, Roomify shows not perfect AI magic but a real engineering design in which a generative model is embedded in a user-facing product and subordinated to one specific scenario: quickly turning a plan into a clear visualization.

What this means

The Roomify story shows that small AI products can already be built without a heavy backend and a long production cycle. For developers, it is a signal that the combination of React, serverless platforms and multimodal models is becoming sufficient to quickly test ideas at the intersection of design, real estate and visual content.