Drive Customizer: інтерактивний 3D-візуалізатор

Моя роль. FullStack developer, DevOps, UI/UX designer

Drive Customizer — high-fidelity full-stack платформа для 3D-конфігурації авто. Проєкт поєднує імерсивну 3D-графіку та сучасну веб-розробку: користувачі кастомізують авто в реальному часі. Від лендінгу й каталогу моделей до 3D-редактора та community showcase — усе на масштабованій архітектурі.

TypeScriptTailwind CSSNext.jsNestJSThree.js

Огляд проєкту та стек

Завдання

Потрібно було створити складний 3D-застосунок, що поєднує якісний рендеринг і зручний multi-page user flow. Виклик — плавно керувати важкими 3D-асетами та зберігати дані між екранами.

Ключові вимоги:

Реалізувати real-time 3D-движок для швидкої зміни матеріалів і компонентів.
Зробити multi-page навігацію для перегляду та вибору моделей без просадок продуктивності.
Побудувати модульний і безпечний бекенд для даних моделей і збереження конфігурацій.
Синхронізувати стан 3D-сцени з UI для миттєвого фідбеку.
Оптимізувати застосунок під хмарний деплой і швидке завантаження.

Прев'ю інтерфейсу

Основні екрани та ключові UI-флоу продукту.

Drive Customizer: інтерактивний 3D-візуалізатор interface preview

Інтерфейс і ключові фічі

Результат

Я зібрав професійну Full-Stack платформу з фокусом на візуальну якість і технічну продуктивність:

Імерсивний 3D: React Three Fiber (Three.js), real-time матеріали, оптимізоване освітлення та інтерактивний вибір mesh.
Сучасний фронтенд: Next.js і TypeScript — SEO-friendly, швидкий і type-safe multi-page застосунок.
Масштабований бекенд: NestJS + MongoDB для збереження складних конфігурацій авто.
State management: Zustand синхронізує 3D-сцену з UI без зайвого оверхеду.
UI/UX: адаптивний інтерфейс на Tailwind CSS для десктопу, планшетів і смартфонів.
Деплой: весь стек налаштовано на Vercel під production.

Подивитись наживо

Відкрийте задеплоєний проєкт і дослідіть повний досвід.