CarHub

Overview

Search it. Filter it. See it from every angle — before you ever sit in the car.

CarHub is a Next.js App Router application that turns a live external car-data API into a fast, filterable browsing experience — complete with manufacturer, year, and fuel-type search, per-car detail views, and dynamically rendered vehicle images pulled from a dedicated imaging service.

Problem

Car marketplace UIs need to feel instant even though the underlying data — makes, models, specs, images — lives entirely outside the app. The challenge is fetching and rendering third-party catalogue and imagery data through server components without leaking API keys to the client, while still keeping search and filtering snappy.

What I Built

• A Next.js 16 App Router frontend with a server-rendered home page (app/page.tsx) that fetches live car data server-side and streams it straight into the UI
• A full component library — CarCard, CarDetails, SearchManufacturer, Searchbar, CustomFilter, ShowMore — built around reusable, typed props for consistent rendering across the catalogue
• Integration with a RapidAPI car-data endpoint for live vehicle listings, paired with Imagin Studio’s imaging API to generate realistic car photos on the fly, angle by angle
• Search and filter controls for manufacturer, production year, and fuel type, backed by typed constants for predictable, type-safe filtering
• A “Show More” pagination pattern that incrementally loads additional results without a full page reload
• Tailwind CSS + PostCSS styling throughout, with Next.js Image domain configuration set up for the external cdn.imagin.studio image source

Key Outcomes

• Delivered a production-shaped frontend architecture — server components for data fetching, client components for interactivity — matching how modern Next.js apps are actually structured
• Wired together two independent third-party APIs (data + imagery) into a single cohesive browsing experience
• Built a fully typed component and data layer (TypeScript types + constants) that keeps filters, car cards, and detail views consistent across the app
• Structured API calls at the server layer so vehicle data fetching stays fast and keeps external service calls off the critical client-rendering path