Skip to content

Latest commit

 

History

History
152 lines (122 loc) · 12.1 KB

README.ua.md

File metadata and controls

152 lines (122 loc) · 12.1 KB
Raw

Застосунок для компанії по аренді автомобілів

Опис

Застосунок складається з 3х сторінок:

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

На всіх сторінка є хедер з меню сторінок, область перегляду головної інформації, та футер з контактом власника застосунку.

Домашня сторінка

  1. Має секцію-герой з загальним описом послуги та посилання на сторінку каталога автомобілів.
  2. При необхідності в подальшому можуть бути додані секції з інформацією про компанію, детальним описом послуг та умов аренди авто.

Сторінка каталогу автомобілей

Секція з картками автомобілей

  1. При відкритті сторінки рендериться 12 перших оголошень по аренді авто з бази.
  2. Кожні наступну 12 оголошень з бази можна догрузити на сторінку по кліку на кнопку Load more. Вона знаходиться під оголошеннями.
  3. Коли всі оголошення з бази завантажені, кнопка Load more зникає.
  4. У разі кліку по кнопці у вигляді “серця” на картці оголошення воно додається до списку улюблених, а колір кнопки змінюється на блакитний.
  5. При оновленні сторінки фіксується кінцевий результат дій користувача (обрані авто залишаються в списку обраних). Реалізовано за допомогою local storage.
  6. У разі повторного кліку по кнопці у вигляді “серця” оголошення видаляється зі списку улюблених, а колір кнопки змінитись до початкового стану.
  7. У разі кліку по кнопці Learn more відкривається модальне вікно з детальною інформацією про авто та умови його оренди.

Модальне вікно з детальною інформацією про авто

  1. Модальне вікно закривається по кліку на кнопку у вигляді “хрестика”, по кліку на backdrop або натисканню на клавішу Esc.
  2. Кнопка Rental car надає можливість користувачу зʼєднатись з компанією за номером телефону +380730000000.

Секція фільтрації карток автомобілей

  1. Перше поле пошуку авто за брендом реалізовано за допомогою dropdown із марками автомобіля. Список автомобільних брендів складається з усіх брендів, що вже є в базі даних.
  2. Друге поле пошуку авто в ціновому діапазоні до вказаної суми за годину оренди авто реалізовано за допомогою dropdown. Крок 10$.
  3. Третя група input дозволяє обирати авто в обраному проміжку його пробігу. Користувач в поле вбиває ціле число, а воно відображається через кому, після тисяч (наприклад, користувач вводить 4500 і бачить 4,500).
  4. Поля пробігу авто можна скинути кнопкою видалити (з хрестиком). Вона з'являється, як тільки поле перестає бути пустим.
  5. Всі обрані фільтри модна скинути одночасно кнопкою Reset, що з'являється при умові хоч одного заданого фільтра.
  6. Пошук авто відбувається при натисненні на кнопку Search.

Сторінка обраних авто

  1. Рендерить ті авто, що були додані до списку обраних.
  2. Якщо ні одного обраного авто немає, відображається пуста сторінка з пропозицією відвідати каталог авто і кнопкою-посиланням на каталог.

Тестове завдання

Опис

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

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

Технічне завдання

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

Створи маршрутизацію, використовуючи React Router. У застосунку повинні бути такі маршрути:

  • “/” - домашня сторінка з загальним описом послуг, що надає компанія
  • “/catalog” - сторінка, що містить каталог автівок різної комплектації
  • “/favorites” - сторінка з оголошеннями, які були додані користувачем в улюблені Якщо користувач зайшов за маршрутом, якого не існує, його необхідно перенаправляти на домашню сторінку. Для роботи зі списком оголошень створи свій персональний бекенд для розробки за допомогою UI-сервісу https://mockapi.io/. Створи ресурс adverts. Використай конструктор ресурсу та опиши об'єкт оголошення, як описано нижче.

Advert

  1. Створіть advert в Mockapi з наступними полями: id, year, make, model, type, img, description, fuelConsumption, engineSize, accessories, functionalities, rentalPrice, rentalCompany, address, rentalConditions, mileage (див. скріншот нижче). Для наповнення колекції можна взяти adverts.json
  2. Зображення авто можете підібрати самостійно.
  3. В базі має бути від 32 оголошень з різними значеннями (на ваш розсуд). Реалізована пагінація, де одна сторінка пагінації повинна вміщати 8 оголошень.

Додаткове завдання

Додай фільтрацію:

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

Критерії виконання

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