Building System Design

Cutting-edge cloud platform for 3D design and configuration of building automation systems, delivering intuitive browser-based experience.

Visit Product

Technologies Used

React
TypeScript
Three.js / WebGL
Next.js
TailwindCSS
C#
.NET Core
GraphQL
PostgreSQL
AWS
Docker
Kubernetes

Gallery

Slide 1
1 / 4

Introduction

Building System Design is a cloud-based 3D design platform that enables engineers, architects, and contractors to configure building automation systems directly in the browser. By combining advanced 3D visualization with intuitive drag-and-drop design tools, the platform simplifies complex system planning while ensuring accuracy and compliance with industry standards.

Built for collaboration and scalability, Building System Design helps teams reduce design time, avoid costly mistakes, and streamline the path from concept to deployment.

Key Features

  • 3D Design Environment: Browser-based 3D workspace powered by WebGL/Three.js, allowing users to design, configure, and preview building systems in real time.
  • Component Library: Pre-built catalog of HVAC, lighting, and control system components for quick configuration.
  • Drag-and-Drop Configuration: Intuitive interface to assemble systems, connect components, and adjust parameters with minimal training.
  • Collaboration Tools: Multi-user editing, comments, and version tracking to support design teams working together remotely.
  • Export & Integration: Export designs into CAD/BIM formats and integrate with project management or construction software.
  • Analytics & Validation: Automatic system checks for performance, compliance, and compatibility before deployment.

Technical Insights

  • Frontend: Built with React, Next.js, and TypeScript, delivering a responsive and performant UI. Three.js/WebGL powers the 3D modeling and rendering engine, while TailwindCSS ensures a modern, consistent design.
  • Backend & APIs: Powered by C# and .NET Core, the backend provides scalable APIs for design data, authentication, and workflow orchestration. GraphQL APIs allow flexible querying for complex design interactions.
  • Database & Persistence: PostgreSQL stores user projects, design configurations, and system metadata.
  • 3D Visualization Engine: Optimized rendering pipeline supports real-time interaction with complex building models, ensuring smooth performance even with large-scale designs.
  • Collaboration Layer: Real-time multi-user editing powered by WebSockets keeps all participants synchronized across sessions.
  • Infrastructure & Deployment: Deployed on AWS, leveraging S3 for design asset storage, EC2/EKS for compute, and RDS for PostgreSQL. Services are Dockerized and orchestrated with Kubernetes for scalability and resilience.

Challenges and Solutions

  • Rendering Complex 3D Models in Browser: Large building models created heavy performance loads. Solved using GPU acceleration, level-of-detail rendering (LOD), and progressive loading for smoother experiences.
  • Concurrent Collaboration: Designing with multiple users simultaneously introduced data conflicts. We built real-time sync via WebSockets with conflict resolution logic to maintain consistency.
  • Integration with Legacy CAD/BIM Tools: Engineers required exports into existing workflows. We implemented export pipelines for compatibility with standard formats like DWG, IFC, and Revit.
  • Scalable Backend Performance: Running intensive calculations for validation and analytics required strong backend performance. .NET Core microservices were optimized with caching and async processing to handle high loads.
  • User Onboarding & Adoption: Complex tools can overwhelm users. We addressed this by providing templates, guided onboarding, and drag-and-drop workflows to reduce the learning curve.