This is a car showcase web application built using Next.js, Tailwind CSS, Headless UI, Rapid API, and Imagin Studio Car Images. The application allows users to browse through a collection of car images fetched from the Imagin Studio Car Images and view details about each car.
- Browse through a collection of car images
- View details about each car
- Search for specific car models
- Responsive design for optimal viewing on various devices
- Next.js: A React framework for building server-side rendered and static web applications.
- Tailwind CSS: A utility-first CSS framework for quickly building custom designs.
- Headless UI: A set of completely unstyled, fully accessible UI components for React applications.
- Rapid API: A platform that allows developers to access a wide range of APIs for various purposes.
- Imagin Studio Car Images: An API providing high-quality images of various car models.
- Clone the repository:
git clone <repository-url>
- Navigate into the project directory:
cd car-showcase-app
- Install dependencies:
npm install
- Create a
.env.localfile in the root directory of the project and add your Rapid API key:
RAPID_API_KEY=your_rapid_api_key_here
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:3000to view the application.
- Upon opening the application, you'll be presented with a collection of car images.
- Use the search bar to find specific car models.
- Click on a car image to view more details about the car.
- Next.js: https://nextjs.org/
- Tailwind CSS: https://tailwindcss.com/
- Headless UI: https://headlessui.dev/
- Rapid API: https://rapidapi.com/
- Imagin Studio Car Images: https://www.imagin.studio/
This project is licensed under the MIT License.