AutoVista Motors: Vibe-Coded Car Dealership Concept Site
Fictional car-dealership concept site vibe coded in Google AI Studio with Gemini: 24 real car models, side-by-side comparison, and a financing calculator.
AutoVista Motors is not a real car dealership. Saying that up front matters, because everything about this site is designed to convince you it is one: a fictional brand, a fabricated founding story and leadership team, invented testimonials, a made-up 2.18% p.a. financing rate, and a test-drive booking form that sends data nowhere. The author's README says it plainly: "AutoVista Motors is a fictional company. This is a student portfolio and learning project, not a real dealership, and no real sales, bookings, or inquiries happen here." This is a frontend design portfolio piece, and it deserves to be judged as one. Judged as one, it is genuinely impressive. The concept site presents 24 real, correctly named car models across six categories (Sedans, SUVs, MPVs, Electric, Hatchbacks, Coupes, four each), and the Vehicles page is anything but a static grid. It ships real search, sort, and budget filtering, a side-by-side vehicle comparison tool, and detail popups that open without navigation: image galleries with thumbnails, full spec sheets (engine, transmission, seating, fuel/range, dimensions, power, drive type), trim levels with individual pricing, and key features. A "Book a Test Drive" button even passes the chosen vehicle into the booking form. The Offers page goes further with a working financing calculator: pick a vehicle, drag the down-payment slider (20%–50%), choose a 12–60 month tenure, and watch the down payment, financed amount, and estimated monthly installment update live — clearly labeled as an illustrative estimate, consistent with the site's fictional framing. What makes it a vibe-coding story is how it was made. The project was "vibe coded in Google AI Studio using Gemini," starting from a written Product Requirements Document that defined the page structure, a fixed color palette, the exact vehicle list, and one unusual rule: vehicle photography had to be found through search, not generated. Six vehicles use Creative Commons photos from Wikimedia Commons (source and license documented in the code), the rest and the portraits come from Unsplash. It is part of a personal portfolio series by the author — whose primary focus is Data Science, NLP, and GenAI/LLM agent engineering — demonstrating applied vibe coding outside their technical home turf. The presentation details sell the craft: a layered-motion parallax hero, decorative emblems, a founding-narrative watermark, a four-milestone company timeline, and a full About Us page with a fictional four-person executive team. The stated stack is React 19, TypeScript, Vite, Tailwind CSS v4, lucide-react, and Google Fonts (Outfit and Plus Jakarta Sans), all built in Google AI Studio's Build mode. The repo is small (1 star, created 2026-09-30, last pushed 2026-10-01), but the live demo at autovista-car-dealership.vercel.app is worth opening: it is a study in how to build a fully convincing fictional-brand site — honest fictional framing included.
