Case Study · 04 · Website
LiveAutos
A car showcase you can see and hear.
Autos is a car showcase platform with dynamically rendered pages for every car and an immersive engine sound feature. I took on the challenge of learning TypeScript and Next.js at the same time while building it, exploring server-side rendering, "use client" boundaries and dynamic routes.
Server-side rendering
Car data is fetched from Supabase on the server for fast first loads.
Dynamic pages
One slug-based layout renders a detailed page for every car.
Engine sound
Selected models let you play the real sound of the engine.
Screens
Inside the Product
Deep Dive
How It Works & What I Learned
01Product Card
Everything at a glance
Each card shows the car image, brand logo and name, a brief description, model and price, all fetched from Supabase during server-side rendering.
Generated from data
Cards are mapped from the dataset, and clicking one opens the dedicated page for that car.
What I Learned
Using a slug to render pages dynamically in Next.js. When every product shares a layout, one template can present them all, giving quick information up front and more detail one click away.
Try it
Feel the Engine
Lamborghini Revuelto exhaust
02Engine Sound
Feel the engine
Users can play the sound of the car, which makes the experience far more immersive. It is built with use-sound and a bit of state to play and pause.
What I Learned
I had never worked with audio on a website before. Small touches like this enhance the experience and make a site stand out.
Like What You See?