https://github.com/huseyinerikci/carrental

This project allows the listing of vehicles, filtering them, and displaying detailed information about the vehicles.
https://github.com/huseyinerikci/carrental

motion react react-pagination react-select tailwindcss typescript

Last synced: 3 months ago
JSON representation

This project allows the listing of vehicles, filtering them, and displaying detailed information about the vehicles.

• Host: GitHub
• URL: https://github.com/huseyinerikci/carrental
• Owner: huseyinerikci
• Created: 2025-03-04T19:11:26.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-03-11T21:19:24.000Z (3 months ago)
• Last Synced: 2025-03-11T22:20:45.218Z (3 months ago)
• Topics: motion, react, react-pagination, react-select, tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 1.33 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Car Rental Project 🚗

This project is a car rental application developed using React, TypeScript, and Tailwind CSS. The app allows the listing of vehicles, filtering them, and displaying detailed information about the vehicles.

## Preview

A preview of my car rental project is in the gif below.

![carRental](https://github.com/user-attachments/assets/2196ea40-3eb9-4515-b64c-5d2108c96bbd)

## 🚀 Features

* Vehicle Data: Vehicle information is fetched from the Open Data Soft API.

* Vehicle Images: Vehicle images are fetched from the Imagin Studio API.

* Filtering: Vehicles can be filtered by brand, model, and year, and displayed accordingly.

* Detailed Information Modal: Clicking on a vehicle from the list opens a modal displaying detailed information and images of the vehicle.

* Responsive Design: The application is designed to be responsive, adapting to different screen sizes.

* Dropdown Menus: React Select library is used for dropdown menus that allow users to select vehicle brand, model, and more.

* Pagination: React Paginate library is used for paginating vehicle data.

* Cursor AI: Cursor AI technology has been used to enhance the user experience.

* Animations: Animations are implemented using the Motion library.

## 🛠️ Technologies

* React: React is used for building the user interface.

* TypeScript: TypeScript is used to ensure type safety.

* Tailwind CSS: Tailwind CSS is used for styling and building a responsive design.

* React Select: Used for dropdown menus.

* React Paginate: Used for pagination functionality.

* Motion: Used for animations in the app.

* Cursor AI: Used to enhance user interaction.

* Open Data Soft API: The API used to fetch vehicle data.

* Imagin Studio API: The API used to fetch vehicle images.