Цей застосунок було розроблено для компанії, що надає послуги надання в Україні камперів в оренду.

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

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

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

• На сторінці каталогу реалізовано картку оголошення про здачу кампера в оренду та рендериться 4 оголошення, а їх решта - по кліку на кнопку Load more.

• У разі кліку по кнопці у вигляді “серця” на картці оголошення воно додається до списку улюблених, а колір кнопки змінюється.

• При оновленні сторінки фіксується кінцевий результат дій користувача. Тобто, якщо додати оголошення в улюблені та оновити сторінку - то кнопка все одно залишається в стані “улюбленого оголошення” із відповідним кольором.

• У разі повторного кліку по кнопці у вигляді “серця” оголошення видаляється зі списку улюблених, а колір кнопки змінюється до початкового стану.

• У разі кліку по кнопці Show more відкривається модальне вікно з детальною інформацією про кампер.

• Модальне вікно закривається по кліку на кнопку у вигляді “хрестика”, по кліку на backdrop та натисканню на клавішу Esc.

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

• В модальному вікні також міститься форма для оформлення бронювання камперу, що складається з полів name, email, booking date і comment. Поля name, email, booking date є обовʼязковими до заповнення і проходять перевірку на валідність введених значень.(У випадку невалідних даних форма не відправляється, у випадку валідної форми - сторінка оновлюється).

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

У застосунку є такі маршрути:

• “/” - домашня сторінка з загальним описом послуг, що надає компанія;

• “/catalog” - сторінка, що містить каталог камперів різної комплектації;

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

Якщо користувач зайшов за маршрутом, якого не існує, він буде перенаправлений на домашню сторінку.

• React + Vite
• Redux Toolkit
• Axios
• Yup
• React-hook-form
• React-flatpickr та ін.

• Vercel

Для установки та запуску проєкту необхідно:

• Встановити VSCode або подібний редактор коду.

• Склонувати репозиторій та запустити редактор коду.

  • Послідовність дій через термінал:

git clone https://github.com/MolchanovaOlga/goit-adverts-app.git

cd yourproject

• Для установки залежностей виконати команду:

npm install

• запустити проєкт в режимі розробки (npm)":

npm run dev

або (yarn):

npm start

• Молчанова Ольга

• email: [email protected]

• Linkedin: https://www.linkedin.com/in/olgas-molchanova/