Roomify | AI-powered Architectural Visualization App

Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Assets
6. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

✨ Introduction

AI-powered architectural visualization SaaS built with React, TypeScript, and Puter. 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.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 50k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• React is a popular JavaScript library for building user interfaces, specifically for creating single-page applications with a component-based architecture.

• Vite is a next-generation frontend tool that provides an extremely fast development environment and optimized build process for modern web projects.

• TypeScript is a strongly typed superset of JavaScript that adds static types, helping developers catch errors early and write more maintainable code.

• TailwindCSS is a utility-first CSS framework that allows for rapid UI development by applying pre-defined classes directly in your markup.

• Puter is the underlying cloud computing platform and "Internet OS" that provides the infrastructure; including serverless Workers, permanent file storage, key-value (KV) databases, and hosted AI models.

• Puter.js is the official JavaScript SDK that allows developers to interact with those cloud services directly from the frontend.

• CodeRabbit is an AI-powered code review platform that provides deep insights and automated suggestions to improve code quality and security.

• Junie by JetBRains is an AI-driven coding assistant integrated into the development environment to help automate complex logic, refactoring, and prompt engineering.

• Claude and Gemini are state-of-the-art large language models used to power the architectural transformation and image generation logic within the application.

🔋 Features

👉 2D-to-3D Visualization: Instant architectural rendering that transforms flat floor plans into photorealistic 3D models using state-of-the-art AI.

👉 Persistent Media Hosting: Permanent file storage that generates public URLs for every upload and output, ensuring your renders are always accessible.

👉 Dynamic Project Gallery: A personalized workspace that tracks your history of visualizations with instant loading and metadata persistence.

👉 Side-by-Side Comparison: Interactive tools designed to visualize the direct transformation from a source architectural sketch to its AI-rendered counterpart.

👉 Global Community Feed: A public discovery engine where users share their architectural projects with the world in a single click.

👉 Privacy Controls: Granular public and private toggles that give users full authority over the visibility and security of their architectural data.

👉 Ownership Mapping: A clean metadata system that tracks project details and user IDs across the entire platform for seamless account management.

👉 Modern Export Functionality: High-performance tools to download and move AI-generated renders into real-world presentations and workflows.

And many more, including code architecture and reusability.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/adrianhajdin/roomify
cd roomify

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_PUTER_WORKER_URL=""

Replace the placeholder values with your real credentials. You can get these by signing up at: Puter.com.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🔗 Assets

Assets and snippets used in the project can be found in the video kit.

🚀 More

Advance your skills with Next.js Pro Course

Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!