Skip to content

Latest commit

 

History

History
118 lines (77 loc) · 3.37 KB

README.md

File metadata and controls

118 lines (77 loc) · 3.37 KB

Car-Hub

Overview

This project is a car catalog web application called Car Hub. It allows users to discover and explore various cars based on different parameters such as manufacturer, year, fuel type, and more.

Features

  • Car Catalog: Explore a wide range of cars available in the catalog.
  • Search Functionality: Search for cars by manufacturer, year, model, and fuel type.
  • Custom Filters: Filter cars based on fuel type and year of production.
  • Car Details: View detailed information about each car, including specifications and images.
  • Responsive Design: The application is responsive and works well on various screen sizes.

Technologies Used

  • Next.js: Used for building the frontend of the web application.
  • React: Used for creating reusable UI components.
  • Tailwind CSS: Used for styling the components and layouts.
  • Headless UI: Used for creating accessible and composable React components.
  • RapidAPI: Used for fetching car data from an external API.

Project Structure

app/
├── layout.tsx
└── page.tsx
components/
├── CarCard.tsx
├── CarDetails.tsx
├── CustomButton.tsx
├── CustomFilter.tsx
├── Footer.tsx
├── Hero.tsx
├── Navbar.tsx
├── SearchBar.tsx
├── SearchManufacturer.tsx
└── ShowMore.tsx
constants/
└── index.tsx
types/
└── index.tsx
utils/
└── index.tsx

File Structure and Information

app > layout.tsx

  • Defines the layout for the application, including the navbar and footer.

app > page.tsx

  • Represents the main page of the application where users can explore cars.

components > CarCard.tsx

  • Displays information about a single car.

components > CarDetails.tsx

  • Provides detailed information about a car in a modal dialog.

components > CustomButton.tsx

  • Custom button component with optional right icon.

components > CustomFilter.tsx

  • Component for filtering cars based on fuel type and year of production.

components > Footer.tsx

  • Footer component displaying company information and links.

components > Hero.tsx

  • Hero section introducing the application with a call-to-action button.

components > Navbar.tsx

  • Navigation bar component displaying the logo and sign-in button.

components > SearchBar.tsx

  • Component for searching cars by manufacturer and model.

components > SearchManufacturer.tsx

  • Component for searching car manufacturers using a dropdown.

components > ShowMore.tsx

  • Component for displaying a button to load more cars.

constants > index.tsx

  • Contains arrays of manufacturers, years of production, and fuel types.

types > index.tsx

  • Contains TypeScript interfaces for various props used in the application.

utils > index.tsx

  • Contains utility functions for fetching cars, generating car image URLs, calculating car rent, and updating search parameters.
  • Exports: fetchCars, generateCarImageUrl, calculateCarRent, updateSearchParams functions.

How to Run

  1. Clone this repository to your local machine.
  2. Navigate to the project directory.
  3. Install dependencies using npm install or yarn install.
  4. Obtain a RapidAPI key and add it to the appropriate environment file.
  5. Run the development server using npm run dev or yarn dev.
  6. Open your browser and go to http://localhost:3000 to view the application.