https://github.com/programmer-dn-ai/car-hub_app_next
CarHub presents various car types, showcasing comprehensive information with advanced filtering and pagination support. Built with Next.js and leveraging its server-side rendering capabilities.
https://github.com/programmer-dn-ai/car-hub_app_next
app filter nextjs pagination rapid-api react search tailwind typescript
Last synced: about 2 months ago
JSON representation
CarHub presents various car types, showcasing comprehensive information with advanced filtering and pagination support. Built with Next.js and leveraging its server-side rendering capabilities.
- Host: GitHub
- URL: https://github.com/programmer-dn-ai/car-hub_app_next
- Owner: Programmer-DN-AI
- Created: 2025-09-20T14:12:28.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-20T15:30:36.000Z (9 months ago)
- Last Synced: 2025-09-20T16:25:48.796Z (9 months ago)
- Topics: app, filter, nextjs, pagination, rapid-api, react, search, tailwind, typescript
- Language: TypeScript
- Homepage: https://car-hub-app-mu.vercel.app
- Size: 2.21 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Car Showcase Website
❌ Currently non-functional because the free tier of Cars by API-Ninjas has been discontinued.
##
📋 Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- 📝 [Features](#features)
- 🚀 [Quick Start](#quick-start)
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.
❌ Currently non-functional because the free tier of Cars by API-Ninjas has been discontinued.
- [**React**](https://react.dev/reference/react) is a JavaScript library for building user interfaces with a component-based architecture, facilitating reusable and maintainable code.
- [**Next.js**](https://nextjs.org/docs) is a powerful React framework that enables server-side rendering, automatic code splitting, and efficient performance optimizations for building modern web applications.
- [**TypeScript**](https://www.typescriptlang.org/docs/) is a statically typed superset of JavaScript that enhances code quality and developer productivity by identifying errors early and enabling better tooling support.
- [**RapidAPI**](https://docs.rapidapi.com/) 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**](https://v2.tailwindcss.com/docs) 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.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone {git remote URL}
```
**Installation**
Let's install the project dependencies, from your terminal, run:
```bash
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:
```env
NEXT_PUBLIC_RAPID_API_KEY=
NEXT_PUBLIC_IMAGIN_API_KEY=
```
Replace the placeholder values with your actual credentials:
- [Rapid API](https://dashboard.clerk.com)
- [Cars by API-Ninjas](https://rapidapi.com/apininjas/api/cars-by-api-ninjas)
- [Cloudinary](https://dashboard.imagin.studio)
**Running the Project**
Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
npm run dev
# or
yarn dev
```
Open [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.