Car Showcase website using Rapid API and NEXT.js
Tags: website
Published: 2023-12-27 18:32:22

---
title: Car Showcase website using Rapid API and NEXT.js
published: true
date: 2023-09-25 00:42:00 UTC
tags: WebSite
canonical_url: https://reactjsexample.com/car-showcase-website-using-rapid-api-and-next-js/
---

## Getting Started
 ![Car Showcase website using Rapid API and NEXT.js](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-37-28.jpg)

First, run the development server:

```
npm run dev
# or
yarn dev
# or
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

## Motor Marvel – A Stunning Car Showcase

Discover the world of cars like never before with Motor Marvel, a visually captivating car showcasing website.

![Car Showcase website using Rapid API and NEXT.js](https://user-images.githubusercontent.com/56222433/269599716-21188449-77d3-4f08-9f30-81a7afc0ada3.png) ![Car Showcase website using Rapid API and NEXT.js](https://user-images.githubusercontent.com/56222433/269600229-4f389ca2-7235-4b32-9df5-aae6822a5d4d.png) ![Car Showcase website using Rapid API and NEXT.js](https://user-images.githubusercontent.com/56222433/269600136-a4479289-c8f2-4753-8b85-173775fe06b7.png)

I have placed some ‘hero.png’ images in the ‘public’ folder for you to try out different versions of ‘hero.png’ files. Feel free to modify the project and experiment with color codes.

## Tutorial

[https://youtu.be/pUNSHPyVryU?si=5XxSGt4vv2-M6GKv](https://youtu.be/pUNSHPyVryU?si=5XxSGt4vv2-M6GKv)

## Overview

- Visually Appealing Hero Section: Our hero section welcomes you with open arms, adorned with a custom logo meticulously crafted in Figma. It’s where your journey begins, setting the tone for what lies ahead.

- Car Catalogue: Dive into our extensive car catalogue, powered by the Cars by API-Ninjas from Rapid API. By default, it showcases a curated selection of cars, ready to spark your curiosity.

- Search & Filter: Looking for a specific car manufacturer or model? Our search feature has got you covered. Filter cars by fuel type (gas, electric) and manufacturing year to find your dream ride.

- Car Cards: Each car card is a treasure trove of information, featuring car titles, daily rental prices, transmission details, driving options, and fuel economy figures. Click “View More” to unveil the full story.

- Modal Magic: The magic happens when you click “View More.” A tailor-made modal, crafted using Tailwind CSS and Headless UI Components, unveils an image gallery and comprehensive car details, from MPG statistics to make and model specifics.

- Infinite Exploration: Can’t get enough? Click “Show More” to load even more cars, ensuring you never run out of vehicles to discover.

- Fully Responsive: Whether you’re browsing on a desktop, tablet, or smartphone, Motor Marvel adapts seamlessly to your device, ensuring a delightful experience.

## Key Features & Functionalities

✨ Visually stunning hero section with a compelling call-to-action. 🚗 Extensive car catalogue with a wide range of vehicles. 🧐 Search functionality for car makers and models. ⛽ Filter and sort by fuel type (gas, electric) and manufacturing year. 📜 Detailed car cards with essential information. 📷 Image gallery and comprehensive details in a modal. 🔄 “Show More” button for infinite exploration. 📱 Fully responsive design for all devices.

## Technologies Used

- React and TypeScript power the frontend.
- Next.js 13 leverages server-side rendering and the app router.
- Tailwind CSS ensures a sleek and modern UI.
- Vercel handles deployment, making the website lightning-fast.

## Goals & Objectives

- Harness the power of Next.js 13 for a cutting-edge web experience.
- Deliver advanced search and filtering capabilities.
- Optimize metadata and SEO for better visibility.
- Provide custom filter elements, combo boxes, and elegant modals.
- Maintain a well-organized codebase with a focus on clean coding principles.

## GitHub

[View Github](https://github.com/officialabhishekgautam/motor_marvel_car_showcase?ref=reactjsexample.com)