React застосунок для компанії, що надає послуги надання в Україні автомобілів в оренду. Застосунок складається з 3х сторінок:

• домашня сторінка з загальним описом послуг, що надає компанія.

• сторінка, що містить каталог автівок різної комплектації, які користувач може фільтрувати за маркою, ціною за годину оренди авто та кількістю кілометрів, яку подолав автомобіль під час його експлуатації (пробіг).

• сторінка з оголошеннями, які були додані користувачем в улюблені

Відповідно до макету реалізовано картку оголошення про здачу авто в оренду. На першій сторінці каталогу рендериться 12 оголошень, а їх решта - по кліку на кнопку Load more. У разі кліку по кнопці у вигляді “серця” на картці оголошення воно додається до списку улюблених, а колір кнопки змінюється. При оновленні сторінки фіксується кінцевий результат дій користувача. Тобто, якщо додати оголошення в улюблені та оновити сторінку - то кнопка все одно залишається в стані “улюбленого оголошення” із відповідним кольором. У разі повторного кліку по кнопці у вигляді “серця” оголошення видаляється зі списку улюблених, а колір кнопки змінюється до початкового стану. У разі кліку по кнопці Learn more відкривається модальне вікно з детальною інформацією про авто та умови його оренди. Модальне вікно закривається по кліку на кнопку у вигляді “хрестика”, по кліку на backdrop або натисканню на клавішу Esc. В коді пробіг авто прописаний одним значенням (наприклад, 4500). В UI - виведено через кому (4,500). Кнопку Rental car реалізовано як посилання, що надає можливість користувачу зʼєднатись з компанією за номером телефону +380730000000. Організована фільтрація . dropdown із марками автомобіля - показує оголошення з автівками відповідної марки.

Створено маршрутизацію, використовуючи React Router. У застосунку є такі маршрути: “/” - домашня сторінка з загальним описом послуг, що надає компанія “/catalog” - сторінка, що містить каталог автівок різної комплектації “/favorites” - сторінка з оголошеннями, які були додані користувачем в улюблені Якщо користувач зайшов за маршрутом, якого не існує, його буде перенаправлено на домашню сторінку.

Для роботи зі списком оголошень створено свій персональний бекенд для розробки за допомогою UI-сервісу https://mockapi.io/.

Advert:

Масив об'єктів advert в Mockapi з наступними полями: id, year, make, model, type, img, description, fuelConsumption, engineSize, accessories, functionalities, rentalPrice, rentalCompany, address, rentalConditions, mileage (див. скріншот нижче).

• dropdown із цінами за годину оренди авто (крок 10$) - показано оголошення з автівками, ціна за оренду яких належить до діапазону цін, обраних користувачем група inputів для визначення діапазону пробігу, в межах якого користувач шукатиме оголошення

Верстка фіксована в рх, семантична та валідна. Використано Redux. Для запитів використовується бібліотека Axios. Пагінація реалізована на бекенді. Немає помилок в консолі браузера. Інтерактивність працює відповідно до технічного завдання. Код відформатовано та не містить невикористовуваного коду. Проєкт задеплоїний на github pages.