{"id":49627212,"url":"https://github.com/brave98git/roomify","last_synced_at":"2026-05-05T08:42:55.058Z","repository":{"id":339833632,"uuid":"1163197772","full_name":"brave98git/roomify","owner":"brave98git","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-21T19:54:00.000Z","size":119,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-22T00:48:51.861Z","etag":null,"topics":["fs-hoisting","kv","puterjs","react-router-v7","typescript","workers"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brave98git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-21T08:46:27.000Z","updated_at":"2026-02-21T20:02:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/brave98git/roomify","commit_stats":null,"previous_names":["brave98git/roomify"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/brave98git/roomify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brave98git%2Froomify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brave98git%2Froomify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brave98git%2Froomify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brave98git%2Froomify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brave98git","download_url":"https://codeload.github.com/brave98git/roomify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brave98git%2Froomify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32642293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fs-hoisting","kv","puterjs","react-router-v7","typescript","workers"],"created_at":"2026-05-05T08:42:54.492Z","updated_at":"2026-05-05T08:42:55.049Z","avatar_url":"https://github.com/brave98git.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🏗️Roomify\n\nRoomify is an AI-powered interior visualization web app that converts 2D floor plans into rendered 3D-style top-down images.\n\n## What This Project Does\n\n- Upload a floor-plan image (JPG/PNG).\n- Generate a rendered design view using Puter AI image generation.\n- Compare before/after with an interactive slider.\n- Save and load projects through a Puter Worker API.\n- Host project images on Puter Hosting.\n- Authenticate users with Puter Auth.\n\n## Tech Stack\n\n### Frontend\n\n- React 19\n- React Router 7\n- TypeScript\n- Vite\n- Lucide React\n- react-compare-slider\n\n### Backend / Services\n\n- Puter SDK (`@heyputer/puter.js`)\n- Puter Auth (sign in/out, current user)\n- Puter Workers (project API)\n- Puter KV (project metadata)\n- Puter FS (uploaded image storage)\n- Puter Hosting (public image URLs)\n- Puter AI (`txt2img` with `gemini-2.5-flash-image-preview`)\n\n## Repository Highlights\n\n- `app/routes/home.tsx`: Landing, upload entry, projects list.\n- `app/routes/visualizer.$id.tsx`: Render view, compare slider, export action.\n- `components/Upload.tsx`: Upload UX and FileReader flow.\n- `lib/ai.action.ts`: AI generation + URL-to-data URL conversion.\n- `lib/puter.action.ts`: Auth and project CRUD calls through worker endpoints.\n- `lib/puter.hosting.ts`: Hosting setup and image upload logic.\n- `lib/puter.worker.js`: Worker endpoints for save/list/get project operations.\n\n## Environment Setup\n\nCreate a `.env` file:\n\n```bash\nVITE_PUTER_WORKER_URL=\u003cyour_worker_base_url\u003e\n```\n\nInstall and run:\n\n```bash\nnpm install\nnpm run dev\n```\n\nBuild and typecheck:\n\n```bash\nnpm run typecheck\nnpm run build\nnpm run start\n```\n\n## API Endpoints (Worker)\n\nConfigured in `lib/puter.worker.js`:\n\n- `POST /api/projects/save`\n- `GET /api/projects/list`\n- `GET /api/projects/get?id=\u003cprojectId\u003e`\n\n## Project Flow (High Level)\n\n1. User signs in with Puter Auth.\n2. User uploads a floor plan in `Upload`.\n3. App creates project metadata and navigates to visualizer route.\n4. Visualizer calls AI generation from `lib/ai.action.ts`.\n5. Output images are uploaded/served through Puter Hosting.\n6. Project state is persisted via Worker + KV.\n7. User compares, exports, and revisits saved projects.\n\n## AI-Generated Interactive Diagrams\n\n### 1) System Architecture Map\n\n```mermaid\nflowchart LR\n  U[User]\n  H[Home Route]\n  V[Visualizer Route]\n  UP[Upload Component]\n  AI[AI Engine]\n  W[Worker API]\n  KV[KV Store]\n  FS[File Storage]\n  HOST[Public Hosting]\n  AUTH[Auth Service]\n\n  U --\u003e H\n  H --\u003e UP\n  UP --\u003e V\n  H --\u003e AUTH\n  V --\u003e AUTH\n  V --\u003e AI\n  V --\u003e W\n  W --\u003e KV\n  V --\u003e FS\n  FS --\u003e HOST\n\n  classDef client fill:#E8F1FF,stroke:#2F6FEB,stroke-width:1.5px,color:#0A3069;\n  classDef service fill:#EAFBF2,stroke:#1A7F37,stroke-width:1.5px,color:#0F5132;\n  classDef storage fill:#FFF8E6,stroke:#9A6700,stroke-width:1.5px,color:#7A4B00;\n\n  class U,H,V,UP client;\n  class AI,W,AUTH service;\n  class KV,FS,HOST storage;\n```\n\n### 2) End-to-End Render Sequence\n\n```mermaid\nsequenceDiagram\n  participant User\n  participant App as React App\n  participant Upload as Upload\n  participant Viz as Visualizer\n  participant A as AI Action\n  participant Host as Hosting Layer\n  participant Worker as Worker API\n\n  User-\u003e\u003eUpload: Select floor-plan file\n  Upload-\u003e\u003eApp: onComplete(base64)\n  App-\u003e\u003eWorker: createProject(sourceImage)\n  Worker--\u003e\u003eApp: project saved (id)\n  App-\u003e\u003eViz: navigate(/visualizer/:id)\n  Viz-\u003e\u003eA: generate3DView(sourceImage)\n  A--\u003e\u003eViz: renderedImage (data URL)\n  Viz-\u003e\u003eHost: upload source + render\n  Viz-\u003e\u003eWorker: save updated project\n  Worker--\u003e\u003eViz: persisted project\n  Viz--\u003e\u003eUser: before/after compare + export\n```\n\n### 3) Visualizer State Machine\n\n```mermaid\nstateDiagram-v2\n  [*] --\u003e LoadingProject\n  LoadingProject --\u003e ReadyWithSource: project fetched\n  ReadyWithSource --\u003e Rendering: no rendered image\n  ReadyWithSource --\u003e ReadyWithRender: rendered image exists\n  Rendering --\u003e SavingResult: AI render success\n  SavingResult --\u003e ReadyWithRender: save success\n  Rendering --\u003e Error: AI failure\n  Error --\u003e Rendering: retry\n  ReadyWithRender --\u003e Exporting: user clicks export\n  Exporting --\u003e ReadyWithRender\n  ReadyWithRender --\u003e [*]\n```\n\n### 4) Worker Data Lifecycle\n\n```mermaid\nflowchart TD\n  SAVE[POST /api/projects/save] --\u003e AUTH1{Auth OK?}\n  AUTH1 -- No --\u003e E1[401]\n  AUTH1 -- Yes --\u003e VALID{Payload valid?}\n  VALID -- No --\u003e E2[400]\n  VALID -- Yes --\u003e UPSERT[kv.set roomify_project_\u003cid\u003e]\n  UPSERT --\u003e R1[200 Saved]\n\n  LIST[GET /api/projects/list] --\u003e AUTH2{Auth OK?}\n  AUTH2 -- No --\u003e E3[401]\n  AUTH2 -- Yes --\u003e READALL[kv.list roomify_project_]\n  READALL --\u003e R2[200 Projects]\n\n  GET[GET /api/projects/get?id] --\u003e AUTH3{Auth OK?}\n  AUTH3 -- No --\u003e E4[401]\n  AUTH3 -- Yes --\u003e HASID{ID provided?}\n  HASID -- No --\u003e E5[400]\n  HASID -- Yes --\u003e READONE[kv.get roomify_project_\u003cid\u003e]\n  READONE --\u003e FOUND{Project found?}\n  FOUND -- No --\u003e E6[404]\n  FOUND -- Yes --\u003e R3[200 Project]\n```\n\n## Notes\n\n- AI generation prompt is defined in `lib/constants.ts` (`ROOMIFY_RENDER_PROMPT`).\n- Hosted URL suffix validation uses `.puter.site`.\n- App currently relies on Puter services for auth, storage, and inference.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrave98git%2Froomify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrave98git%2Froomify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrave98git%2Froomify/lists"}