Yot Configurator
Company Project
Individual Contributor
3D
liveUrl
The Yot Configurator is an interactive web-based platform designed to revolutionize the yacht customization and purchasing process. It provides users with an immersive 3D experience to visualize and customize yachts while offering real-time cost updates.
thumbnail
click
Key Features
3D Model Display
• Interactive 3D visualization of yacht models.
• High-quality rendering and smooth user controls for rotating, zooming, and viewing details.
Customization Options
• Real-time addition and removal of custom features such as interiors, exteriors, and equipment.
• Enables users to add or remove features with real-time visual and cost feedback.
Cost Estimation
• Dynamic pricing updates based on selected customization options.
• A comprehensive breakdown of costs displayed alongside the configuration.
User-Friendly Interface
• Intuitive UI/UX designed to provide a seamless user experience for both casual browsers and serious buyers.
• Responsive design offering seamless user interactions.
Integration and Performance
• Developed using React for a responsive and scalable frontend experience.
• Backend support with PostgreSQL for managing user data and yacht configurations.
Technology Stack
LayerTechnologies
Frontendreact: ^18.2.0, next:^12.2.5, antd:^5.6.4, typescript: ^4.7.4, three.js: r158
Backendpostgresql: ^14.15.0
DeploymentCI/CD Pipelines
Challenges
warningModel Rendering Issues
idea
 Ensure 3D models are correctly exported (e.g., glTF, OBJ) and use Three.js for rendering. Fix alignment issues by checking the coordinate system.
warningCustomization Not Reflecting
idea
 Use React state management (e.g., Redux) to update the model in real-time as users select options. Ensure dynamic material changes for customization.
warningPerformance Optimization
idea
 Simplify geometry, use Level of Detail (LOD), and implement lazy loading for assets to improve performance.
warningHighlighting Parts
idea
 Implement interactive part highlighting using Three.js (color change or outline) for better visibility
Achievements
The Yot Configurator redefines the luxury yacht industry by bridging the gap between personalization and technology, delivering an unparalleled user-centric experience.
TABLE OF CONTENTS
  • Overview
  • Key Features
  • 3D Model Display
  • Customization Options
  • Cost Estimation
  • User-Friendly Interface
  • Integration and Performance
  • Technology Stack
  • Frontend
  • Backend
  • Deployment
  • Challenges
  • Model Rendering Issues
  • Customization Not Reflecting
  • Performance Optimization
  • Highlighting Parts
  • Achievements
top