Car Showcase Website

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 📝 Features
• 🚀 Quick Start

✨ Introduction

[EN] Developed with Next.js and leveraging its server-side rendering capabilities, this Car Showcase website presents various car types, showcasing comprehensive information in a well-designed format with advanced filtering and pagination support for an enhanced user experience.

[FR] Développé avec Next.js et exploitant ses capacités de rendu côté serveur, ce site web de présentation de voitures propose différents types de véhicules, offrant des informations détaillées dans un format bien conçu avec un support avancé de filtrage et de pagination pour une expérience utilisateur améliorée.

⚙️ Tech Stack

• React is a JavaScript library for building user interfaces with a component-based architecture, facilitating reusable and maintainable code.

• Next.js is a powerful React framework that enables server-side rendering, automatic code splitting, and efficient performance optimizations for building modern web applications.

• TypeScript is a statically typed superset of JavaScript that enhances code quality and developer productivity by identifying errors early and enabling better tooling support.

• RapidAPI is a platform that simplifies API integration by providing a marketplace of third-party APIs, allowing developers to discover, connect to, and manage APIs efficiently within their applications.

• Tailwind is an utility-first CSS framework that allows for rapid UI development by providing a set of utility classes for styling directly in HTML, promoting a scalable and consistent design system.

📝 Features

👉 Home Page: Showcases a visually appealing display of cars fetched from a third-party API, providing a captivating introduction to the diverse range of vehicles available.

👉 Exploration and Filtering: Explore a wide variety of cars from around the world, utilizing a search and filter system based on criteria such as model, manufacturer, year, fuel type, and make.

👉 Transition to Server-Side Rendering: A seamless transition from client-side rendering to server-side rendering, enhancing performance and providing a smoother browsing experience.

👉 Pagination: For easy navigation through a large dataset of cars, allowing users to explore multiple pages effortlessly.

👉 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: Utilize TypeScript to provide robust typing for enhanced code quality and better development.

👉 Responsive Website Design: The website is designed to be visually pleasing and responsive, ensuring an optimal user experience across various devices.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone {git remote URL}

Installation

Let's install the project dependencies, from your terminal, run:

npm install
# or
yarn install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_RAPID_API_KEY=
NEXT_PUBLIC_IMAGIN_API_KEY=

Replace the placeholder values with your actual credentials:

• Rapid API
• Cloudinary

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to view the project.