CarHub is a web application built using Next.js, React.js, Tailwind CSS, and Typescript. It allows users to search for a variety of cars based on their manufacturer and model. Users can obtain information about the car models they have searched, including mileage, gas type, model year, drive base, and more.
- Search for cars based on manufacturer and model.
- View detailed information about the car models, including mileage, gas type, model year, drive base, etc.
- Filter cars based on fuel type (gas or electric) and model year (2015 to 2023).
- Display cars using visually appealing car cards.
- Load more cars by clicking the "Show More" button below the car cards.
- The wwebapp is mobile responsive as well.
- Access additional details of a car by clicking the "View More" button on the car card. This provides more information about the car along with a few static images.
Please note that the API used to generate car images is a paid API, which means specific car images cannot be generated dynamically. As a result, the project includes static images of a particular car for demonstration purposes.
The CarHub web application is deployed and accessible at the following URL: https://car-showcase-gqkf.vercel.app/
To run the CarHub project locally, follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/your-username/carhub.git -
Navigate to the project directory: Install the required dependencies using a package manager such as npm or yarn:
npm installoryarn install -
Start the development server:
npm run devoryarn dev -
Open your web browser and visit
http://localhost:3000to access the CarHub web application.
- Car API : https://rapidapi.com/apininjas/api/cars-by-api-ninjas?utm_source=youtube.com%2FJavaScriptMastery&utm_medium=referral&utm_campaign=DevRel
- Car Images API (paid) : https://www.imagin.studio/car-image-api
- Project images : Inside public folder.
Contributions to CarHub are welcome! If you encounter any issues or have suggestions for improvement, please feel free to open an issue or submit a pull request on the project's GitHub repository. Please note this webapp can further be used to make acar rental website.
We would like to express our gratitude to the creators of Next.js, React.js, Tailwind CSS, and Typescript for their excellent frameworks and tools that made the development of CarHub possible.