CarRentals Website
Welcome to the CarRentals website! This web application is designed to help users easily find and rent cars of various configurations. It's built using Vite, providing a seamless experience for users looking to rent a car.
Table of Contents
Features
CarRentals offers the following key features:
- Home Page: A general description of the services provided by the company. The stylization and design of this page are customizable to your preferences.
-
Car Catalog Page: This page displays a catalog of cars with various configurations. Users can filter cars by:
- Brand
- Price per hour of car rental
- Number of kilometers covered by the car during its operation (mileage)
-
Favorites Page: Users can add ads to their favorites by clicking the "heart" button on the card. The button's color changes to indicate that the car is in the user's favorites.
- Modal Window: When users interact with an card, a modal window appears,
allowing them to add it to their favorites. The modal can be closed by:
- Clicking the button in the form of a "cross"
- Clicking on the backdrop
- Pressing the Esc key
Technologies Used
This project utilizes the following technologies and libraries:
- React: The core library for building the user interface.
- Redux: Used for state management of the application.
- axios: Used for making HTTP requests to the UI service heroku.com.
- react-loader-spinner: Used for displaying an animated loader.
- react-redux: Helps integrate Redux with the React application.
- reduxjs/toolkit: Used for simplified state
management and utilizing
createSlice
andcreateAsyncThunk
. - [react-router-dom]: Implemented for setting up routing within the application.
- [redux-persist]: Utilized for local storage persistence, ensuring data retention even after page reloads.
- styled-components: Used for component styling.
Installation
Follow these steps to set up and run the CarRentals website locally:
-
Clone this repository to your local machine:
git clone https://github.com/IrynaDidkivska/rent-car-project.git
-
Navigate to the project folder:
cd your-repo-name
-
Install dependencies:
npm install
-
Start the application:
npm start