Структура за темами
Загальна інформація про курс
Телеграм чат тут
Савіцький Роман
Telegram @RomanSavitskyi
gitlab @Savitskyi
github roman-savitskyi
bitbucket Roman.Savitskyi@infopulse.comОцінка за цей курс є вашим номером завдання.
Кожен варіант буде мати власну тематику розробки. Свою тематику ви зможете знайти у списку нижче.
Будь ласка, створіть репозитарій один на групу (варіант) у вашому університецькому гітлабі. Кожне завдання ви будете здавати, як пул ріквест (мердж ріквест) до цього репозитарію. Саме посилання на пул ріквест (ПР), ви будете додавати на портал. Зверніть увагу, для кожного завдання повинна міститись історія комітів. ПР без логічних комітів будуть йти на захист або зниження оцінки (-2 бали)Штрафи:
- Несвоєчасна здача лаби (1 місяць від дня практики) -1 бал
- Несвоєчасна здача лаби (після екзамену) -2 бали
- Відсутні коміти, невірна робота з гіт -2 бали
- Плагіат роботи -10 балів роботі + 0 саме за цю лабу, -5 автору роботи
- Командні лаби будуть оцінюватись однією оцінкою для всієї команди
- Онлайн каталог товарів з можливістю фільтрації, типу Розетка [Гіт]
- Додаток для вірного підбору амуніції для бійця зі списками необхідних речей та рекомендацій [Гіт]
- Гра "Судоку" [Гіт]
- Симулятор риболовлі зі статистичними даними, режимом карʼєри і тд [Гіт]
- Система відстеження [Гіт]
- Додаток для планування та відстеження тренувань військових одиниць. [Гіт]
- Додаток для розвитку навичок логічного мислення та креативності. [Гіт]
- Система замовлення ліків з доставкою додому. [Гіт]
- Інтерактивна карта спадщини ЮНЕСКО в Україні з детальною інформацією про об'єкти. [Гіт]
- Платформа для організації хакатонів та технічних конкурсів. [Гіт]
- Додаток для навчання та розвитку навичок з метою самовдосконалення. [Гіт]
- Платформа для обміну навчальними матеріалами та ресурсами. [Гіт]
- Щоденник подяки та позитивних моментів для поліпшення настрою. [Гіт][Гіт]
- Додаток для навчання тактичних стратегій та військової термінології. [Гіт]
- Додаток для подорожі на велосипедах [Гіт]
- Платформа для волонтерів та організацій, що шукають допомогу. [Гіт]
- Гра "Memory" з карточками. [Гіт]
- Веб-сервіс для навчання молоді навичкам фінансової грамотності. [Гіт]
- Сайт з агрегованою інформацією про події, конференції та зустрічі розробників. [Гіт]
- Освітній додаток для дітей про об'єкти світової спадщини та їх значення. [Гіт]
- Веб-ресурс для підвищення обізнаності та освіти щодо соціальних питань. [Гіт]
- Відкритий збірник корисних компонентів та бібліотек на React. [Гіт]
- Додаток для вивчення мов та традицій об'єктів спадщини з різних країн. [Гіт]
- Додаток для координації та розподілу гуманітарної допомоги. [Гіт]
- Додаток для вивчення першої медичної допомоги та невідкладних станів. [Гіт]
- Онлайн-платформа для спільної організації благодійних акцій. [Гіт]
- Додаток для відстеження ініціатив та проектів для покращення громади. [Гіт]
- Система розкладу з можливістю відстеження змін та оновлень. [Гіт]
- Військовий тренажер для навчання рішень у стресових ситуаціях. [Гіт]
- Система для генерації тем для React курсу наступного року [Гіт]
- єППО. Аналог додатку у вебі [Гіт]
- Система заявок на стипендії та фінансову допомогу. [Гіт]
- Система відстеження медичного стану війсчьковослужбовців. [Гіт]
- Додаток для створення та відстеження особистих цілей та досягнень. [Гіт]
- Система електронних медичних карт пацієнтів. [Гіт]
Можливість залишити відгук та покращити курс для наступних поколінь
Лекційний матеріал
Інформація про курс, лекційні, практичні завдання, оцінки та командну роботу. Правила розподілу та оцінювання можна знайти саме тут
Відео тутВідео тут
Посилання на лекцію тут
useEffect, useState, useMemo, useCallback, useContext
Відео тут
Відео лекції тут
Керовані, некеровані форми, react-hook-form, yup, zod, formik
Відео {тут}Розібрали реакт роутер, подивились по документації і особливостям, ознайомились з апп роутером.
Відео тут
Запис лекції тут
Відкрита лекція від Олексія Остапова
Посилання тутЛекція тут
Практичні завдання
Командна частина. Для команди необхідно розвернути проект на нексті, налаштувати ESLint, Pretier (за бажанням). Команда повинна обговорити і створити структуру проекту. В проектах, де є можливість використання декількох сторінок, створити для кожного студента окрему сторінку, де немає такої можливості, то окремі блоки. Назва сторінок по функціональності, а не по прізвищам студентів.
Інструкція, що може допомогти тутПерсональна частина.
Створити 3 компоненти, які будуть мати по 3+ проп, використовувати стейт та інші компоненти. Приклад. Компонент А використовує компонент Б, компонент Б використовує компонент С. Компонент повинен мати довільну верстку, але не мати зайвих перемальовувань. Компоненти повинні бути функціональні з хоча б мінімальною логікою.
Плануйте свої компоненти так, щоб далі ви могли їх розширювати та перевикористовувати командно. Тобто 3 * 5 = 15. Після цієї лаби у вас в проекті буде близько 15 компонентівОцінювання:
Командна:
- Створений проект з лінтером - 2 бали
- Логічно організована структура - 2 бали
Персональна:
- Існують компоненти, які містять state, props - 2 бали
- Виконані умови щодо перевикористання та перемальовування компонентів - 2 бал
Штрафи:
- Невірне використання гіт - 0 балів
- Невірне оформлення пул ріквестів - 0 балів
- Здача лабораторної роботи після 7 жовтня 2023 - -1 бал
- Здача лабораторної роботи після екзамену - -2 балиЯк здавати поточну лабораторну роботу.
Командна частина має бути в гілці мастер (мейн) з відповідними комітами, всі персональні частини, як ПР (МР) до мастеру.
Команда працює в девелопі з гітом і git flow.Кожен студент виконує завдання персонально.
Ваші попередньо створені компоненти (або нові) повинні включати логіку з використанням умовного рендерингу (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 бали
* Студент може працювати над всім попередньо створеним кодом в проекті, незалежно від автора.Персональна задача: Кожен студент повинен створити кастомний хук, який використати ДОРЕЧНО у одному із компонентів системи.
Додати отримання данних з "умовного" бекенду (json, localstorage, openApi) за допомогою useEffect або іншими засобами (nextjs, routing).
А також використати useRef для однієї з цілей на проекті.
Командна задача: провести ревью та надати рекомендації виконавцю, виконавець виправляє. Перевірка відбувається після схвалення від члена команди.
Оцінювання:Доречне використання кастомного хуку - 4 бали
Використання отримання даних - 2 бали
Використання useRef - 2 бали
Ревью - 2 бали.
Якщо ревью проведено якісно, 2 бали отримує ревьювер.
Якщо код якісний та ревью проведено, то 2 бали отримує ревьюєвер та автор.
Якщо код містить проблеми, але ревью неякісне, то 2 бали не отримує ніхто.Обовʼязково в коментарі вказуйте прізвище ревьювера
Штраф
Гіт - 2 бали
Несвоєчасна здача - 1 бал (4.11.23)
Несвоєчасна здача після екзаменту - 2балиРозробник повинен створити портал для нотифікацій користувача чи системних нотифікацій на проекті.
Або створити форму, яка містить 4+ полів та використовує реакт хук форм або формік та валідується за допомогою yup, zod.
Якщо в проекті немає форми чи порталу, то можна створити одну з форм нижче:
https://ua.meest.com/cargo-calculate-delivery-costhttps://calc.ukrposhta.ua/domestic-calculator (частина "В межах України")
Ці форми можуть бути, як частина іншого репозитарію.
Оцінювання
Створення форми або порталу 10 балів
Штраф
Гіт - 2 бали
Несвоєчасна здача - 1 бал (12.11.23)
Несвоєчасна здача після екзаменту - 2бали
Використання лише реакт форм - 4 балиТаск необхідно виконувати в спільному репозитарії, якщо не буде можливості для всіх в спільному репо, то частину з роутингом можна виконувати в окремому репо. Будь ласка, вказуйте це при здачі лабораторної роботи.
Завдання на CSS. Кожен член команди може виконати одне із наступних завдань
- Створити можливість зміни теми (світла, темна) на сторінці
- Можливість збільшувати, зменшувати розмір тексту (доступність)
- Змінювати контрастність на чорне, біле (АА доступність)
- Використати в компоненті CSS in JS
- Використати CSS модуль* Якщо в команді 6 людей, то може бути повторення завдання.
Завдання на роутинг. Кожен член команди може виконати одне із наступних завдань
- Зробити роутинг в проекті
- Зробити layout + outlet в проекті
- Зробити приватний роутинг в окремому репозитарії (роутинг на який будуть мати доступ окремі групи користувачів, як то авторизовані чи з платною підпискою). Завдання може бути виконано в окремому репозитарії. Земулювати роботу можна за допомогою https://dummyjson.com/docs/auth
Оцінка
- CSS 5 балів
- Роутинг 5 балів
Штрафи
- Гіт -2 бали
- Несвоєчасність (з 26.11.23) -1 бал
- Несвоєчасність після екзамену -2 балиСтворити та зберігати дані поза межами компоненту, якщо ці дані використовуються більше, чим в одному компоненті (провести рефакторінг вже наявного коду), організувати модульність даних(у випадку з рекойл атомарність). Обовʼязково додавати коментар при здачі, яку частину (модуль) було перенесено, промодифіковано.
Оцінка- Всі необхідні дані мігровані у модуль - 5 балів
- Відсутнє непотрібне підняття (bubbling) - 5 балів
- Коректно винесена бізнес логіка. Компоненти не мають логіки всередині - 5 балів.
* Третій пункт. Оцінка від зворотнього.
Штрафи:
- невірна робота з гіт 2 бали
- несвоєчасніть (9.12.23) - 1 бал
- після екзамену - 2 балиСпільне проведення демо презентації по своєму продукту.
Демо повинно містити невеличку презентацію з метою, порівнянням аналогів, технічною реалізацією (4-5 слайдів) та демонстрацією самої програми.Оцінка спільна для всієї групи
Презентація 5 балів
Демонстрація роботи 10 балів
Доповідь 5 балів10 запитань, 20 хвилин, 25 балів
Додаткові завдання
Додаткова практична робота, яка була виконана 5.10.23 під час практичної сесії
Додаткове завдання, де можна пройти один з Codility або Codewars рішень.
https://app.codility.com/c/run/trainingYQJVSA-GF4/
https://www.greatfrontend.com/prepare
https://bigfrontend.dev/reacthttps://www.freecodecamp.org/ukrainian/learn/front-end-development-libraries/#react-and-redux
Завдання вкінці (Проєкти «Бібліотеки Front End»)Вирішення двох простих задач або однієї середньої
Додаткові 5 балів
Надавати посилання на рішення або скрінСтудент має змогу пройти співбесіду з 5 запитаннями по всьому курсу.
Список запитань попередньо не буде розшарений, але буде фіксований.
Студент може запропонувати від 5 до 10 балів для співбесіди.
Якщо студент відповідає вірно на 0-2 запитання, студент втрачає ці бали.
Якщо студент відповідає вірно на 3 запитання, студент зберігає бали.
Якщо студент відповідає вірно на 4-5 запитань, студент подвоює бали (+5-10 балів)
Для того, щоб запросити співбесіду, необхідно просто додати виконання завдання з текстом "Співбесіда на N балів"Якщо ви працює з реакт і знаєте дисципліну, ви можете здати курс з пет проектом чи проектом, який під НДА.
Якщо це пет-проект, додайте посилання на проект і ми проведемо невелику співбесіду по курсу.
Якщо це проект під NDA, тоді просто додавайте в рішення запис "Проект під NDA. Хочу співбесіду"
Проект повинен включати 85% всієї основної частини матеріалу
Оцінка 0-100 балів.
Оцінка НЕ поєднується з іншими оцінками
Корисна інформація та додаткові ресурси
Чудовий ресурс по вивченню гіта. Допоможе інтерактивно розібратись зі всіма основами.
Все про процес лінтингу в проекті, як розвернути, використовувати, конфігурувати
Інструкція від Віталія Рубана щодо розгортування проекту на нексті
Пречудовий курс по реакту від Віталія. Версія 2.0 включає велику частину практичного використання реакт
Посилання на велику кількість гарних кастомних хуків
Велика кількість актуальних посилань на реакт ресурси
Запитання для підготовки до інтервью
Секція 6