yurii-corssa / language-learning-app Goto Github PK

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

• Home: Сторінка з описом переваг компанії та кнопкою для початку роботи, яка перенаправляє на сторінку "Teachers".
• Teachers: Сторінка з переліком викладачів, які користувач може фільтрувати за мовою викладання, рівнем знань учнів, з якими працює викладач, та ціною за годину заняття.
• Favorites: Приватна сторінка з викладачами, доданими користувачем до "обраних".

• Фронт-енд:
  • React
  • Vite (бандлер)
  • Redux (управління станом)
  • styled-components (стилізація)
  • react-hook-form & yup (валідація форм)
  • React Router (маршрутизація)
• Бекенд:
  • Firebase Authentication (аутентифікація)
  • Firebase Realtime Database (зберігання даних про викладачів)
• Деплоймент: GitHub Pages
• Критерії виконання:
  • Респонсивна верстка (від 320px до 1440px)
  • Відсутність помилок в консолі браузера
  • Код відформатований та без коментарів
  • README.md з описом проекту
  • Деплоймент на GitHub Pages

• ✅ Додати можливість реєстрації та логінізації користувачів за допомогою Firebase Authentication.
• ✅ Реалізувати отримання даних про поточного користувача.
• ✅ Додати можливість виходу з системи.

• ✅ Створити форму реєстрації/авторизації.
• ✅ За допомогою react-hook-form та yup реалізувати валідацію полів.
• ✅ Всі поля мають бути обов'язковими до заповнення.
• ✅ Додати модальне вікно з формою, яке закривається по кліку на кнопку "X", по кліку на backdrop або натисканні на клавішу Esc.

• ✅ Створити публічні маршрути /, /teachers.
• ✅ Створити приватні маршрути /favorites.
• ✅ Створити сторінку для неіснуючих маршрутів.

• ✅ Створити колекцію "teachers" в Firebase Realtime Database.
• ✅ Зберігати дані про викладачів у форматі, як описано в технічному завданні.

• ✅ Реалізувати картку з описом характеристик викладача.
• ✅ Картка має містити інформацію про ім'я, прізвище, мови викладання, рівні знань учнів, з якими працює викладач, рейтинг, відгуки, ціну за годину заняття, опис уроків, умови та досвід.

• ✅ На сторінці "Teachers" мають рендеритися 4 картки викладачів.
• ✅ Додати кнопку "Load more" для завантаження нових карток.
• ✅ При кліку на кнопку "Load more" має виконуватися запит до бази даних для відображення нової порції карток.

• ✅ НЕавторизованим користувачам при кліку на кнопку "серця" має з'являтися модальне вікно про те, що даний функціонал доступний лише для авторизованих користувачів.
• ✅ Авторизованим користувачам при кліку на кнопку "серця":
  • ✅ має додаватися до списку обраних за допомогою роботи з колекцією users - by Firebase).
  • ✅ Колір кнопки "серця" має змінюватися.
• ✅ При оновленні сторінки авторизованим користувачем має фіксуватися кінцевий результат дій користувача (кнопка "серця" залишається в стані “обраної” із відповідним кольором).
• ✅ При повторному кліку по кнопці "серця" картка повинна бути видалена зі списку обраних, а колір кнопки змінитись до початкового стану.

• ✅ Реалізувати функціональність розширення картки викладача для відображення додаткової інформації та відгуків від його учнів при натисканні кнопки "Read more".

• ✅ При кліку на кнопку "Book trial lesson" має відкриватися модальне вікно з формою для бронювання пробного заняття.
• ✅ Реалізувати форму та мінімальну валідацію її полів за допомогою react-hook-form та yup. Всі поля обов'язкові до заповнення.
• ✅ Модальне вікно повинно закриватися по кліку на кнопку "X", по кліку на backdrop або натисканні на клавішу Esc.

• ✅ Для авторизованого користувача доступна приватна сторінка "Favorites", при переході на яку користувач має можливість переглянути усі картки викладачів, які були додані ним в “обрані”.
• ✅ За стилізацією сторінка має бути аналогічною сторінці "Teachers".

• ❗ Реалізувати адаптивну верстку від 320px до 1440px, щоб вона коректно відображалась на мобільних та планшетних пристроях.
• ❗ Переконатися, що стилізація семантична та валідна.

• ❗ Перевірити відсутність помилок у консолі браузера.
• ❗ Провести тестування інтерактивності відповідно до технічного завдання.

• ❗ Переконатися, що код відформатований та без зайвих коментарів.

• ❗ Створити README.md з описом проекту: про що цей проект, основні технології, макет, технічне завдання.

• ❗ Деплоїти проект на GitHub Pages за допомогою GitHub Actions.