🏠 InRoom Studio

InRoom Studio is a modern, high-performance web-based room planning tool that allows users to seamlessly design, visualize, and customize interior spaces in both 2D and 3D.

✨ Features

• Split Layout Workspace: Highly productive interface with a Catalog on the left, an interactive Canvas in the center, and dynamic Property editing on the right.
• Drag & Drop Capabilities: Effortlessly drag furniture items, windows, doors, and architectural elements from the catalog directly onto the canvas.
• 2D & 3D Visualization: Instantly switch between a top-down 2D floor plan layout and an immersive, isometric 3D view.
• Advanced Property Editing: Precise controls to position, rotate, and scale selected items.
• Real-Time Persistence: Auto-saves your room state to local storage to prevent data loss.
• Cloud Synchronization: Built-in support for saving projects, user spaces, and templates to the cloud via Firebase.
• Polished UI/UX: Smooth micro-animations powered by Framer Motion, combined with a highly responsive design.

🛠️ Tech Stack

Frontend & Core Engineering

• React 19 & TypeScript
• Vite (Build tool & development server)
• Zustand (Predictable, lightweight global state management)
• Framer Motion (Fluid animations and transitions)

Graphics & Rendering Engine

• Three.js & React Three Fiber (R3F) (Powerful 3D rendering)
• React Three Drei (Helpful abstractions for R3F)
• Custom HTML5 Canvas Engine (Optimized 2D interactive floor plan logic)

Backend & Infrastructure

• Firebase (Firestore Database, Authentication, Cloud Functions)
• Firebase DataConnect (Type-safe data access)

Tooling & Quality Assurance

• Vitest (Fast, reliable unit testing)
• ESLint & Prettier (Code quality and formatting)

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm (Node Package Manager)

Installation

1. Clone the repository:

   git clone https://github.com/Sithumsankajith/inroom-studio.git
   cd inroom-studio

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:5173 to see the application running.

☁️ Firebase & Backend Setup

This project uses Firebase for backend services including Authentication, Cloud Functions, and the new Firebase DataConnect (Postgres locally emulated via pgLite).

1. Install Firebase CLI Tools:

   npm install -g firebase-tools

2. Login to Firebase:

   firebase login

3. Initialize Emulators (For Local Development): The project is pre-configured to point to local emulators in the firebase.json file. To start the local emulators including DataConnect:

   firebase emulators:start

4. Environment Variables: Create a .env.local file in the root directory and ensure your Firebase configuration variables are correctly defined to match the initialized project.

📖 Usage Guide

The InRoom Studio Editor (/studio route) is divided into three primary functional areas designed for an intuitive workflow:

1. The Catalog (Left Panel)

Browse through categories of room components:

• Architecture: Structural elements like single doors, double doors, and customizable windows.
• Furniture: Essential room pieces like sofas, tables, chairs, and beds.
• Drag & Drop: Simply click and hold an item to drag it directly onto your interactive canvas.

2. The Canvas (Center Viewport)

Your primary workspace with two distinct viewing modes:

• 2D Floor Plan Mode: Top-down view optimized for precise placement. The custom HTML5 Canvas engine calculates snap-to-grid movements, wall-attach logic (for doors/windows), and collision detection.
• 3D Isometric Mode: Powered by Three.js and React Three Fiber. View your room with lighting, depth, and physically-based rendering models (GLB assets). The dynamic camera cutaway logic ensures walls don't obstruct your view.

3. Properties Inspector (Right Panel)

When an item is selected on the canvas, the Properties Panel becomes active:

• Transformations: Adjust the exact X, Y, and Z coordinates.
• Rotations: Rotate items meticulously by degrees to fit perfectly into the room plan.
• Item Removal: A quick action to delete the selected item from the state.

🏗️ Architecture Overview

The system architecture cleanly separates rendering concerns from application state to ensure high performance:

• State Management (Zustand): The single source of truth resides in src/state/store.ts. Both the 2D Canvas engine and the 3D Fiber engine subscribe to this store.
• Decoupled Engines:
  • The src/engine2d relies on raw Canvas API updates for maximum performance during drag and pan operations.
  • The src/engine3d maps the same Zustand state to declarative <mesh> components via React Three Fiber, converting the 2D coordinate system into a 3D spatial coordinate system on-the-fly.
• Firebase DataConnect: Provides type-safe GraphQL-like mutations and queries seamlessly integrated directly into the React components (src/dataconnect-generated/).

📁 Project Structure

inroom-studio/
├── public/                 # Static assets
├── src/
│   ├── api/                # Firebase API and data connection logic
│   ├── assets/             # 3D models (GLB), images, and icons
│   ├── components/         # Reusable React UI components
│   ├── domain/             # Core business logic, entities, and type definitions
│   ├── engine2d/           # 2D Canvas interaction, calculation, and rendering
│   ├── engine3d/           # 3D scene, Three.js orchestration, and R3F components
│   ├── pages/              # Application top-level views/routes
│   ├── state/              # Zustand global store definitions
│   ├── ui/                 # Main UI shell and layout containers
│   └── utils/              # Helper functions and utilities
├── dataconnect/            # Firebase DataConnect configuration and schema
├── functions/              # Firebase Cloud Functions (Backend logic)
├── test/                   # Vitest configuration and suite
└── eslint.config.js        # ESLint flat config

📜 Available Scripts

• npm run dev - Starts the Vite development server.
• npm run build - Compiles TypeScript and builds the production bundle.
• npm run preview - Previews the production build locally.
• npm run lint - Runs ESLint to identify code issues.
• npm run test - Executes unit tests using Vitest.

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request. Focus on clear commit messages and ensure that npm run lint and npm run test pass before proposing changes.

📄 License

This project is proprietary and confidential. All rights reserved.