Roomify

Roomify is an AI‑assisted design environment that lets you upload floor plans, generate 3D‑style visualizations, and compare “before & after” views in a modern, browser‑based UI.
It is built on React Router’s SPA architecture and integrates with the Puter platform for authentication, storage, and static hosting of rendered assets.

Features

• AI visualization
  • Upload a floor plan image and generate a rendered visualization via the generate3DView workflow.
  • See progress and status while rendering.
• Before & After comparison
  • Interactive slider to compare the original floor plan against the generated render.
• Project history
  • Projects are persisted via Puter KV storage and listed on the home page.
  • Each project can be reopened in the visualizer for further review.
• Sharing & export
  • Export the rendered image as a PNG file.
  • Share a hosted link to the rendered image, backed by Puter hosting.
• Authentication
  • Sign in/out using Puter authentication.
  • User context (ID, username, sign‑in state) is exposed to route components via Outlet context.

Tech Stack

• Frontend
  • React + TypeScript
  • React Router (SPA mode with route modules)
  • Vite
• UI & Icons
  • Custom CSS (app/app.css)
  • lucide-react for icons
• Platform Integration
  • @heyputer/puter.js for auth, KV storage, and hosting
  • Custom Puter worker (lib/puter.worker.js) for project CRUD

Project Structure (high level)

• app/root.tsx – Root layout, auth state management, and route outlet.
• app/routes/home.tsx – Landing page, upload flow, and projects listing.
• app/routes/visualizer.$id.tsx – Visualizer/editor for a single project (render, compare, share, export).
• components/ – Reusable UI components (Navbar, Upload, ui/Button, etc.).
• lib/ai.action.ts – AI render orchestration (generate3DView).
• lib/puter.action.ts – Puter API helpers (auth, createProject, getProjects, getProjectById).
• lib/puter.hosting.ts – Static hosting utilities for project images.
• lib/puter.worker.js – Worker routes for saving, listing, and fetching projects.
• type.d.ts – Shared TypeScript types (projects, auth state, hosting, etc.).

Prerequisites

• Node.js (LTS recommended)
• A Puter account and app configuration, with:
  • Valid credentials for @heyputer/puter.js
  • A configured Puter worker deployment or dev environment for lib/puter.worker.js

Installation

git clone <your-repo-url> roomify
cd roomify
npm install

Configuration

Create a .env (or .env.local) file in the project root as needed and ensure the following environment variable is set (name may vary depending on your deployment setup):

• VITE_PUTER_WORKER_URL – Base URL for the Puter worker that handles project save/list/get endpoints.

The app expects the worker to expose:

• POST /api/projects/save
• GET /api/projects/list
• GET /api/projects/get?id=<projectId>

as implemented in lib/puter.worker.js.

Development

Start the Vite dev server:

npm run dev

By default, the app runs at http://localhost:5173 (or the port Vite reports in your terminal).

During development:

• The home page (/) provides upload and project history.
• Clicking a project card navigates to /visualizer/:id, where you can render, compare, export, and share images.

Production Build

Create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

Sharing Behavior

• When you export a project, Roomify downloads a PNG of the current rendered view.
• When you use Share in the visualizer:
  • The app shares or copies the hosted renderedImage URL (from Puter hosting), which is publicly accessible.
  • If the Web Share API is available, it opens the native share sheet; otherwise, it falls back to copying the link or prompting the user to copy it.