Badar HossainUpdated How We Built Vitesse Supercars' New Site
The Vitesse Supercars site gives every car, brand and service its own page, and it has a chatbot that can open a booking form inside the conversation. This is how we built it, and why we made each choice.
What did Vitesse Supercars need from its site?
Vitesse hires out supercars and luxury cars, with a fleet that changes over time. The brief had three parts.
- A customer who searches for one model should land on that model.
- Search engines and AI assistants should be able to read every car, brand and service page.
- A chatbot should be able to answer questions at any hour.
Why does every car get its own page?
A fleet is a list of specific questions. Someone searching for one particular car wants a page about that car, not a long catalogue to scroll through. So the site has a page type for each thing a customer might look for.
- Hire categories, such as supercars or luxury 4x4s.
- A page for every car and a page for every brand.
- Collections, services, a membership page and a blog.
Each car page is built from its database record: the specification, the photos, and structured data for the car, its breadcrumb trail and a short FAQ.
How does a new car reach the site and the sitemap?
The fleet, categories, brands, services and collections live in a Supabase database. The team adds or edits a car in an admin area, and the site reads it from there.
Car, brand and service pages are generated ahead of time and refreshed hourly. The sitemap is built from the same database, so it lists every active category, brand, available car, service and collection. A new car gets its own address in the sitemap without anyone touching code.
How does the chatbot know the fleet?
The chatbot uses an OpenAI model with three tools: look up a car or brand, list the collections, and list the cars in a collection. On every message it also loads the current services and active collections from the database.
We gave it one firm rule: never name a car unless a tool has returned it in that conversation. A prompt that lists the fleet goes stale the day a car is added or removed. The database does not.
When a customer is ready to book, the reply carries a tag that makes the chat show the right form: contact, car booking, service booking, group travel, or a car's details. They can book without leaving the conversation.
What happens when someone books?
The booking and enquiry forms save every request to Supabase. A Supabase Edge Function then emails the team through Resend, with a separate message for each type: enquiry, vehicle booking, group travel, service booking and membership.
What can the team manage themselves?
The admin area covers vehicles, categories, brands, collections, services, memberships and event types. It also covers the gallery, the home page hero, the blog (with a rich text editor), bookings and enquiries. Day-to-day changes need no developer.
What is it built with?
- Next.js and React, with Tailwind for styling.
- Supabase for the database, admin sign-in and image storage, and an Edge Function for booking emails.
- OpenAI for the chatbot, and Resend for email.
- Hosted on Vercel.
First published
Badar Hossain is the Co-Founder and Chief Operating Officer of Ravenence, running operations and delivery.
