An AI-first design environment that transforms 2D floor plans into photorealistic 3D architectural renders instantly.
Roomify eliminates the need for complex, manual 3D modeling by leveraging generative AI. Designed for architects, interior designers, real estate agents, and hobbyists, it provides a seamless drag-and-drop interface to rapidly prototype and visualize spaces.
- Instant 3D Rendering: Upload a 2D floor plan and get a highly detailed, top-down 3D render generated by Gemini 2.5 Flash.
- Zero-Config Backend: Powered entirely by Puter.js, handling authentication, key-value storage, and static file hosting seamlessly.
- Drag & Drop Uploads: A smooth, intuitive file upload experience with simulated progress feedback for excellent UX.
- Modern Full-Stack Architecture: Built on the newly released React Router v7 (absorbing Remix capabilities) for optimized client and server-side routing.
- Beautiful, Utility-First UI: Styled with Tailwind CSS v4 and Lucide React icons for a clean, professional aesthetic.
- Framework: React Router v7 (TypeScript)
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Backend-as-a-Service: Puter.js (Auth, KV Database, File System Hosting, AI)
- AI Model: Gemini 2.5 Flash (via Puter AI
txt2img) - Tooling: Vite, Docker
roomify/
├── app/ # Application core
│ ├── root.tsx # Root layout and global Puter auth provider
│ ├── routes.ts # Centralized routing configuration
│ ├── app.css # Global Tailwind v4 theme CSS variables
│ └── routes/ # Page components (home.tsx, visualizer.$id.tsx)
├── components/ # Reusable UI components
│ ├── ui/ # Base UI elements (Button, etc.)
│ ├── Navbar.tsx # Global navigation and auth controls
│ └── Upload.tsx # Drag-and-drop file uploader with progress animation
├── lib/ # Business logic and external service integrations
│ ├── ai.actions.ts # Interface with Puter AI for image generation
│ ├── puter.action.ts # Puter Auth and KV database wrappers
│ ├── puter.hosting.ts # Puter FS operations for dynamic static hosting
│ └── constants.ts # Shared constants and core AI prompting logic
└── public/ # Static assets
Because Roomify uses Puter.js as a Serverless Backend, there is no need to configure a database, set up an auth provider, or manage API keys. Puter handles this contextually in the browser.
- Node.js (v18 or higher recommended)
- npm or yarn
-
Clone the repository:
git clone [https://github.com/BlaiseTAPPA/roomify.git](https://github.com/BlaiseTAPPA/roomify.git) cd roomify -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the app: Navigate to
http://localhost:5173in your browser.
Roomify includes a multi-stage Dockerfile optimized for minimal production builds.
# Build the Docker image
docker build -t roomify .
# Run the container
docker run -p 3000:3000 roomify- Authentication: Users sign in seamlessly via the Puter.js overlay.
- Upload: A 2D floor plan (
.pngor.jpg) is dropped into the uploader. - Hosting & State: The file is converted to a Base64 string, dynamically hosted on a newly provisioned Puter subdomain, and the user is routed to the visualizer.
- AI Generation: The visualizer passes the hosted image and a strict architectural prompt to Puter's AI service, querying the Gemini 2.5 model.
- Result: The UI updates with the generated 3D render, allowing the user to view their visualized space.
Contributions are welcome! If you'd like to improve Roomify, please feel free to fork the repository, create a feature branch, and submit a Pull Request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.