Build and Deploy a Full-Stack AI App (Completely Free)

High-level summary

• The video is a hands‑on course (hosted by Adrian) that builds “Roomifi” — a full‑stack, production‑grade AI SaaS app that converts 2D floor plans into photorealistic top‑down 3D renders.
• Emphasis is on building and deploying the entire app without paying infrastructure/vendor costs and without storing API keys or credit card info, by using a single unified platform (puter / “Pewtor” in subtitles). This platform provides serverless workers, KV storage, permanent file hosting, and AI endpoints under a “user‑pays” model.

Technology stack and third‑party tools

Frontend

• React (Vite) with TypeScript
• React Router v7
• Tailwind CSS
• Reusable UI components (Button, Navbar)
• Lucid React icons
• react-compare-slider for before/after image comparisons

Backend / platform

• puter.js (Pewtor) providing:
  • Authentication (signIn/signOut/getUser)
  • File system & hosting (write files and get public URLs)
  • KV key‑value store (fast zero‑config database)
  • Serverless Workers (secure backend API with developer identity)
  • AI APIs (text/image and image→image generation)

Developer productivity & AI tooling

• JetBrains WebStorm + Juny (AI coding copilot) for generating components/logic
• CodeRabbit — automated AI code review tool used on PRs
• GitHub for version control and PR workflow

Deployment

• Deploy to puter hosting (puter.site) or any static host like Vercel (only one env var needed for the worker URL)

Features implemented / app functionality

• Authentication flows via puter.js (no external auth or API keys required)
• Reusable UI components and Tailwind‑based layout
• Drag & drop file uploader with progress animation, file validation and fallback text (Juny‑generated)
• Permanent hosting of uploaded images to puter file system with public URLs (includes host subdomain creation + persistence)
• Project model: id, name, source image, rendered image, owner id, timestamps

• Serverless worker endpoints (deployed via puter) to:

  • Save a project (POST /api/projects/save)
  • List projects (GET /api/projects/list)
  • Fetch a project by ID (GET /api/projects/get?id=…) Workers run with service privileges to read/write public/shared data (client SDK is user‑scoped)

• AI generation pipeline:

  • Convert hosted image URL to base64 (fetch + FileReader)
  • Call puter.ai (image→image or text→image) with a crafted “roomify render” prompt to generate a photorealistic top‑down 3D render
  • Return base64 result and host/save the rendered image
• Visualizer page:
  • Displays uploaded source image and AI render
  • Before/after slider (react-compare-slider)
  • Export/download the rendered image
• End‑to‑end flow: upload → host source → create project → visualizer → call AI → host/save rendered image → update project in KV → show before/after

Guides / step‑by‑step actions shown (condensed)

1. Initialize project: Vite + React + React Router v7, TypeScript, Tailwind.
2. Setup IDE: WebStorm + Juny for AI-assisted coding.
3. Install puter.js and create basic authentication helpers (signIn, signOut, getCurrentUser).
4. Build UI components (Navbar, Button) and wire auth state via React Router outlet context.
5. Implement drag & drop uploader (file input, allowed types, progress animation).
6. Add onComplete handler → navigate to dynamic visualizer route (/visualizer/:id).
7. Create hosting utilities: getOrCreate hosting config, uploadImageToHosting (convert URL→blob, write to file system, get hosted URL).
8. Create createProject action: upload source (and later rendered) images, prepare design item payload.
9. Implement AI logic (lib/ai.action.ts):
   • fetchAsDataURL(url) to get base64
   • generate3DView(params) that calls puter.ai (select provider/model, pass prompt & input image)
10. Build puter worker (lib/puter.worker.js): define save/list/get endpoints; deploy worker and set VITE_PUTER_WORKER_URL (env).
11. Frontend actions call worker endpoints (createProject, getProjects, getProjectById).
12. Visualizer loads project by ID, runs AI generation, updates project via createProject, displays before/after slider, export button.
13. Use Git branching, GitHub PRs and CodeRabbit to review & fix issues; deploy app to puter app center or Vercel.

Analysis, lessons learned, and pitfalls

• Unified platform benefits:
  • puter provides auth, storage, hosting, KV, AI, and workers, removing the need for multiple cloud services and API keys — useful for rapid prototyping and free dev usage.
• Worker necessity:
  • Client SDK only accesses a user’s private data; workers run with a developer/service identity to expose public/shared resources.
• AI assistance caveats:
  • Tools like Juny speed development but often introduce bugs or edge cases; combine AI generation with human review.
• Importance of automated review:
  • CodeRabbit found subtle issues (e.g., not persisting hosting config to KV, missing setInterval cleanup, large base64 stored in client state, missing React key props, incorrect API call structure).
• Security/ownership:
  • Avoid global project key namespaces. Scope project keys to the authenticated user to prevent cross‑user overwrites. Carefully design public vs private KV models.
• UX consistency:
  • Keep consistent file size limits and accepted types across UI and validation logic.
• Deployment hygiene:
  • Build static site (SSR=false if needed), push to GitHub, deploy on Vercel or upload build to puter app center. Remove committed env files and add .env.local to .gitignore.

Suggested next steps / extension ideas

• Implement share / unshare: move projects between private user KV and public KV with owner metadata
• Improve prompt engineering for better renders and more accurate furniture/lighting/material mapping
• Add server‑side validations, stricter MIME checks, cleanup of intervals/timeouts, and better error handling for worker endpoints
• Add pagination, search, and community feeds for shared projects
• Add billing/usage visibility if moving away from the “user‑pays” model or adding paid features

Key code‑review and AI‑automation takeaways

• Use AI to scaffold (Juny) but always run automated reviews (CodeRabbit) and manual QA.
• Automate cleanup for timers and error handlers (e.g., FileReader.onerror).
• Validate allowed file types in drag‑drop handlers and ensure persistence of generated configuration (hosting subdomain).
• Avoid storing large base64 blobs in client state; store hosted URLs instead.

Where to find resources mentioned

• puter / Pewtor docs and GitHub (serverless + AI + hosting)
• JetBrains Juny for coding assistance
• CodeRabbit for automated PR reviews
• Video kit / repo and final code (linked in the video’s description per the subtitles)

Main speaker / sources

• Main speaker: Adrian (presenter, JS Mastery)
• Primary tools/sources referenced: puter/Pewtor (puter.js), JetBrains Juny, CodeRabbit, React + Vite + React Router v7, Tailwind CSS, Lucid React icons, react‑compare‑slider, GitHub, Vercel (optional)