AI-assisted build
Precision-Parts Catalog with 360° Viewer
Product catalog for an engineering-parts business — categories, product pages with an interactive 360° 3D viewer, cart and checkout.
- Timeline
- May 2025 – Present
- Type
- Client project
- Status
- Public code
Illustrative UI mockup, not a real screenshot — real screens can be shown in an interview.
TL;DR
- Category grid, product grid and carousel
- Interactive 360° 3D product viewer with orbit and zoom
- Cart and checkout flow
- Light and dark themes
Overview
An online catalog for a precision engineering-parts business. Buyers browse categories, open a product and rotate it in 3D before adding it to the cart.
Highlights
- 360° viewer — loads 3D models (GLTF) with React Three Fiber, with orbit controls, zoom and a fallback model if a file fails to load.
- Catalog — categories, product grid, carousel and product detail pages.
- Cart & checkout — shared cart state, a cart page and a checkout flow.
- Themes — light and dark modes.
Build
Built with an AI-assisted workflow (Lovable) in React + TypeScript with Tailwind CSS and shadcn/ui; 3D with three.js through React Three Fiber and Drei.
Tech stack
- React
- TypeScript
- Vite
- Tailwind CSS
- shadcn/ui
- three.js
- React Three Fiber
- Drei