Andrew Nguyen
Full-stack engineer in construction-tech — web apps, data pipelines and AI document processing, from React on the front to .NET and AWS behind it.
Construction Site Planner
2D / 3D site visualization
An advanced construction site planning application featuring integrated 2D/3D model visualization capabilities for comprehensive project management and progress tracking.
Overview
The Construction Site Planner provides construction teams with powerful visualization tools to view and interact with construction models in both 2D and 3D. The system enables efficient tracking of module progress and project data management through an intuitive interface with multiple viewing modes.
Key Contributions
Rendering Performance Optimization
- Large Dataset Handling: Optimized rendering performance in 2D/3D model viewers by implementing efficient data loading strategies
- State Management: Developed efficient state management solutions for handling large datasets without compromising performance
- Smooth Interactions: Maintained smooth UI responsiveness even with complex model data
Viewer Implementation
- Async Model Loading: Managed complex viewer interactions by handling asynchronous model loading
- Camera Controls: Implemented intuitive camera controls for 3D navigation
- User Input Handling: Developed responsive user input event handling while maintaining smooth UI performance
- Multiple View Modes: Created different visualization modes for various use cases
API Integration & Data Pipeline
- Robust Data Pipelines: Designed comprehensive data pipelines for model metadata processing
- Edge Case Handling: Implemented thorough edge case handling in file processing workflows
- Error Recovery: Built resilient error recovery mechanisms for data loading operations
Architecture & Code Quality
- Component Separation: Improved component architecture by separating viewer logic from UI components
- Reusable Modules: Created reusable modules for different visualization modes
- Maintainability: Enhanced code maintainability through clear separation of concerns
Technical Highlights
- 3D Visualization: Real-time 3D model rendering using Three.js
- 2D Canvas: Interactive 2D visualization using Konva
- Performance: Optimized for large construction models with thousands of components
- User Experience: Intuitive controls and multiple viewing modes
Technologies Used
Frontend: React, TypeScript, Three.js (3D), Konva (2D)
Backend: ASP.NET Core, Entity Framework Core
Database: PostgreSQL
Visualization: WebGL, Canvas API