Building Roomify AI-First 2D to Photorealistic 3D Architectural Visualizer
An in-depth look into how Roomify uses React Router v8, Puter Cloud Services, and Gemini 2.5 Flash Image Preview to turn flat 2D floor plans into photorealistic 3D architectural renders instantly.
Reading a 2D floor plan isn't easy for everyone. Architects and engineers can understand them quickly, but most clients struggle to imagine what the finished space will actually look like.
I built Roomify to make that process easier. Users can upload a floor plan, and within seconds the application generates a realistic top-down 3D view. They can compare the original and generated images, download a PDF report, and share their work with others.
Application Interface
The dashboard is designed to keep everything simple.
On the left, users can upload a floor plan by dragging and dropping an image or selecting it from their device. On the right, they can view previously generated projects and open them whenever they need.
Tech Stack
Roomify is built using modern web technologies that keep the application fast and scalable.
- Framework: React Router v8 (SSR)
- Frontend: React 19
- Styling: Tailwind CSS v4
- AI: Gemini 2.5 Flash Image Preview (via Puter AI)
- Backend: Puter Cloud (Authentication, Storage, KV, Workers, Hosting)
- Comparison Tool: React Compare Slider
- PDF Generation: jsPDF
Architecture
Instead of creating and maintaining a traditional backend with Express or Node.js, I used Puter Cloud to handle authentication, storage, and serverless functionality.
User authentication happens directly through Puter's SDK, uploaded images are stored in cloud storage, and project data is managed using Puter Workers with key-value storage. This approach keeps the application lightweight while removing the need to manage servers or databases.
For image generation, I carefully designed AI prompts so the model focuses on the actual layout instead of text labels or measurements. The prompts also help the AI understand walls, doors, windows, furniture placement, and room structure more accurately.
Features
- Upload floor plans using drag and drop or file selection.
- Generate realistic 3D architectural visualizations using AI.
- Compare the original floor plan and generated image with an interactive slider.
- Download high-quality PDF reports while preserving the original aspect ratio.
- Save projects automatically so users can access them later.
- Handle unstable network connections with automatic retry logic for uploads and rendering requests.
