Drive Wave

This is a car showcase app built in Next.js.

Note: Since ImaginStudio has discontinued the free version of their API, this app will no longer be supported. I will maintain its website, but there won't be car images or new features.

Check it live here!

Table of Contents

1. Getting Started
2. Tech Stacks
3. Features
4. Components

Getting Started

Go to the .env file and insert your RapidAPI key.

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Stacks

• Next.js
• React
• TypeScript
• TailwindCSS
• HeadlessUI
• RapidAPI
• ImaginAPI

Features

• Searching and Filtering: Search and filter system based on the cars and API information.

• Server-Side Rendering: Next.js allows react to transition from client-side rendering to server-side rendering, providing better performance and browsing experience.

• Pagination: Easy navigation through a large dataset of cars, allowing users to explore multiple pages.

• Metadata Optimization and SEO: Optimize metadata for car listing, enhancing search engine optimization (SEO) and ensuring better visibility on search engine results pages.

• TypeScript Types: TypeScript provide robust typing for enhanced code quality and type safety.

• Mobile Responsible Design: The website is designed to be visually pleasing and responsive, ensuring an optimal user experience across various devices.

Components

CarCard.tsx

Receives the car objects from page and shows the basic information about it in a card with the buy/rental price from constants and an image of the car on the catalogue fetched from ImaginAPI.

CarDetails.tsx

Button that's called on the CustomButton on CarCard with the car object, opens a modal with images from ImaginAPI and all the selected information about the car.

CustomButton.tsx

Reusable button component which receives a title, styles and a handleClick function.

CustomFilter.tsx

Filter that receives a title and an array of Options (which have a title and value) from constants and update the search parameters using an onChange event.

SearchBar.tsx

Search div that receives and update search parameters using a formEvent passed to handleSearch

SearchManufacturer.tsx

Search input bar with SEO in the searchBar form that fetches and maps data from constants, and filters the inputs before submitting.

ShowMore.tsx

CustomButton that's responsible for pagination, it gets the current page and isNext from page and updates 'limit' search parameter, which corresponds to the number of cars showed in total.