Architectural Visualization
Roomify
From blueprint to built space, instantly, with AI.
- React · React Router · TypeScript · Tailwind CSS · Puter.js · Gemini
- Live · community feed in progress
OVERVIEW
Roomify turns a 2D floor plan into a top-down 3D render of the same space. Upload the plan, press one button, and Gemini returns a render whose walls follow your drawing. Every plan and render is stored permanently, each project lands in a personal gallery, and a slider compares the render against the original plan.
WHAT I FOUND → WHAT I DECIDED
- Puter.js already covers auth, file storage, a key-value database and serverless workers — all from the browserNo backend to run: a static single-page app on Vercel
- Puter's file storage returns no permanent URL, and its shareable links expire in a dayStore the file path, and mint a short-lived view URL whenever a screen needs the image
- A key-value store has no queriesShape the keys up front so the public feed never scans every key a user has written
- Secondary text and the accent measured under 4.5:1 contrastCorrected both colours to meet the accessibility baseline
WHAT IT DOES
- Floor plans go to permanent storage, referenced by path — never a blob URL that dies with the tab.
- One call to Gemini through a Puter worker returns the render; the plan shows blurred while it works.
- Every project is kept in a personal gallery, each card pairing the plan with its render.
- A slider moves between the original floor plan and its render.
- In progress: public projects appear in a community feed anyone can browse without an account.
HOW IT WAS BUILT
Built as a thin working slice first — one floor plan reaching the model and coming back as a hosted render — then thickened feature by feature. A living scope file tracks what is built, and each feature gets a written spec before any code, corrected when building proves the plan wrong.