Rent'n'Roll

Application for a company that provides car rental services in Ukraine. The application consists of 3 pages:

• Home - a page with a general description of services provided by the company.
• Catalog - a page containing a catalog of cars of various configurations, which the user can filter by brand, price per hour of car rental and the number of kilometers covered by the car during its operation (mileage). Clicking on Learn more button, a modal window opens with detailed information about the car and its rental conditions.
• Favorites - a page with ads that have been added to favorites by the user.

The technology stack used in the project:

• React for dynamic user interfaces.
• Redux for state management.
• Axios for making HTTP requests.
• Emotion for styling of components.
• redux-persist for data persistence.
• reduxjs/toolkit for Redux setup.

Deploy

The frontend part of the web-app is deployed on gh-pages.

"https://ludmilka-k.github.io/rent-n-roll/";

Backend

The backend for development is created using the UI service for data provision.

"https://mockapi.io/";

Technical task

1. According to the layout, implement a car rental announcement card.
2. 12 ads should be rendered on the first page of the catalog, and the rest of them - after clicking on the Load more button.
3. If you click on the "heart" button on the ad card, it should be added to the list of favorites, and the color of the button should change.
4. When updating the page, the final result of the user's actions should be recorded. That is, if you add an ad to your favorites and refresh the page, the button still remains in the "favorite ad" state with the appropriate color.
5. If you click the heart button again, the ad should be removed from the list of favorites, and the color of the button should change to its original state.
6. If you click on the Learn more button, a modal window should open with detailed information about the car and its rental conditions.
7. The modal window should be closed by clicking on the button in the form of a "cross", by clicking on the backdrop or pressing the Esc key.
8. In the code, the mileage of the car must be written with one value (for example, 4500). In the UI - displayed with a comma (4,500).
9. The Rental car button should be implemented as a link that will allow the user to connect with the company by phone number +380730000000.
10. Add filtering. dropdown with car brands makes.json - show ads with cars of the corresponding brand.

Create routing using React Router.

The application should have the following routes: "/" - home page with a general description of the services provided by the company "/catalog" - a page containing a catalog of cars of various configurations "/favorites" - a page with ads that have been added to favorites by the user If the user entered using a route that does not exist, he must be redirected to the home page.

Create your own personal backend

To work with a list of ads, create your own personal backend for development using the UI service https://mockapi.io/. Create an adverts resource. Use the resource constructor and describe the ad object as described below.

1. Create an advert in Mockapi with the following fields: id, year, make, model, type, img, description, fuelConsumption, engineSize, accessories, functionalities, rentalPrice, rentalCompany, address, rentalConditions, mileage (see screenshot below). It is forbidden to add new fields! To fill the collection, you can take adverts.json. If the data is missing or incomplete, please add it yourself.
2. You can choose the image of the car yourself.
3. The database should contain at least 32 ads with different meanings (at your discretion). Implemented pagination, where one pagination page should accommodate 12 ads. Pagination should be implemented on the Mockapi side

Add filtering:

dropdown with car brands makes.json - show ads with cars of the corresponding brand

Additional task

• dropdown with prices per hour of car rental (step 10$) - show ads with cars whose rental price belongs to the price range selected by the user
• a group of inputs to determine the mileage range within which the user will search for an ad

Performance criteria

• The layout is fixed in rh, semantic and valid.
• Mandatory use of Redux.
• The Axios library is used for queries
• Pagination is implemented on the backend
• There are no errors in the browser console.
• Interactivity works according to the terms of reference.
• The code is formatted and does not contain unused code *
• The repository should be described in README.md.
• The project is deployed on github pages or netlify.com.