Developer revealed how he built Roomify — an AI interior visualizer on React and Puter

Full-stack developer Andrey showed how he built Roomify — a web application that transforms an ordinary floor plan into a photorealistic 3D render in seconds. The project is interesting not only for the result, but also 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.

Serverless Architecture

At the core of Roomify lies a fairly modern yet 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 auxiliary 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 directly from the browser. This made it possible to build the project faster, without spending time on DevOps, setting up an API layer, and supporting your 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, receives a public URL, and passes it to the project creation worker function. If a render is needed, a separate ai.render3d worker is launched, which retrieves the source image, forms a prompt, calls Claude or Gemini, saves the finished image back to file storage, and updates the project metadata in KV. As a result, the client receives an almost fully-fledged API without its own server and communicates with it through puter.action calls.

How the Interior Is Generated

The heart of Roomify is a 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 take into account walls, windows, doors, select an 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 adjustment in Blender or 3ds Max and allows you to show the customer an understandable result much faster than with a classic interior rendering pipeline.

"Transform the given floor plan into a photorealistic 3D interior image"

On the frontend, everything is also done with an emphasis on a simple usage scenario. The main page shows a list of projects and allows you to upload a new plan, and the visualizer page automatically starts generation if the render doesn't exist yet. To compare the original drawing and the finished image, react-compare-slider is used so that the user immediately sees the difference between "before" and "after". The author also provided protection against re-running generation through useRef, because in React Strict Mode effects in development can trigger twice.

Project Bottlenecks

During the work, it turned out that the most complex part here is not the interface, but the coordination of platform constraints, AI models, and browser logic. Roomify had to be adapted to input file size, model response delays, and client state features. Some problems were solved quite pragmatically: through frontend validation, intermediate file saving separately from metadata, and additional flags that prevent the application from creating a project or generating a render twice.

• Limitation on input images: up to 10 MB and only JPG/PNG
• Generation time can reach 10–15 seconds
• Base64 is inconvenient to store directly due to data transmission limits
• In dev mode, React could launch generation again
• Mobile adaptation of compare-slider required separate refinement

At the same time, the project already works as a finished prototype, and the author's next step is quite applied: add interior style selection, edit the result after generation, support vector formats like SVG and DXF, a mobile application on React Native, and integrations with BIM systems.

Roomify in this form shows not ideal AI magic, but a real engineering scheme where a generative model is embedded in a user product and subordinate to a specific scenario — the quick transformation of a plan into a clear visualization.

What This Means

The story of Roomify shows that small AI products can already be built without a heavy backend and a long production cycle. For developers, this 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.