Roomify

AI-powered architectural visualization. Upload a floor plan, get a photorealistic 3D render in seconds.

Built with React Router v7, Puter.js, and an AI rendering pipeline.

What it does

• Upload a floor plan (JPG, PNG, WEBP up to 50MB)
• AI generates a photorealistic 3D visualization of the space
• Before/after comparison slider to see the transformation
• Projects are saved to your Puter account and accessible from any device
• Export renders as PNG or copy a shareable link

Tech stack

• React Router v7 — full-stack React framework with SSR
• Puter.js — auth, cloud file storage, KV store, and static hosting
• Puter Workers — serverless backend for project persistence
• TypeScript — end to end
• Tailwind CSS — styling

Getting started

Prerequisites

• Node.js 18+
• A Puter account
• A deployed Puter Worker (see below)

Installation

git clone https://github.com/NapoleonTheGreat1815/roomify
cd roomify
npm install

Environment variables

Create a .env file in the root of the project:

VITE_PUTER_WORKER_URL=https://your-worker.puter.work

See .env.example for reference.

Deploying the Puter Worker

1. Go to puter.com and open the Workers section
2. Create a new worker and paste the contents of puter.worker.js
3. Deploy it and copy the worker URL into your .env

Running locally

npm run dev

Building for production

npm run build
npm run start

Project structure

app/
├── routes/
│   ├── home.tsx          # Landing page and project grid
│   ├── visualizer.$id.tsx # AI render view with comparison slider
│   ├── product.tsx
│   ├── pricing.tsx
│   ├── community.tsx
│   └── enterprise.tsx
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── Upload.tsx
│   └── ui/
├── lib/
│   ├── puter.action.ts   # Auth and project CRUD
│   ├── puter.hosting.ts  # File upload to Puter static hosting
│   ├── ai.action.ts      # AI rendering pipeline
│   ├── utils.ts          # Image utilities
│   └── constants.ts
puter.worker.js           # Puter Worker — project KV storage API

License

MIT