Project Title: LuxeDrive — Immersive 3D Car Showroom Platfor...

Prompt

Project Title: LuxeDrive — Immersive 3D Car Showroom Platform Overview: Build a full-stack, production-grade car showroom website using the MERN stack (MongoDB, Express.js, React, Node.js) with an advanced, interactive 3D experience powered by Three.js / React Three Fiber. The site should feel like a premium automotive brand experience (Tesla/Porsche-level polish) — cinematic, fluid, and highly interactive. 🎯 Core Features 1. 3D Showroom Experience (Frontend — React + Three.js/R3F) Fully rotatable, zoomable 3D car models (GLTF/GLB format) using @react-three/fiber + @react-three/drei Realistic lighting (HDRI environment maps, studio lighting rigs) Interactive hotspots on the car (click to explore interior, engine, wheels, spec details) Color customizer — change car paint color in real-time with material/shader updates Camera animations — smooth orbit controls, auto-rotate, cinematic fly-through intro on page load Day/Night showroom toggle affecting scene lighting and reflections Parallax scroll-based 3D transitions between sections (using GSAP or Framer Motion + ScrollTrigger) Loading screen with 3D asset preloader and progress bar 2. Pages/Sections Landing page with hero 3D car model + tagline Car Catalog page — grid/list of cars pulled from backend (MongoDB), filter by brand, price, fuel type, year Individual Car Detail page — full 3D viewer + specs, price, EMI calculator, "Book Test Drive" CTA Compare Cars feature (side-by-side spec + 3D preview) User Dashboard — saved/wishlist cars, test drive bookings, order history Admin Dashboard — CRUD for car listings (add/edit/delete cars, upload 3D models & images), manage bookings/orders, analytics (sales, inquiries) Contact/Showroom Locator page with map integration (Google Maps API/Mapbox) Authentication (JWT-based login/signup, Google OAuth optional) 3. Backend (Node.js + Express + MongoDB) RESTful API (or GraphQL) with endpoints for: cars, users, bookings, orders, reviews MongoDB schemas: Car (specs, price, images, 3D model URL, variants), User, Booking, Order, Review Authentication & Authorization (JWT, role-based access: admin/customer) File upload handling (Multer + Cloudinary/AWS S3) for images and 3D model files (.glb) Payment gateway integration (Stripe/Razorpay) for booking deposits or purchases Email notifications (Nodemailer) for booking confirmations Rate limiting, input validation (Joi/Zod), and security middleware (Helmet, CORS, sanitization) 4. Advanced/Extra Features AR "View in your space" mode (using WebXR or model-viewer) for mobile Voice-guided showroom tour (Web Speech API) Real-time chat/support widget (Socket.io) connecting users to sales reps AI-based recommendation engine (suggest cars based on browsing/wishlist behavior) Dark/Light theme toggle Fully responsive (desktop, tablet, mobile) with optimized 3D performance (LOD, texture compression, lazy loading models) SEO optimization (React Helmet / Next.js if using SSR variant) and Lighthouse performance score 90+ Skeleton loaders and smooth page transitions (Framer Motion) 🛠️ Tech Stack Frontend: React (Vite), React Three Fiber, Drei, GSAP/Framer Motion, TailwindCSS, Zustand/Redux Toolkit 3D Assets: GLTF/GLB models (Blender-exported), HDRI environments Backend: Node.js, Express.js, MongoDB + Mongoose Auth: JWT + bcrypt Storage: Cloudinary/AWS S3 for media & 3D files Real-time: Socket.io Payments: Stripe/Razorpay Deployment: Vercel/Netlify (frontend), Render/Railway/AWS EC2 (backend), MongoDB Atlas 📁 Deliverables Requested Complete folder structure (client/server separation) Sample MongoDB schema for Car model with 3D asset fields React Three Fiber component for the interactive car viewer with color customization Express API routes for car CRUD + booking Responsive UI with smooth 3D-integrated animations

A system prompt was added to support web rendering