Topic outline

  • General

  • Загальна інформація про курс

    • Персональна інформація Wiki

      Савіцький Роман

      Telegram @RomanSavitskyi

      gitlab @Savitskyi 
      github roman-savitskyi
      bitbucket Roman.Savitskyi@infopulse.com

    • Варіант завдання Assignment

      Оцінка за цей курс є вашим номером завдання.

      Кожен варіант буде мати власну тематику розробки. Свою тематику ви зможете знайти у списку нижче.
      Будь ласка, створіть репозитарій один на групу (варіант) у вашому університецькому гітлабі. Кожне завдання ви будете здавати, як пул ріквест (мердж ріквест) до цього репозитарію. Саме посилання на пул ріквест (ПР), ви будете додавати на портал. Зверніть увагу, для кожного завдання повинна міститись історія комітів. ПР без логічних комітів будуть йти на захист або зниження оцінки (-2 бали)

      Штрафи:

      • Несвоєчасна здача лаби (1 місяць від дня практики) -1 бал
      • Несвоєчасна здача лаби (після екзамену) -2 бали
      • Відсутні коміти, невірна робота з гіт -2 бали
      • Плагіат роботи -10 балів роботі + 0 саме за цю лабу, -5 автору роботи
      • Командні лаби будуть оцінюватись однією оцінкою для всієї команди 

      1. Онлайн каталог товарів з можливістю фільтрації, типу Розетка [Гіт]
      2. Додаток для вірного підбору амуніції для бійця зі списками необхідних речей та рекомендацій [Гіт]
      3. Гра "Судоку" [Гіт]
      4. Симулятор риболовлі зі статистичними даними, режимом карʼєри і тд [Гіт]
      5. Система відстеження [Гіт]
      6. Додаток для планування та відстеження тренувань військових одиниць. [Гіт]
      7. Додаток для розвитку навичок логічного мислення та креативності. [Гіт]
      8. Система замовлення ліків з доставкою додому. [Гіт]
      9. Інтерактивна карта спадщини ЮНЕСКО в Україні з детальною інформацією про об'єкти. [Гіт]
      10. Платформа для організації хакатонів та технічних конкурсів. [Гіт]
      11. Додаток для навчання та розвитку навичок з метою самовдосконалення. [Гіт]
      12. Платформа для обміну навчальними матеріалами та ресурсами. [Гіт]
      13. Щоденник подяки та позитивних моментів для поліпшення настрою. [Гіт][Гіт]
      14. Додаток для навчання тактичних стратегій та військової термінології. [Гіт]
      15. Додаток для подорожі на велосипедах [Гіт]
      16. Платформа для волонтерів та організацій, що шукають допомогу. [Гіт]
      17. Гра "Memory" з карточками. [Гіт]
      18. Веб-сервіс для навчання молоді навичкам фінансової грамотності. [Гіт]
      19. Сайт з агрегованою інформацією про події, конференції та зустрічі розробників. [Гіт]
      20. Освітній додаток для дітей про об'єкти світової спадщини та їх значення. [Гіт]
      21. Веб-ресурс для підвищення обізнаності та освіти щодо соціальних питань. [Гіт]
      22. Відкритий збірник корисних компонентів та бібліотек на React. [Гіт]
      23. Додаток для вивчення мов та традицій об'єктів спадщини з різних країн. [Гіт]
      24. Додаток для координації та розподілу гуманітарної допомоги. [Гіт]
      25. Додаток для вивчення першої медичної допомоги та невідкладних станів. [Гіт]
      26. Онлайн-платформа для спільної організації благодійних акцій. [Гіт]
      27. Додаток для відстеження ініціатив та проектів для покращення громади. [Гіт]
      28. Система розкладу з можливістю відстеження змін та оновлень. [Гіт]
      29. Військовий тренажер для навчання рішень у стресових ситуаціях. [Гіт]
      30. Система для генерації тем для React курсу наступного року [Гіт]
      31. єППО. Аналог додатку у вебі [Гіт]
      32. Система заявок на стипендії та фінансову допомогу. [Гіт]
      33. Система відстеження медичного стану війсчьковослужбовців. [Гіт]
      34. Додаток для створення та відстеження особистих цілей та досягнень. [Гіт]
      35. Система електронних медичних карт пацієнтів. [Гіт]

  • Лекційний матеріал

  • Практичні завдання

    • 1. Компоненти та старт проекту Assignment

      Командна частина. Для команди необхідно розвернути проект на нексті, налаштувати ESLint, Pretier (за бажанням). Команда повинна обговорити і створити структуру проекту. В проектах, де є можливість використання декількох сторінок, створити для кожного студента окрему сторінку, де немає такої можливості, то окремі блоки. Назва сторінок по функціональності, а не по прізвищам студентів.
      Інструкція, що може допомогти тут 

      Персональна частина.

      Створити 3 компоненти, які будуть мати по 3+ проп, використовувати стейт та інші компоненти. Приклад. Компонент А використовує компонент Б, компонент Б використовує компонент С. Компонент повинен мати довільну верстку, але не мати зайвих перемальовувань. Компоненти повинні бути функціональні з хоча б мінімальною логікою. 
      Плануйте свої компоненти так, щоб далі ви могли їх розширювати та перевикористовувати командно. Тобто 3 * 5 = 15. Після цієї лаби у вас в проекті буде близько 15 компонентів

      Оцінювання:
      Командна:
      - Створений проект з лінтером - 2 бали
      - Логічно організована структура - 2 бали
      Персональна:
      - Існують компоненти, які містять state, props - 2 бали
      - Виконані умови щодо перевикористання та перемальовування компонентів - 2 бал

      Штрафи:
      - Невірне використання гіт - 0 балів
      - Невірне оформлення пул ріквестів - 0 балів
      - Здача лабораторної роботи після 7 жовтня 2023 - -1 бал
      - Здача лабораторної роботи після екзамену - -2 бали

      Як здавати поточну лабораторну роботу.
      Командна частина має бути в гілці мастер (мейн) з відповідними комітами, всі персональні частини, як ПР (МР) до мастеру.
      Команда працює в девелопі з гітом і git flow.

    • 2. Списки та ліниве завантаження Assignment

      Кожен студент виконує завдання персонально. 
      Ваші попередньо створені компоненти (або нові) повинні включати логіку з використанням умовного рендерингу (if), умовного рендерингу з поверненням null та використання хоча б одного звичайного списку (map). 

      Додатково ви можете створити компонент з віртуальними елементами (ліба туть). Віртуальні елементи можуть бути будь-чим (таблиця, список, грід, карточки).

      Додатково ви можете створити компонент (не сторінка) з Lazy завантаженням для оптимізації застосунку. Будемо перевіряти коректність вибору компоненту для лінивого завантаження.

      Оцінювання:
      1) Використання умовного рендерину 1 бал
      2) Використання умовного рендерингу з null 1 бал
      3) Створення списку з елементами 2 бали

      Загальна сума балів - 4 бали

      Додаткові бали
      1) Використання віртуальних елементів 2 бали
      2) Створення лінивого компоненту 1 бал
      3) Вірний вибір для створення лінивого компоненту 1 бал

      Штрафи
      1) Несвоєчасна здача (після 21.10.23) -1 бал
      2) Несвоєчасна здача (після екзамену) -2 бали
      3) Некоректна робота з гітом -1 бали

      * Студент може працювати над всім попередньо створеним кодом в проекті, незалежно від автора.

    • 3. Hooks Assignment

      Персональна задача: Кожен студент повинен створити кастомний хук, який використати ДОРЕЧНО у одному із компонентів системи.
      Додати отримання данних з "умовного" бекенду (json, localstorage, openApi) за допомогою useEffect або іншими засобами (nextjs, routing).
      А також використати useRef для однієї з цілей на проекті.

      Командна задача: провести ревью та надати рекомендації виконавцю, виконавець виправляє. Перевірка відбувається після схвалення від члена команди.

      Оцінювання:

      Доречне використання кастомного хуку - 4 бали
      Використання отримання даних - 2 бали
      Використання useRef - 2 бали

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

      Обовʼязково в коментарі вказуйте прізвище ревьювера

      Штраф
      Гіт -  2 бали
      Несвоєчасна здача - 1 бал (4.11.23)
      Несвоєчасна здача після екзаменту - 2бали

    • 4. Портали та форми Assignment

      Розробник повинен створити портал для нотифікацій користувача чи системних нотифікацій на проекті. 
      Або створити форму, яка містить 4+ полів та використовує реакт хук форм або формік та валідується за допомогою yup, zod.

      Якщо в проекті немає форми чи порталу, то можна створити одну з форм нижче:
      https://ua.meest.com/cargo-calculate-delivery-cost

      https://calc.ukrposhta.ua/domestic-calculator (частина "В межах України")
      Ці форми можуть бути, як частина іншого репозитарію.

      Оцінювання
      Створення форми або порталу 10 балів

      Штраф
      Гіт -  2 бали
      Несвоєчасна здача - 1 бал (12.11.23)
      Несвоєчасна здача після екзаменту - 2бали
      Використання лише реакт форм - 4 бали

    • 5. Реакт роутер + CSS Assignment

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

      Завдання на CSS. Кожен член команди може виконати одне із наступних завдань
      - Створити можливість зміни теми (світла, темна) на сторінці
      - Можливість збільшувати, зменшувати розмір тексту (доступність)
      - Змінювати контрастність на чорне, біле (АА доступність)
      - Використати в компоненті CSS in JS
      - Використати CSS модуль

      * Якщо в команді 6 людей, то може бути повторення завдання.

      Завдання на роутинг. Кожен член команди може виконати одне із наступних завдань
      - Зробити роутинг в проекті
      - Зробити layout + outlet в проекті
      - Зробити приватний роутинг в окремому репозитарії (роутинг на який будуть мати доступ окремі групи користувачів, як то авторизовані чи з платною підпискою). Завдання може бути виконано в окремому репозитарії. Земулювати роботу можна за допомогою https://dummyjson.com/docs/auth

      Оцінка
      - CSS 5 балів
      - Роутинг 5 балів

      Штрафи
      - Гіт -2 бали
      - Несвоєчасність (з 26.11.23) -1 бал
      - Несвоєчасність після екзамену -2 бали

    • 6. Стейт менеджмент Assignment

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


      Оцінка

      - Всі необхідні дані мігровані у модуль - 5 балів
      - Відсутнє непотрібне підняття (bubbling) - 5 балів
      - Коректно винесена бізнес логіка. Компоненти не мають логіки всередині - 5 балів. 

      * Третій пункт. Оцінка від зворотнього.

      Штрафи:
      - невірна робота з гіт 2 бали
      - несвоєчасніть (9.12.23) - 1 бал
      - після екзамену - 2 бали

    • Демо проекту Assignment

      Спільне проведення демо презентації по своєму продукту.
      Демо повинно містити невеличку презентацію з метою, порівнянням аналогів, технічною реалізацією (4-5 слайдів) та демонстрацією самої програми.

      Оцінка спільна для всієї групи
      Презентація 5 балів
      Демонстрація роботи 10 балів
      Доповідь 5 балів

    • Тест теоретичних знань Quiz

      10 запитань, 20 хвилин, 25 балів

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

    • 1. Додаткова практична робота Assignment

      Додаткова практична робота, яка була виконана 5.10.23 під час практичної сесії

    • 2. Codility, codewars Assignment

      Додаткове завдання, де можна пройти один з Codility або Codewars рішень.
      https://app.codility.com/c/run/trainingYQJVSA-GF4/
      https://www.greatfrontend.com/prepare
      https://bigfrontend.dev/react

      https://www.freecodecamp.org/ukrainian/learn/front-end-development-libraries/#react-and-redux 
      Завдання вкінці (Проєкти «Бібліотеки Front End»)

      Вирішення двох простих задач або однієї середньої
      Додаткові 5 балів

      Надавати посилання на рішення або скрін

    • 3. React Udemy course Assignment

      Для отримання додаткових 8 балів, необхідно пройти один з наведених нижче курсів

      Для зарахування, вам необхідно додати сертифікат, як файл до цього завдання

    • 4. Співбесіда з 5 запитань. Assignment

      Студент має змогу пройти співбесіду з 5 запитаннями по всьому курсу.
      Список запитань попередньо не буде розшарений, але буде фіксований.
      Студент може запропонувати від 5 до 10 балів для співбесіди.

      Якщо студент відповідає вірно на 0-2 запитання, студент втрачає ці бали.
      Якщо студент відповідає вірно на 3 запитання, студент зберігає бали.
      Якщо студент відповідає вірно на 4-5 запитань, студент подвоює бали (+5-10 балів)

      Для того, щоб запросити співбесіду, необхідно просто додати виконання завдання з текстом "Співбесіда на N балів"

    • 5. pet-project / NDA project + співбесіда Assignment

      Якщо ви працює з реакт і знаєте дисципліну, ви можете здати курс з пет проектом чи проектом, який під НДА.
      Якщо це пет-проект, додайте посилання на проект і ми проведемо невелику співбесіду по курсу.
      Якщо це проект під NDA, тоді просто додавайте в рішення запис "Проект під NDA. Хочу співбесіду"
      Проект повинен включати 85% всієї основної частини матеріалу

      Оцінка 0-100 балів. 
      Оцінка НЕ поєднується з іншими оцінками

  • Корисна інформація та додаткові ресурси

  • Topic 6