In this video, you'll build an AI-powered architectural visualization SaaS using React, TypeScript, and Puter.js Use AI models from Claude to Gemini to transform 2D floor plans into photorealistic 3D renders with permanent hosting and persistent metadata. This project features 2D-to-3D photorealistic rendering, serverless workers, high-performance KV storage, and a global community feed.

Puter.js: https://jsm.dev/roomify-puterjs

Puter.com: https://jsm.dev/roomify-puter

CodeRabbit: https://jsm.dev/roomify-coderabbit

Junie AI: https://jsm.dev/roomify-junie

WebStorm: https://jsm.dev/roomify-webstorm

Explore my Pro Content:

⭐ Join JS Mastery Pro: https://jsm.dev/roomify-jsm

💎 Become Top 1% Next.js Developer: https://jsm.dev/roomify-nextjs

👨‍🔬 Master Next.js Testing: https://jsm.dev/roomify-testing

📗 GSAP Animations Course: https://jsm.dev/roomify-gsap

📕 Three.js 3D Course: https://jsm.dev/roomify-threejs

📙 JavaScript Course: https://jsm.dev/roomify-cpjsm

🚀 Launch Your SaaS: https://jsm.dev/roomify-saas

📁 Video Kit (Code, Assets, and more): https://jsm.dev/roomify-kit

More courses launching soon! Join the waitlists to get notified! 🔥

👉 Backend Course Waitlist: https://jsm.dev/roomify-backend

👉 AI Development Course Waitlist: https://jsm.dev/roomify-ai

👉 React Native Course Waitlist: https://jsm.dev/roomify-native

👉 React Course Waitlist: https://jsm.dev/roomify-react

👉 Tailwind Course Waitlist: https://jsm.dev/roomify-tailwind

⚠ Links not working?

If you're in Nigeria, you might have to use a VPN to access the links.

⚠ If something mentioned in the video isn’t listed here or a link is broken

Leave a comment, or contact support@jsmastery.pro

Rate us on TrustPilot: https://jsm.dev/trustpilot

https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery

Business Inquiries: contact@jsmastery.pro

Timestamps:

00:00:00 — Introduction

00:04:46 — Project Setup

00:12:16 — Navbar

00:22:44 — Authentication

00:36:19 — Homepage

00:46:13 — Upload Files

01:09:18 — Project Architecture

01:12:13 — Hosting Images

01:26:18 — Create Project

01:48:11 — Generate 3D Design

02:11:05 — Worker in Action

02:21:47 — Display Data

02:47:22 — Compare Designs

02:59:53 — Deployment