fantom26 / education-platform

Front-End School 2.0 / Кейсове завдання

Опис завдання

Твоя задача — створити застосунок для навчання.

Застосунок має гарно виглядати, але для інженера код важливіший. Тому можна вільно використати готові UI-бібліотеки. На ваш розсуд, які дані ви будете показувати користувачу.

Додаток містить дві сторінки:

• сторінка з курсами;
• сторінка з переглядом курсу;

Виконані завдання:

• В стрічці з курсами необхідно відобразити останні 10 курсів. Курс містить:
  • Фото курсу.
  • Заголовок курсу.
  • Кількість уроків, навички та рейтинг.
  • На сторінці виводимо 10 курсів і додаємо пагінацію.
  • Додатково:
    • при ховері відтворювати відео без звуку.
• На сторінці з переглядом курсу відображається перше відео з даного курсу, деталі про курс та список уроків:
  • При кліку на урок (якщо він не заблокований) для перегляду відкриється поточне відео, користувач повинен розуміти, який урок з курсу переглядає.
  • Якщо урок заблокований показати це користувачу.
  • Додатково:
    1. Зробити функціонал picture in picture (без сторонніх бібліотек):
    • Відео можна вивести поверх сторінки при кліку. При цьому відео знаходиться у правому нижньому куті сторінки й можна ходити по інших сторінках.
    2. Додати зміну швидкості програвання відео через клавіатуру (без сторонніх бібліотек) (комбінація клавіш на власний розсуд):
    • Так же вивести інформацію біля відео як цим користуватись.

Додаткові завдання:

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