Case study

FloorScape

AI-powered architectural visualization platform

An AI-assisted application that transforms uploaded 2D floor plans into photorealistic top-down 3D interior visualizations.

View live demo View source code

Overview

Context and scope

FloorScape makes it easier for homeowners, designers, and architects to imagine a space before a single wall is built. The platform removes the friction of static floor-plan reviews by turning rough layouts into vivid interior renders with AI assistance.

Role: Full-stack development, AI integration, application architecture, UI implementation, and deployment.
Status: Deployed
Links: Live demo GitHub

The Challenge

The problem

Translating a 2D architectural plan into an intuitive, client-friendly visualization requires more than technical rendering. The product needed to help users quickly upload a plan, understand AI-generated recommendations, and review design outcomes without requiring specialized technical knowledge.

The Solution

The approach

The product combines a streamlined upload flow, AI-driven generation, and a polished review experience into a single workflow. By focusing on clear project states and a simple user journey, the platform helps people move from floor plan to visual concept without friction.

Features

What makes it work

AI-powered visualization

Users can upload a floor plan and generate a photorealistic interpretation of the interior layout, making early design conversations much more concrete.

Project persistence

Each generated concept is tied to a project so users can revisit, compare, and iterate on spatial ideas without losing context.

Fast design iteration

The interface supports a quick cycle from upload to visual generation, helping users move from concept to feedback without bouncing between tools.

Workflow

How it works

Upload

Users begin by uploading a 2D floor plan and defining the project context.

AI generation

The platform processes the layout and generates a realistic visual interpretation of the space.

Visualization

The generated result is presented as a clear, design-driven render that is easy to review.

Persistence

Projects stay connected to the generated assets so the user can revisit or iterate on them.

Export

The final concept can be shared and used as a decision-making artifact in project discussions.

Screenshots

Project snapshots

Technical architecture

Built around the right stack

The system balances client-side responsiveness with AI-driven backend processes, ensuring the application remains approachable while the generation pipeline handles the heavier work.

Frontend

React 19React Router 7TypeScriptViteTailwind CSS

AI & Platform

Puter AIPuter AuthPuter KVPuter HostingPuter Workers

Infrastructure

Node.jsDocker

Challenges & engineering decisions

Decision-making behind the build

Building a product around AI generation

The product had to feel polished and trustworthy even while the generation pipeline was inherently variable. A strong UX layer was essential to make AI output usable and understandable.

Managing generated assets

Generated visuals, metadata, and user projects needed a reliable structure so they could be retrieved, compared, and reused without causing clutter or confusion.

Connecting the frontend to worker-based APIs

The interface needed to integrate cleanly with an asynchronous backend model, which required careful handling of loading states and API coordination as work moved through the pipeline.

The Result

Outcome

The platform gives users a clear path from floor plan to concept visualization, turning a technical AI workflow into a tangible design tool that is easy to understand and interact with.

What I Learned

Takeaways

This project reinforced how important product clarity is when building AI features. The most effective experiences are not just technically capable; they guide the user with confidence, structure, and a thoughtful interaction model.

Have a similar project in mind?

Let's build it.

Start a project