ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6878| Title: | Онлайн-платформа для навчання командній роботі та програмуванню з використанням React |
| Authors: | Ланських , Євген Володимирович Панченко, Іван Сергійович |
| Keywords: | платформа;тестування;команда;сервер;клієнт;база даних;розробка |
| Issue Date: | 5-Jun-2025 |
| Abstract: | Кваліфікаційна робота присвячена розробці онлайн-платформи для навчання командній роботі та програмуванню з використанням React. Робота є актуальною, оскільки все більше початківців у різних галузях стикаються з труднощами в пошуках першої роботи через брак досвіду роботи в команді. Метою роботи є створення середовища, де молоді фахівці змогли б допомогти один одному розвиватися у своїй галузі. Об’єкт дослідження – сучасні методи розробки якісних оптимізованих вебдодатків. Предмет дослідження – використання цих методів на практиці. Було використано основні методи: аналіз галузі, проєктування, практична розробка. Практична значущість отриманих результатів – наявність програмного продукту, що може бути використаним у різних галузях. У першому розділі проведено аналіз аналогів та враховано отриману інформацію для проєктування власного продукту. У другому розділі обґрунтовується архітектура розроблюваної платформи, вибір технологій для розробки та дизайнерських рішень. Третій розділ присвячено створенню продукту, його тестуванню та порівнянню з аналогами. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6878 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Панченко_WEB-2111.pdf Restricted Access | 1.92 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Онлайн-платформа для навчання командній роботі та
програмуванню з використанням React»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи Web-2111
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Панченко Іван Сергійович
Керівник: кандидат технічних наук, доцент
Ланських Євген Володимирович
Рецензент: директор ТОВ «АНДЕРСЕНЛАБ»,
Алесін Олег Вікторович
Черкаси – 2025 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем ________________
(повна назва)
Кафедра_інформаційних технологій проєктування ______________________
(повна назва)
Освітньо-кваліфікаційний рівень_бакалавр _________________________
(назва)
Спеціальність _126 Інформаційні системи та технології _________________
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
___________ Тетяна ПРОКОПЕНКО
«_____» ______________20___ року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
_________________Панченка Івана Сергійовича ________________________
(прізвище, ім’я, по батькові)
1. Тема роботи _Онлайн-платформа для навчання командній роботі та
програмуванню з використанням React ______________________________
Керівник роботи _Ланських Євген Володимирович, кандидат технічних наук,
доцент __________________________________________________________
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету
від
«___» ___________ 20__ року № ________
2. Строк подання здобувачем роботи _ ______________________________
3. Вихідні дані до роботи _ Публікації, книги та монографії з теорії розробки
веб-орієнтованих інформаційних систем. Express.js, React, MongoDB.
Офіційні дані авторизованих сайтів.___________________________________
4. Зміст розрахунково-пояснювальної записки (перелік питань, які
потрібно розробити)
_Постановка задачі; існуючі аналоги; вимоги до користувацького інтерфейсу;
вимоги до архітектури; вимоги до функціональності; обґрунтування вибору
засобів реалізації системи; реалізація системи; тестування системи;
порівняння з аналогами. _____________________________________
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових
креслень, плакатів)
_ 1) Блок-схема функції реєстрації користувача; 2) Схема роботи функції
створення команди; 3) Схема роботи функції створення завдання.__________
6. Консультанти розділів роботи
Розділ Прізвище, ініціали
та посада Підпис, дата
консультанта
7. Дата видачі завдання __________________________________________
КАЛЕНДАРНИЙ ПЛАН
№ Назва етапів Строк виконання Примітка
з/п кваліфікаційної роботи етапів роботи
1 Вибір теми роботи 18.02.2025 Виконано
2 Підбір матеріалів 21.02.2025 Виконано
3 Вибір технологій 01.03.2025 Виконано
4 Проєктування системи 10.03.2025 Виконано
5 Розробка системи 02.05.2025 Виконано
6 Тестування системи 04.05.2025 Виконано
7 Оформлення пояснювальної записки 19.05.2025 Виконано
Здобувач вищої освіти __________________ _________________________
(підпис) (прізвище та ініціали)
Керівник роботи ______________________ _____________________
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з 3
розділів, викладена на 52 сторінках, містить 14 рисунків, 25 джерел
використаної літератури, 2 додатки.
Кваліфікаційна робота присвячена розробці онлайн-платформи для
навчання командній роботі та програмуванню з використанням React.
Робота є актуальною, оскільки все більше початківців у різних галузях
стикаються з труднощами в пошуках першої роботи через брак досвіду
роботи в команді.
Метою роботи є створення середовища, де молоді фахівці змогли б
допомогти один одному розвиватися у своїй галузі. Об’єкт дослідження –
сучасні методи розробки якісних оптимізованих вебдодатків. Предмет
дослідження – використання цих методів на практиці.
Було використано основні методи: аналіз галузі, проєктування,
практична розробка.
Практична значущість отриманих результатів – наявність програмного
продукту, що може бути використаним у різних галузях.
У першому розділі проведено аналіз аналогів та враховано отриману
інформацію для проєктування власного продукту.
У другому розділі обґрунтовується архітектура розроблюваної
платформи, вибір технологій для розробки та дизайнерських рішень.
Третій розділ присвячено створенню продукту, його тестуванню та
порівнянню з аналогами.
Ключові слова: команда, платформа, сервер, клієнт, база даних,
тестування, розробка.
SUMMARY
The structure and volume of the work. The thesis consists of 3 chapters, set
out on 52 pages, contains 14 figures, 0 tables, 25 references, 2 appendices.
The master's thesis is dedicated to the development of an online platform for
learning teamwork and programming using React.
The work is relevant because more and more beginners in various fields face
difficulties in finding their first job due to a lack of experience in teamwork.
The aim of the study is to create an environment where young specialists
could help each other grow in their respective fields. Object – modern methods of
developing high-quality optimized web applications. Subject – the practical
application of these methods.
It was used the basic methods: industry analysis, design, and practical
development.
The practical value of the results is the availability of a software product that
can be used in various fields.
In the first chapter, an analysis of analogues was conducted and the obtained
information was taken into account for the design of the product.
In the second chapter it is substantiated the architecture of the developed
platform, the choice of development technologies and design solutions.
The third chapter is devoted to the product development, its testing, and
comparison with analogues.
Keywords: team, platform, server, client, database, testing, development.
ЗМІСТ
ВСТУП ......................................................................................................................................................... 7
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ ТА ОГЛЯД АНАЛОГІВ ............................................................... 9
1.1 Постановка задачі ........................................................................................................................ 9
1.2 Існуючі аналоги ......................................................................................................................... 10
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ............................................................... 19
2.1 Вимоги до користувацького інтерфейсу ................................................................................. 19
2.2 Вимоги до архітектури ............................................................................................................. 20
2.3 Вимоги до функціональності ................................................................................................... 24
РОЗДІЛ 3. РОЗРОБКА СИСТЕМИ ......................................................................................................... 26
3.1 Обґрунтування вибору засобів реалізації системи ................................................................. 26
3.2 Реалізація системи ..................................................................................................................... 27
3.3 Тестування системи .................................................................................................................. 37
3.4 Порівняння з аналогами............................................................................................................ 43
ВИСНОВКИ ............................................................................................................................................... 46
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................................................. 48
ДОДАТОК А .............................................................................................................................................. 50
ДОДАТОК Б .............................................................................................................................................. 55
ВСТУП
У сучасному суспільстві дедалі більшого значення набуває співпраця
між фахівцями з різних галузей. Розвиток цифрових технологій, стартап-
культури, проєктного мислення та міждисциплінарного підходу у вирішенні
завдань вимагає нових інструментів для об'єднання зусиль спеціалістів.
Попри активну цифровізацію більшості сфер, все ще бракує ефективних web-
рішень, які були б спеціально орієнтовані не лише на пошук роботи чи
замовлень, а саме на створення команд однодумців для реалізації ідей. У
багатьох випадках для налагодження професійних зв’язків люди змушені
покладатися на соціальні мережі, рекомендації знайомих або непрофільні
платформи. Це ускладнює формування ефективних команд, уповільнює
запуск спільних проєктів і знижує потенціал розвитку.
На сьогоднішній день існують певні рішення, що частково виконують
подібні функції, наприклад, LinkedIn, Upwork чи тематичні форуми. Проте ці
платформи переважно мають інший фокус: вони орієнтовані на пошук
роботи, замовлень або побудову професійного іміджу. Системи для зручного
та швидкого підбору фахівців з метою створення команд, з урахуванням
конкретних цілей, компетенцій та сумісності, наразі залишаються нішевими
або малодоступними. Саме тому розробка web-додатку, в якому спеціалісти з
різних сфер могли б знаходити одне одного для спільної роботи над
проєктами, є актуальною й суспільно значущою задачею. Така система
дозволить значно спростити процес пошуку відповідних партнерів,
активізувати міжгалузеву взаємодію та сприятиме реалізації інноваційних
ідей.
Робота має на меті створити інформаційну систему у вигляді web-
додатку, яка забезпечить можливість пошуку, відбору та комунікації між
фахівцями для спільної командної роботи. Результатом має стати
функціональний, зручний та масштабований ресурс, що дозволяє
користувачам формувати профілі, знаходити інших спеціалістів за
ключовими параметрами, створювати команди та взаємодіяти у межах
певних проєктів. Основний інструментарій розробки включає використання
React на клієнті та Express.js на сервері. Для реалізації клієнтської частини
обрано сучасні технології фронтенд-розробки, а для серверної частини —
засоби, які забезпечують надійне збереження та обробку даних користувачів,
команд і завдань.
У процесі розробки необхідно розв’язати низку задач. Спершу слід
провести аналіз існуючих платформ, які частково вирішують подібні
проблеми, і визначити їхні обмеження. Далі потрібно розробити структуру
бази даних, яка дозволятиме зберігати інформацію про користувачів, їхні
компетенції, команди та статуси участі в проєктах. Важливим етапом є
проєктування архітектури системи, яка забезпечить стабільну роботу, зручне
масштабування й інтеграцію нових модулів у майбутньому. Також слід
реалізувати інтерфейс користувача, що буде інтуїтивно зрозумілим та
доступним для людей із різним технічним досвідом. На завершальному етапі
система має бути протестована на відповідність функціональним вимогам та
готовності до практичного застосування.
Об’єктом дослідження виступає процес розробки web-орієнтованих
інформаційних систем, призначених для забезпечення професійної взаємодії.
У межах цього об’єкта предметом дослідження є структура,
функціональність та користувацький інтерфейс вебдодатку, призначеного
для пошуку фахівців і створення команд. Для реалізації поставлених задач
застосовуються методи системного аналізу, методи моделювання бізнес-
логіки, технології веброзробки, а також тестування готових компонентів
програмного забезпечення. Основою методології є поєднання аналітичного
підходу з практичними засобами frontend- і backend-програмування.
Практичне значення розробки полягає у створенні корисного web-
додатку, який може бути впроваджений у навчальних закладах, молодіжних
хабах, ІТ-кластерах або бізнес-інкубаторах. Його впровадження дозволить
учасникам проєктів швидко знаходити відповідних фахівців, формувати
ефективні команди та досягати спільних результатів. Така система може
стати каталізатором для розвитку нових ініціатив і реалізації креативних
проєктів. У майбутньому додаток може бути масштабований для потреб
ширшої аудиторії та інтегрований з іншими сервісами для підвищення його
функціональності та зручності використання.
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ ТА ОГЛЯД АНАЛОГІВ
1.1 Постановка задачі
У контексті сучасного розвитку цифрових технологій та високої
конкуренції на ринку праці все більшої актуальності набуває проблема
здобуття реального практичного досвіду для початківців у різних професіях.
Попри наявність численних ресурсів для пошуку роботи, таких як LinkedIn,
Djinni, Upwork або Indeed, ці платформи орієнтовані переважно на вже
сформованих спеціалістів, які мають певний досвід, успішно реалізовані
проєкти та рекомендації. Водночас молоді фахівці, які лише завершили
навчання або перебувають на етапі професійної перекваліфікації, стикаються
зі значними труднощами при спробі знайти роботу або долучитися до
командної діяльності. Причина полягає не лише у відсутності досвіду як
такого, а й у відсутності можливості проявити себе в умовах реальної
командної взаємодії, що є надзвичайно важливим у будь-якій професійній
сфері.
Саме з урахуванням цієї проблеми було поставлено за мету створення
web-платформи, яка б дозволяла не просто знаходити фахівців за критеріями
компетентностей, а створювати команди для спільної роботи над ідеями та
проєктами. Такий підхід відкриває нові можливості для людей, які ще не
мають комерційного досвіду, але прагнуть його здобути. Замість складного
процесу працевлаштування через класичні рекрутингові сайти, користувачі
такої системи можуть почати із залучення до невеликих проєктів, працюючи
разом із іншими фахівцями, які перебувають на схожому рівні розвитку.
Вони мають змогу поступово зростати у професійному середовищі,
отримувати зворотний зв’язок, напрацьовувати комунікативні та
організаційні навички, і зрештою — формувати власне портфоліо.
Запропонована платформа також має освітню складову, оскільки вона
сприяє неформальному навчанню у процесі реальної діяльності. Користувачі
навчаються через практику, що набагато ефективніше у довгостроковій
перспективі. Вони можуть взяти на себе певну роль у команді, зіткнутись з
реальними завданнями, адаптуватися до командних процесів,
використовувати інструменти командної розробки, системи керування
проєктами, системи контролю версій та інші засоби сучасного виробничого
середовища. Таким чином формується цілісне уявлення про специфіку
командної роботи, яка часто є вирішальним критерієм для подальшого
працевлаштування або запуску власного бізнесу.
Окремо слід зазначити, що платформа може стати стартовим
майданчиком для створення стартапів. Команди, які сформувалися в межах
окремого навчального чи експериментального проєкту, можуть виявити, що
спільна робота була ефективною, а ідея має потенціал. Це створює
передумови для перетворення тимчасової ініціативи на повноцінний бізнес.
У багатьох випадках саме такі платформи слугують поштовхом до розвитку
технологічного підприємництва. За умов правильної організації процесів,
прозорого механізму оцінки участі кожного учасника та зручного
функціоналу платформа може стати ефективним інструментом як для
індивідуального розвитку користувачів, так і для заохочення
підприємництва.
Таким чином, ідея створення платформи для формування команд і
спільної роботи над проєктами має не лише технічну й соціальну доцільність,
а й глибоке освітнє та економічне підґрунтя. Вона дозволяє закрити одну з
найболючіших проблем молодих спеціалістів — відсутність досвіду —
шляхом створення практичного середовища, де досвід можна здобути, не
чекаючи першого роботодавця. У перспективі така система може мати
позитивний вплив на якість підготовки кадрів, їхню конкурентоспроможність
та інноваційну активність.
1.2 Існуючі аналоги
У процесі проєктування та розробки будь-якої інформаційної системи
важливим етапом є аналіз існуючих аналогів. Це дозволяє не лише оцінити
сучасний стан ринку схожих рішень, а й виявити їхні переваги та недоліки,
що, у свою чергу, дає змогу врахувати ці аспекти під час створення власного
програмного продукту. У контексті цієї кваліфікаційної роботи особливу
увагу було приділено платформам, які орієнтовані на об’єднання фахівців
для професійної співпраці, а також сервісам, що полегшують
командоутворення, комунікацію та управління спільними проєктами.
На сучасному етапі розвитку цифрового середовища користувачі мають
доступ до широкого спектра інструментів, які частково або повністю
реалізують подібні функції. Серед найвідоміших — LinkedIn, Behance,
GitHub, Upwork, Fiverr та інші. Проте більшість із них зосереджена або на
пошуку роботи й рекрутингу, або на демонстрації результатів індивідуальної
діяльності. Водночас системи, які забезпечують можливість створення
команд, формування ролей у межах спільних проєктів, відпрацювання
взаємодії між учасниками та ведення повноцінного командного
менеджменту, залишаються менш поширеними й зазвичай орієнтованими на
комерційний сектор або внутрішнє корпоративне використання. Далі буде
оглянуто декілька найближчих за функціоналом платформ.
JetBrains Academy — це сучасна освітня платформа, розроблена
компанією JetBrains, яка надає можливість інтерактивного навчання
програмуванню з орієнтацією на практичні навички та реальні кейси. На
відміну від традиційних курсів, де засвоєння матеріалу відбувається в
основному шляхом перегляду відеолекцій, JetBrains Academy використовує
принцип навчання через створення повноцінних проєктів. Платформа надає
велику кількість завдань, які користувач поступово виконує, інтегруючи
теоретичні знання у практику, що значно підвищує якість засвоєння
матеріалу.
Рис. 1.1 – Головна сторінка Jetbrains Academy
Одна з особливостей JetBrains Academy полягає в тісній інтеграції з
GitHub, що дозволяє зберігати хід виконання проєктів, фіксувати прогрес та
організовувати командну роботу над завданнями. Такий підхід створює
умови, максимально наближені до реального програмного середовища, де
важливу роль відіграють системи контролю версій і співпраця між
учасниками. Користувачі мають можливість приєднуватися до команд і
працювати над реальними прикладними задачами у групах, що формує в них
навички командоутворення, спільного планування, обміну ідеями та
відповідальності за результат.
JetBrains Academy також охоплює різні рівні підготовки: від новачків
до досвідчених фахівців. Для тих, хто лише починає знайомство зі світом ІТ,
платформа пропонує профорієнтаційний тест, який допомагає обрати
напрямок навчання відповідно до інтересів і здібностей. У свою чергу,
досвідчені користувачі можуть обрати курси зі складнішими завданнями,
орієнтованими на поглиблення знань з певної мови програмування або
технології. Додатково, JetBrains Academy надає можливість створення
власних курсів, що є корисною опцією для викладачів або організацій, які
прагнуть адаптувати навчальний процес під власні потреби або підготувати
фахівців для вирішення конкретних задач [1].
Загалом, JetBrains Academy — це гнучкий і потужний інструмент для
набуття та вдосконалення професійних ІТ-навичок, який поєднує
індивідуальне навчання з можливостями командної взаємодії, створюючи
таким чином ефективне освітнє середовище для широкого кола користувачів.
Codecademy Teams — це спеціалізована версія освітньої платформи
Codecademy, орієнтована на командне навчання та професійний розвиток
груп фахівців у галузі програмування та суміжних ІТ-напрямків. Основна
ідея полягає у створенні умов для спільного засвоєння матеріалу, що
поєднується з практичним застосуванням отриманих знань у форматі
командної роботи над проєктами. Цей підхід дозволяє учасникам не лише
опанувати технічні навички, а й набути досвіду ефективної взаємодії в межах
розробницької команди.
Рис. 1.2 – Головна сторінка Codecademy
Codecademy Teams створена для того, щоб сприяти навчальному
процесу, який максимально наближений до умов справжньої розробки
програмного забезпечення. Курси, доступні на платформі, охоплюють
вивчення ключових інструментів командної розробки, зокрема системи
контролю версій Git, принципів гнучкого управління проєктами (Agile), а
також концепцій DevOps [2]. Окрім теоретичного матеріалу, користувачі
мають змогу одразу застосовувати знання на практиці під час роботи над
колективними проєктами, що імітують реальні виробничі кейси.
Завдяки можливості створення команд на платформі, учасники
отримують доступ до спільного прогресу, взаємної підтримки та обміну
знаннями. Це дозволяє побудувати ефективну модель взаємонавчання, коли
сильніші учасники допомагають іншим, а спільна відповідальність за
виконання завдань сприяє формуванню дисципліни й командного духу.
Навчальні проєкти, запропоновані Codecademy Teams, часто передбачають не
лише технічну реалізацію, а й елементи планування, презентації результатів і
командного рефлексування, що ще більше наближує досвід до реального
середовища ІТ-компаній.
Таким чином, Codecademy Teams не лише забезпечує якісне технічне
навчання, а й формує ключові м’які навички, необхідні для успішної
професійної діяльності в сучасному ІТ-середовищі. Платформа може
використовуватись як для навчання працівників компаній, так і для
підготовки студентів та початківців, які прагнуть працювати в команді.
Scrimba — це інтерактивна онлайн-платформа для вивчення веб-
розробки, яка вирізняється інноваційним підходом до подачі навчального
матеріалу. Основною особливістю платформи є унікальний формат “scrim”
— інтерактивні відео, в яких користувачі можуть не тільки переглядати, а й
безпосередньо редагувати код у процесі перегляду. Це дозволяє поєднувати
переваги відеонавчання з активною практикою, що значно підвищує
ефективність засвоєння матеріалу.
Scrimba орієнтована переважно на фронтенд-розробку, охоплюючи
ключові технології, зокрема HTML, CSS, JavaScript, а також фреймворки, як-
от React. Курси побудовані так, щоб користувачі не лише вивчали синтаксис і
принципи роботи з мовами програмування, а й формували реальні прикладні
навички, які необхідні в роботі сучасного веброзробника. Крім цього,
Scrimba активно впроваджує елементи командної взаємодії: студенти можуть
обговорювати рішення, ділитися кодом, працювати спільно над вправами та
взаємно перевіряти результати.
Рис. 1.3 – Сторінка команд Scrimba
Платформа створює умови для навчання, які за структурою й
динамікою максимально наближені до командної роботи в реальних умовах.
Участь у групових проєктах та можливість колаборації над завданнями
дозволяє не лише закріплювати технічні знання, а й розвивати комунікативні
та організаційні навички, що є критично важливими для роботи в ІТ-
командах. Такий підхід особливо цінний для початківців, які прагнуть
здобути досвід взаємодії з іншими розробниками ще до першого офіційного
працевлаштування.
Таким чином, Scrimba — це не просто онлайн-школа, а повноцінне
навчальне середовище, в якому інтерактивність, командна робота та реальні
кейси поєднуються у зручному та доступному форматі. Платформа підходить
як для самостійного навчання, так і для організованих навчальних груп, що
прагнуть розвивати практичні навички фронтенд-розробки [3].
The Odin Project — це безкоштовна онлайн-платформа для вивчення
веброзробки, яка зосереджена на практичному підході та формуванні
реальних навичок через командну роботу й активну участь у спільноті. Вона
розроблена як повноцінна навчальна програма для тих, хто прагне опанувати
фронтенд та бекенд-розробку.
Рис. 1.4 – Головна сторінка The Odin Project
Курс побудовано так, що студенти поступово опановують нові теми,
виконуючи численні практичні завдання. Важливою перевагою The Odin
Project є активне використання Git та GitHub — усі студенти працюють із
репозиторіями, вчаться користуватись системою контролю версій,
створювати pull request-и, брати участь у code review. Це створює атмосферу,
максимально наближену до реальних умов роботи над програмним
забезпеченням у команді.
Платформа заохочує співпрацю між студентами, зокрема під час
роботи над спільними open-source проєктами. Участь у таких проєктах дає
змогу відчути динаміку командного середовища, зрозуміти, як
організовується робота в реальних командах розробників, і отримати
практичний досвід взаємодії з іншими учасниками. Це не лише розвиває
технічні навички, а й сприяє розвитку м’яких навичок — комунікації,
відповідальності, вміння працювати над спільними цілями.
The Odin Project також підтримує ідею самостійного навчання:
матеріали відкриті, структуровані логічно та доступні для проходження у
власному темпі. Разом із цим, через форуми, Discord-сервери та менторську
підтримку платформа створює умови для взаємодії, обміну досвідом і
взаємної підтримки, що особливо важливо для початківців, які не мають
попереднього досвіду командної роботи [4].
Отже, The Odin Project є прикладом якісної освітньої ініціативи, що
поєднує безкоштовність, відкритість, гнучкість навчального процесу та
орієнтацію на командну взаємодію. Це робить платформу особливо
корисною для тих, хто хоче не лише навчитися програмувати, а й відчути
себе частиною розробницької спільноти.
Frontend Mentor — це сучасна платформа для вивчення веброзробки,
яка орієнтована на практичне навчання через роботу з реалістичними
макетами сайтів. Основна ідея полягає в тому, щоб користувачі розвивали
свої навички фронтенд-програмування, виконуючи завдання, максимально
наближені до реальних замовлень у галузі. Платформа надає широкий спектр
макетів у Figma, які варіюються за рівнем складності — від простих
односторінкових сайтів до складних інтерфейсів, що дає змогу поступово
нарощувати навантаження та вдосконалювати технічні навички.
Однією з ключових переваг Frontend Mentor є підтримка командної
взаємодії. Користувачі можуть долучатися до спільноти через офіційний
Discord-сервер, де активно обговорюють проєкти, обмінюються порадами та
шукають учасників для спільної роботи. Така форма взаємодії дозволяє
навчатися не лише індивідуально, а й у колаборативному середовищі, що
наближене до умов реального робочого процесу. Крім того, завдяки функції
публічного оцінювання, учасники мають змогу коментувати роботи інших і
отримувати конструктивний фідбек щодо власних рішень, що стимулює
критичне мислення й розвиток аналітичних навичок [5].
Рис. 1.5 – Головна сторінка Frontend Mentor
Платформа пропонує підтримку таких технологій, як HTML, CSS,
JavaScript та React. Окрім навчальних завдань, Frontend Mentor також має
розділ із вакансіями, що дозволяє знайти роботу або виконавців для проєктів
безпосередньо з інтерфейсу платформи. Таким чином, сервіс не лише
розвиває навички, а й створює міст між навчанням і професійною діяльністю.
Особливо це важливо для початківців, які прагнуть увійти в ІТ-сферу, маючи
портфоліо з практичними роботами, що вже пройшли зовнішню оцінку.
Для користувачів, які бажають ще глибше зануритися в процес, існує
Pro-версія з доступом до більш складних, реалістичних кейсів, які імітують
роботу над реальними замовленнями. Також на платформі публікуються
статті, навчальні курси та практичні поради, що сприяють поглибленню
знань і загальному професійному розвитку.
Frontend Mentor є яскравим прикладом платформи, яка поєднує в собі
як інструмент для індивідуального навчання, так і простір для командної
роботи та професійного зростання. Вона ефективно заповнює нішу між
академічною теорією та практичним досвідом, необхідним для роботи в
сучасній індустрії.
Тепер підведемо підсумки дослідження аналогів. JetBrains Academy
пропонує навчання через розробку повноцінних застосунків, підтримує
інтеграцію з GitHub, роботу в групах та створення власних курсів. Проте
платформа все ж таки має освітній фокус — метою є навчити користувача
певним технологіям і концепціям, а не надати інфраструктуру для
командного розвитку поза межами курсових проєктів. До того ж, командна
взаємодія обмежується рамками навчального контенту й не передбачає
створення окремих командних середовищ зі збереженням даних, історією
змін і розподілом ролей.
Codecademy Teams орієнтований на командне навчання з фокусом на
Git, DevOps та Agile. Він дозволяє організувати процес колективного
опанування технологій, що актуально для корпоративного навчання або
освітніх закладів. Проте, як і у випадку JetBrains Academy, проєктна
діяльність реалізована як частина навчального процесу, без повноцінної
підтримки менеджменту команд, обліку учасників, автономного створення
задач та контролю виконання.
Scrimba та The Odin Project мають схожу специфіку. Вони надають
доступ до навчального контенту з веброзробки та заохочують спільну роботу,
однак здебільшого в межах неформальної взаємодії — через спільне
редагування коду, обговорення на Discord або через open-source репозиторії.
Наприклад, The Odin Project пропонує роботу з GitHub у межах завдань і
проєктів, однак не має внутрішнього механізму для постійного формування
команд, не підтримує функціональності типу призначення завдань,
оновлення профілів, приєднання до команди тощо. Scrimba, хоч і
використовує інтерактивну форму навчання, також не має вбудованої
інфраструктури для менеджменту команд.
Frontend Mentor є найближчим за духом до розробленої платформи,
оскільки дозволяє публікувати власні рішення задач, отримувати фідбек та
взаємодіяти з іншими користувачами. Крім того, він має можливість
переглядати реалізації інших, що є формою колективного вдосконалення.
Проте й тут відсутня система менеджменту команд, не реалізовано створення
персоналізованих завдань, немає гнучкого управління учасниками чи
підтримки ролей в команді. Платформа спрямована більше на покращення
особистих навичок дизайну та верстки.
Аналіз наявних платформ дозволяє зробити висновок, що на ринку
відчувається нестача спеціалізованого ресурсу, який би поєднував
можливості пошуку за професійними інтересами, ініціювання проєктів,
запрошення учасників до команд, а також підтримував середовище для їхньої
спільної роботи. До того ж більшість платформ або орієнтовані, в першу
чергу, на інший функціонал, як от розробка програмного забезпечення чи
начальних матеріалів, або прив’язані до конкретної галузі. Розроблювана в
рамках цієї кваліфікаційної роботи платформа має на меті взяти найкращі
риси від описаних раніше платформ, але зосередитись на впровадженні
функціоналу для командної роботи та стати гарним рішенням для фахівців
будь-якої галузі.
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1 Вимоги до користувацького інтерфейсу
Розробка будь-якої інформаційної системи потребує чіткого
формулювання вимог і очікувань щодо її функціональності, архітектури та
інтерфейсу. Технічне завдання є ключовим документом, що визначає межі
проєкту, описує основні технічні параметри, вимоги до програмного
забезпечення, а також порядок реалізації та тестування системи. Воно є
основою для оцінки ефективності та відповідності кінцевого продукту
початковим очікуванням. Для початку розглянемо вимоги до проєктування
інтерфейсу користувача.
У сучасному вебдизайні важливо дотримуватися не лише естетичних
принципів, але й функціональних вимог, що забезпечують зручність
користування та емоційний комфорт. Саме тому обрана візуальна концепція
для розроблюваного вебдодатку базується на поєднанні мінімалізму,
сучасного стилю та зрозумілості інтерфейсу. Такий підхід відповідає
очікуванням більшості користувачів, особливо фахівців із технічних галузей,
які цінують чіткість, логічність структури та відсутність зайвих візуальних
елементів.
Основною кольоровою гамою сайту є класичне поєднання чорного та
білого, яке виконує не лише естетичну функцію, а й створює враження
професійності та стабільності. Білий фон у поєднанні з чорною шапкою та
підвалом дозволяє чітко структурувати простір, акцентуючи увагу
користувача на головному вмісті сторінки. Такий дизайн забезпечує хорошу
контрастність, сприяє зручному читанню тексту та полегшує сприйняття
візуальної інформації. Чорно-біле оформлення також позитивно впливає на
загальну навігацію, дозволяючи користувачам інтуїтивно орієнтуватися в
інтерфейсі незалежно від рівня їхньої підготовки.
Для функціональних елементів, пов’язаних із діями над об’єктами,
використовуються кольорові акценти. Зокрема, зелений колір обрано для
кнопок створення, що відповідає загальноприйнятим асоціаціям із
позитивними діями та початком нового процесу. Жовтий колір
застосовується для кнопок редагування чи оновлення, оскільки він привертає
увагу та позначає зміну поточного стану. Червоний колір використовується
для позначення дій видалення — це усталена практика у сфері інтерфейсного
дизайну, що забезпечує миттєве розуміння ризикованості або незворотності
дії. Таке кольорове кодування не лише підвищує зручність користування, а й
сприяє запобіганню помилкових дій, покладаючись на візуальну інтуїцію
користувача.
Логотип сайту виконаний у вигляді білих писаних літер на чорному
фоні, що підкреслює індивідуальність бренду й водночас гармонійно
вписується в загальну кольорову палітру сайту. Використання рукописного
шрифту створює враження творчості й відкритості до співпраці, що є
особливо актуальним для платформи, орієнтованої на командну роботу та
розвиток фахівців.
Обґрунтування вибору такого дизайну також спирається на
рекомендації визнаних у галузі вебдизайну фахівців. Як зазначає Стів Круґ у
своїй книзі «Don't Make Me Think», інтерфейс має бути настільки зрозумілим,
щоб користувачеві не доводилося замислюватися над тим, як ним
користуватися. Впровадження логічного кольорового кодування та
мінімалістичного візуального стилю повністю відповідає цій концепції,
роблячи роботу з платформою інтуїтивно зрозумілою та приємною [6].
Таким чином, обраний дизайн базується на поєднанні естетики та
функціональності. Він не лише забезпечує привабливий зовнішній вигляд, а й
сприяє ефективній взаємодії користувача з платформою, що є ключовим
чинником у розробці інформаційних систем, орієнтованих на широку
аудиторію.
2.2 Вимоги до архітектури
Архітектура бази даних ґрунтується на логічному поділі сутностей, що
дозволяє ефективно зберігати та пов’язувати дані відповідно до реального
функціоналу платформи. Вона включає три основні колекції: користувачі,
команди та завдання. Така структура дозволяє легко реалізувати відношення
типу «багато до багатьох» — користувачі можуть бути учасниками кількох
команд, а кожна команда може містити багато користувачів. Завдання, у
свою чергу, можуть мати одного виконавця. Такий підхід відповідає
принципам нормалізованого проєктування баз даних, рекомендованих у
сучасній веброзробці [7].
Рис. 2.1 – Структура бази даних
Серверна частина застосунку буде побудована за принципами
розділення обов’язків і модульності. Моделі представляють структуру даних
відповідно до колекцій бази, контролери містять бізнес-логіку для обробки
запитів, а роутери відповідають за маршрутизацію HTTP-запитів. Це
дозволяє підтримувати гнучкість і масштабованість системи, а також
забезпечує зрозумілу структуру коду. Додаткові прошарки, утиліти та
конфігураційні файли винесені окремо, що відповідає принципам повторного
використання коду та спрощує супровід проєкту. Така архітектура відповідає
класичній моделі MVC (Model–View–Controller), адаптованій для REST-
серверів, яку рекомендує використовувати спільнота Node.js [8].
Рис. 2.2 – Структура серверної частини
Рис. 2.3 – Структура серверної частини (продовження)
Фронтенд будемо реалізовувати з урахуванням сучасних підходів до
розділення логіки, стану й візуального представлення. Архітектура включає
окремі модулі для запитів до сервера (API-клієнт), управління глобальним
станом через Redux (екшени та ред’юсери) та компонентів (контейнерні з
логікою та презентаційні з візуальним відображенням). Така структура
дозволяє досягти високого рівня повторного використання, тестованості й
підтримуваності коду, що особливо важливо для складних SPA-застосунків.
Цей підхід добре описаний у матеріалах спільноти React, зокрема в
рекомендаціях щодо організації архітектури з використанням Redux [9].
Рис. 2.4 – Структура клієнтської частини
Рис. 2.5 – Структура клієнтської частини (продовження)
2.3 Вимоги до функціональності
Функціональні вимоги до вебплатформи визначаються її головною
метою — забезпечити ефективний механізм командної взаємодії для
реалізації спільних проєктів. Тому обов’язковою є наявність механізмів
аутентифікації, управління командами та завданнями, а також персоналізації
профілів користувачів.
Початковими точками взаємодії є реєстрація та авторизація
користувача. Реєстрація дозволяє сформувати унікальний профіль, а
підтвердження електронної пошти є необхідним етапом для верифікації
особи та підвищення довіри до платформи. Це також важливий етап у
запобіганні створенню фейкових облікових записів. Згідно з рекомендаціями
OWASP (Open Web Application Security Project), підтвердження email є
стандартною безпековою практикою для захисту цілісності користувацьких
облікових записів [10].
Можливість створення команди є основним функціональним
елементом платформи. Користувач, який створює команду, стає її
ініціатором і адміністратором. Це дозволяє реалізувати структуровану
модель командної взаємодії, де кожна команда має власний простір для
завдань. Приєднання до команди відкриває можливості співпраці з іншими
користувачами, обміну досвідом та ефективної комунікації. Оновлення та
видалення команди надають адміністраторам контроль над її структурою,
зокрема зміну назви, опису або видалення в разі завершення проєкту.
Створення завдань — ключовий функціонал, що забезпечує розподіл
обов’язків між членами команди. Завдання можна створювати для
визначення цілей, строків та виконавців. Їх редагування дозволяє адаптувати
проєкт під змінні умови, а видалення — підтримувати порядок у межах
командного простору. Взяття завдання виконавцем фіксує відповідального за
виконання, що сприяє прозорості у процесі реалізації проєктів. За даними
GitLab, системи з можливістю індивідуального призначення завдань
підвищують ефективність командної роботи, забезпечуючи відповідальність
та контроль прогресу [11].
Редагування профілю є важливим для підтримання актуальної
інформації про користувача. Це дає змогу іншим учасникам команди бачити
роль, навички або посилання на портфоліо, що є важливим у виборі
учасників для співпраці. Видалення профілю необхідне як з міркувань
конфіденційності, так і в контексті дотримання прав користувачів на цифрове
забуття, що регламентовано, зокрема, європейським законодавством GDPR
[12].
Загалом, описані функціональні можливості відповідають сучасним
вимогам до платформ спільної розробки та навчанню в команді. Вони
забезпечують базові інструменти для організації процесу співпраці,
підтримання безпеки, керування обліковими даними та управління робочими
завданнями, що робить платформу придатною як для освітніх, так і для
прикладних цілей.
РОЗДІЛ 3. РОЗРОБКА СИСТЕМИ
3.1 Обґрунтування вибору засобів реалізації системи
Вибір технологій для реалізації вебдодатка обумовлений не лише
їхньою популярністю, а й відповідністю архітектурній моделі,
продуктивністю, зручністю у розробці та масштабованістю. У цьому проєкті
обрано стек MERN, який складається з MongoDB, Express.js, React та Node.js.
Такий підхід дозволяє використовувати одну мову програмування —
JavaScript — на всіх рівнях застосунку, що спрощує процес розробки та
зменшує кількість можливих помилок, пов’язаних із переходом між мовами.
У даному випадку Node.js є середовищем виконання серверного коду, тоді як
саме MongoDB, Express.js і React формують основні програмні засоби, кожен
з яких має своє обґрунтування.
MongoDB обрана як система керування базами даних завдяки своїй
гнучкості у збереженні даних у форматі BSON, подібному до JSON. Це
дозволяє безпосередньо працювати з документно-орієнтованою структурою,
яка ідеально підходить для динамічних структур, як-от користувачі, команди
й завдання. MongoDB не вимагає жорстко визначених схем, що особливо
зручно на етапі розробки, коли модель даних може змінюватися. Крім того,
MongoDB добре масштабується, підтримує реплікацію і шардінг,
забезпечуючи високу доступність і розподілення навантаження, що критично
для сучасних вебдодатків. Згідно з офіційною документацією MongoDB, її
особливості дозволяють зручно реалізовувати складні зв’язки між об’єктами
навіть у рамках NoSQL-моделі, завдяки підтримці вкладених документів і
агрегованих запитів [13].
Express.js виконує роль серверного фреймворку і побудований поверх
Node.js. Це мінімалістичне, але гнучке рішення для створення вебсервісів і
API. Express.js підтримує розширення, обробку маршрутизації, middleware-
функції, а також дозволяє швидко реалізувати RESTful-інтерфейси, що
необхідні для з’єднання між клієнтом і сервером. Перевага Express.js полягає
в його простоті, високій швидкості роботи та широкій підтримці у спільноті
розробників, що дозволяє легко знаходити рішення типових проблем. Саме
завдяки своїй простоті й ефективності Express став одним із найпоширеніших
фреймворків для створення серверної логіки JavaScript-додатків [14].
React використовується для побудови інтерфейсу користувача. Ця
бібліотека підтримує компонетний підхід, що дозволяє створювати
масштабовані, повторно використовувані елементи інтерфейсу. Однією з
головних переваг React є використання віртуального DOM, що підвищує
продуктивність при оновленні інтерфейсу, зменшуючи кількість маніпуляцій
з реальним DOM. React також добре підходить для реалізації SPA (Single
Page Application), що забезпечує безперервну взаємодію з інтерфейсом без
необхідності перезавантаження сторінки. Крім того, React активно
підтримується компанією Meta і має велику кількість супровідних бібліотек,
таких як Redux або React Router, що дозволяє організувати зберігання стану,
навігацію та інші аспекти інтерфейсу. Відповідно до документації React, його
головна мета — спростити створення складних користувацьких інтерфейсів,
використовуючи декларативний стиль і модульність [15].
Таким чином, поєднання MongoDB, Express.js і React дозволяє
реалізувати повнофункціональний, гнучкий, масштабований і ефективний
вебзастосунок. Вони утворюють узгоджене середовище розробки, яке
охоплює всі аспекти — від зберігання та обробки даних до побудови
зручного інтерфейсу. Обрані засоби підтримують сучасні підходи до
створення вебплатформ та є оптимальним вибором як для навчальних, так і
для реальних застосунків.
3.2 Реалізація системи
Перше, з чим стикається користувач при використанні більшості
інформаційних систем – це реєстрація. Крім цього, від реалізації цієї функції
великою мірою залежить безпека додатка. Тож для початку слід розглянути
саме її.
Для реалізації серверної частини вебдодатку, що забезпечує взаємодію
між клієнтським інтерфейсом, базою даних та бізнес-логікою системи, було
обрано стек технологій, який включає Node.js, Express.js та MongoDB. Ці
інструменти були підібрані з урахуванням вимог до гнучкості, швидкості
розробки, масштабованості та зручності обробки асинхронних запитів. Усі
три технології добре інтегруються між собою, утворюючи ефективне
середовище для побудови сучасних вебзастосунків, які працюють за
принципами REST-архітектури та обробляють велику кількість взаємодій із
клієнтом у режимі реального часу.
Node.js було обрано як середовище виконання серверного коду, що
дозволило використовувати JavaScript на всіх рівнях розробки — від клієнта
до сервера. Це забезпечило однорідність логіки застосунку, спрощення
комунікації між частинами системи та зменшення кількості потенційних
помилок, пов’язаних із міжмовною взаємодією. Node.js має вбудовану
підтримку асинхронного програмування на базі подій, що дозволяє
ефективно обробляти одночасно велику кількість запитів, не блокуючи
виконання інших операцій. У межах розробки це дало змогу реалізувати
швидкий і стабільний сервер, який виконує обробку запитів на створення,
оновлення та видалення даних, перевірку автентичності користувачів,
керування командами та завданнями.
Express.js було використано як фреймворк для побудови REST API на
базі Node.js. Його головна перевага полягає в мінімалістичності та
розширюваності. Express надає зручні засоби для маршрутизації запитів,
обробки параметрів, авторизації, роботи з middleware та конфігурації. Це
дозволило структурувати серверну частину додатку у вигляді модулів:
моделі, контролери, роутери, утиліти та конфігураційні файли. Завдяки
Express вдалося досягти чіткого розділення логіки — кожен маршрут
пов'язаний із відповідним контролером, що виконує конкретну дію.
Наприклад, маршрути для роботи з командами або завданнями окремо
обробляють створення, оновлення, видалення та перегляд, при цьому легко
масштабуються у разі додавання нових функцій. Express також забезпечив
інтеграцію з бібліотеками для обробки файлів, роботи з токенами,
логуванням та обробкою помилок, що дозволило реалізувати функціонал
реєстрації з підтвердженням електронної пошти, завантаження зображень та
керування доступом до ресурсів.
MongoDB було обрано як гнучку документоорієнтовану базу даних, яка
зберігає дані у форматі BSON, сумісному з JSON. Це забезпечило зручну
роботу з вкладеними структурами та масивами, що є особливо актуальним
для зберігання інформації про користувачів, команди та завдання. У межах
реалізації проєкту база даних включає три основні колекції — користувачі,
команди та завдання, — між якими побудовано зв’язки типу «один до
багатьох» та «багато до багатьох». Наприклад, команда містить масив
учасників, а завдання — посилання на виконавця. MongoDB забезпечила
високу продуктивність при виконанні складних запитів та агрегацій, а також
дозволила зберігати динамічні дані без необхідності жорсткої схеми, що
спростило процес розробки. У комбінації з бібліотекою Mongoose було
реалізовано моделі для кожної сутності з описом полів, типів даних,
обов’язковості та зв’язків. Це забезпечило валідацію на рівні бази даних і
дозволило уникнути непередбачуваних помилок під час запису чи читання
даних.
Особливу увагу під час розробки було приділено роботі з
асинхронними запитами, оскільки майже кожна взаємодія з базою даних або
сторонніми сервісами (наприклад, Cloudinary для зображень чи Nodemailer
для листів) вимагає обробки затримок. Синтаксис async/await, доступний у
середовищі Node.js, дозволив зробити код читабельним і контрольованим, з
чітким управлінням помилками. Крім того, система містить додаткові шари
перевірки доступу, зокрема middleware для автентифікації за JWT-токеном,
що забезпечує безпечний доступ до приватних маршрутів.
Застосування цього серверного стеку — Node.js, Express.js і MongoDB
— дало змогу реалізувати надійну, розширювану та легко підтримувану
серверну інфраструктуру для вебзастосунку. Такий підхід дозволяє
ефективно керувати структурою даних, забезпечувати швидку обробку
запитів, дотримуватись принципів безпеки та зберігати гнучкість при
масштабуванні. У результаті вдалося побудувати цілісну систему, яка
забезпечує повноцінний функціонал створення, редагування та видалення
користувачів, команд і завдань, а також дозволяє зберігати стан користувача,
обробляти зображення, надсилати підтвердження електронної пошти та
забезпечувати гнучку взаємодію з клієнтською частиною. Обрані серверні
технології повністю виправдали себе в контексті поставленої задачі,
забезпечивши стабільність, зручність розробки та перспективи подальшого
розвитку системи.
Функція обробки реєстрації користувача реалізована у вигляді
послідовності middleware, де перший з них відповідає за обробку зображення
профілю, завантаженого з форми, а другий виконує основну логіку створення
нового користувача. Після витягання даних з тіла запиту, таких як ім’я,
електронна пошта, пароль, опис та список команд, здійснюється перевірка на
наявність уже зареєстрованого користувача з вказаною електронною
адресою. У разі виявлення збігу реєстрація переривається з повідомленням
про помилку. Якщо користувач новий, пароль хешується за допомогою
алгоритму bcrypt, що забезпечує захист навіть у разі витоку бази даних.
Однією з ключових частин функції є створення токена підтвердження
електронної пошти за допомогою бібліотеки JSON Web Token (JWT). Цей
токен вбудовує в себе електронну адресу користувача та підписується
секретним ключем, відомим лише серверу. Його перевага полягає у тому, що
він не потребує додаткового звернення до бази даних для верифікації при
переході за посиланням з листа, оскільки вже містить усю необхідну
інформацію. Такий підхід дозволяє ефективно та безпечно реалізувати
підтвердження реєстрації. Важливо й те, що строк дії токена обмежено одним
днем, що знижує ризик його компрометації. За даними офіційної
документації JWT, цей стандарт забезпечує незалежність і перевірку
цілісності даних без потреби у збереженні стану на сервері, що ідеально
підходить для подібних цілей [16].
Обробка зображення користувача виконується шляхом передавання
його на зовнішній сервіс Cloudinary. Цей сервіс дозволяє уникнути
складнощів, пов’язаних із зберіганням файлів на власному сервері,
забезпечуючи при цьому високу надійність і доступність. Після завантаження
Cloudinary повертає URL оптимізованого зображення, який і зберігається у
базі даних як посилання на аватар користувача. Такий підхід не лише
зменшує навантаження на серверну частину, а й забезпечує адаптацію
зображення до різних пристроїв та умов перегляду. Згідно з документацією
Cloudinary, сервіс підтримує масштабування, оптимізацію і трансформації
зображень у режимі реального часу, що робить його надзвичайно зручним
для використання в сучасних вебзастосунках [17].
Таким чином, обробка реєстрації побудована на сучасних підходах до
безпеки та ефективності, поєднуючи перевірену практику роботи з токенами,
хешуванням та хмарними сервісами для зображень. Блок-схема функції
наведена в Додатку А. Далі наведено фрагмент програмного коду, що
відповідає за цю функцію.
export const register = [upload.single('photo'), async (req, res) => {
try {
const { username, email, password: pass, description } = req.body;
const teams = JSON.parse(req.body.teams || []);
const photoFile = req.file;
let photoUrl = null;
const existingUser = await User.findOne({ email });
if (existingUser) return res.status(400).json({ message: 'User exists' });
const salt = await bcrypt.genSalt(10);
const hash = await bcrypt.hash(pass, salt);
const token = jwt.sign({ email }, process.env.JWT_SECRET, {
expiresIn: '1d', });
if (photoFile) {
const result = await cloudinary.uploader.upload(photoFile.path);
photoUrl = result.secure_url; }
const user = await User.create({username, email, password: hash,
token, photo: photoUrl, description, teams: teams || [], });
const verifyUrl = `http://localhost:3001/verify/${token}`;
await sendEmail(
email, 'Confirm your email', `Click to confirm: ${verifyUrl}` );
res.status(201).json({
message: 'User registered, check your email', }); } catch (err) {
res.status(500).json({ message: err.message }); } },];
Функція створення команди реалізована як послідовність middleware,
де перший відповідає за обробку зображення команди, а другий містить
основну логіку формування нового документа в базі даних. Спершу із запиту
витягуються назва, опис, список учасників і зображення, після чого
перевіряється авторизація користувача через наявність ідентифікатора
користувача у запиті. Така перевірка є ключовим кроком безпеки, що
унеможливлює створення об’єктів від імені неавторизованих осіб, відповідно
до рекомендацій OWASP щодо контролю доступу [18].
Якщо користувач авторизований, і передане зображення, воно
завантажується до хмарного сховища Cloudinary, як і в функції реєстрації, з
подальшим збереженням лише URL оптимізованого зображення. Важливо,
що тимчасовий файл зберігання зображення одразу видаляється після
завантаження, що зменшує ризики накопичення зайвих файлів на сервері.
Після цього виконується формування остаточного списку учасників, де
ініціатор створення команди автоматично додається до складу учасників
навіть у разі його відсутності у переданому списку. Це забезпечує коректне
формування зв’язків між користувачем і командою та виключає ситуацію,
коли автор створює команду, але не є її учасником.
Після перевірки існування автора в базі даних, створюється документ
команди зі всіма переданими параметрами. Важливим етапом є збереження
не лише ідентифікаторів, але й зв’язків із моделями користувачів, які одразу
заповнюються для повернення повноцінного об’єкта з детальною
інформацією про кожного учасника й автора. Це дозволяє уникнути
додаткових запитів на фронтенді та забезпечити готовий до використання
результат. Після створення об’єкта команди виконується оновлення профілю
користувача-автора, в який додається нова команда без дублювання значень
завдяки оператору $addToSet. Цей оператор MongoDB гарантує, що значення
не повторюватимуться у масиві, навіть у разі багаторазових запитів [19].
Загалом функція демонструє багаторівневу перевірку достовірності
даних і логічну послідовність дій, що дозволяє створювати команди з
урахуванням як безпеки, так і зручності використання. Таке поєднання
використання хмарних сервісів, перевірок доступу, гнучкої роботи з
масивами в MongoDB та можливості взаємного заповнення моделей
(population) є характерним для сучасних вебзастосунків, що базуються на
стеку MERN. Схема роботи функції наведена в додатку А. Далі наведено
фрагменти програмного коду, що відповідають за зв’язок із сервером та
збереження даних для цієї функції. Налаштування бібліотеки Axios:
const instance = axios.create({baseURL: "http://localhost:3000/api/",});
instance.interceptors.request.use((config) => {
const token = localStorage.getItem("token");
if (token) {config.headers.Authorization = `Bearer ${token}`;}
return config;});
Запит до сервера:
export const addTeam = async (name, description, photo, members) => {
const token = localStorage.getItem("token");
const formData = new FormData();
formData.append("name", name);
formData.append("description", description);
formData.append("photo", photo);
formData.append("members", JSON.stringify(members || []));
const response = await axios.post("team", formData, {
headers: {"Content-Type": "multipart/form-data",},});
return response.data; };
Action, реалізований за допомогою бібліотеки Redux:
export const createTeamAction = createAsyncThunk("teams/addTeam",
async ({ name, description, photo }, { getState }) => {
const { data: user } = getState().auth;
const userId = user?._id;
if (!userId) throw new Error("User not authenticated");
const response = await addTeam(name, description, photo, []);
return response;});
Повний Redux-slice наведено в Додатку Б. Конфігурація стану відбувається
наступним чином в окремому файлі:
const store = configureStore({reducer: {
auth: authReducer, teams: teamsReducer,
users: usersReducer, tasks: tasksReducer,},});
Використання Axios та Redux Toolkit у фронтенд-частині застосунку є
обґрунтованим з погляду як ефективної організації взаємодії з сервером, так і
централізованого управління станом інтерфейсу. Axios — це бібліотека для
виконання HTTP-запитів, що надає простіший і гнучкіший синтаксис у
порівнянні зі стандартним fetch. Однією з ключових переваг Axios є
можливість створення інстансів із попередньо визначеними заголовками,
базовими URL або інтерцепторами для обробки помилок, авторизації чи
токенів. Це спрощує масштабування застосунку, адже повторне
використання конфігурацій зменшує кількість дублювання коду. Axios також
підтримує автоматичну трансформацію JSON-відповідей, що покращує
читаємість і робить інтеграцію з бекендом більш надійною. Інформацію було
взято з офіційної документації [20].
Redux, а особливо його сучасне розширення Redux Toolkit, надає
ефективний спосіб управління станом застосунку. Він дозволяє уникати
дублювання даних у компонентах та зберігати глобальний стан у
централізованому сховищі, що особливо корисно при роботі з
автентифікацією, завантаженням даних з API або синхронізацією стану між
кількома компонентами. Redux Toolkit зменшує обсяг шаблонного коду, що
був притаманний класичному Redux, завдяки утилітам createSlice,
createAsyncThunk та інтегрованому immer, який дає змогу працювати з
незмінними структурами даних у зручному імперативному стилі. Це
пришвидшує розробку, робить код більш читабельним та менш схильним до
помилок. Вся ця інформація наведена в офіційному гіді [21].
Таким чином, використання Axios забезпечує гнучкість та
масштабованість мережевої взаємодії, тоді як Redux Toolkit дозволяє
побудувати стабільну архітектуру управління даними, що знижує складність
супроводу застосунку та підвищує надійність його роботи. Комбінація цих
інструментів є стандартом де-факто для багатьох сучасних React-застосунків.
Ще одним важливим блоком програми є робота з завданнями в межах
певної команди. Схема роботи серверного коду для створення завдання
наведена в додатку А. Контейнерний компонент для редагування
реалізовано з використанням бібліотеки React, і він виконує роль
контейнерного компонента для редагування завдання. Його мета —
забезпечити логіку оновлення даних завдання, зберігати стан форми та
передавати відповідні обробники й дані до презентаційного компонента.
Вибір саме цієї бібліотеки зумовлено низкою факторів, пов’язаних з
архітектурними особливостями, функціональними можливостями та
екосистемою бібліотеки. React є відкритим проєктом, який підтримується
компанією Meta та активною спільнотою розробників, що забезпечує
регулярне оновлення, вдосконалення функцій і наявність великої кількості
супутніх інструментів. Саме завдяки своїй гнучкості, масштабованості та
модульності React дозволив реалізувати складну систему з динамічними
компонентами, які швидко оновлюються відповідно до стану застосунку.
Однією з основних переваг React є його компонентний підхід до
побудови інтерфейсу. Всі частини користувацького інтерфейсу — від кнопок
до повноцінних форм або розділів — були реалізовані як окремі компоненти,
що мають власну логіку та стиль. Це дозволило досягти високої
повторюваності коду та суттєво спростити його підтримку. Наприклад,
форма редагування завдання, виведення картки команди або списку завдань
реалізовано як ізольовані компоненти, які можуть використовуватись
повторно у різних частинах застосунку. Крім того, компонентний підхід
сприяє чіткому структуруванню коду: кожна частина інтерфейсу має власну
відповідальність, що значно полегшує тестування та налагодження.
Особливе значення має також використання хуків, які є сучасним
способом управління станом і життєвим циклом компонентів у React.
Наприклад, useState застосовувався для керування локальними станами форм,
полів введення та станів кнопок, у той час як useEffect — для завантаження
початкових даних із сервера або оновлення інтерфейсу при зміні параметрів.
Таке використання хуків дозволяє зберегти простоту функціональних
компонентів, не жертвуючи можливостями, які раніше були доступні лише
через класові компоненти. У результаті структура застосунку залишається
компактною, читабельною й адаптованою до сучасних підходів розробки.
Ще одним аргументом на користь React стала його виняткова здатність
до інтеграції з іншими бібліотеками та технологіями. У межах розробки
клієнтська частина була поєднана з Redux Toolkit для управління глобальним
станом. Ця інтеграція відбулася без ускладнень завдяки підтримці React у
Redux, а також наявності спеціалізованих інструментів, зокрема хука
useDispatch та useSelector. Вони забезпечують зручну взаємодію з
глобальним станом прямо з компонентів і дозволяють ефективно обробляти
асинхронні дії, як-от отримання або оновлення даних із сервера. У контексті
розробки системи командної співпраці це виявилося особливо цінним, адже
потреба в частому оновленні списку команд, завдань або користувачів
вимагає швидкої реакції інтерфейсу на зміну даних.
Також слід відзначити, що React добре поєднується з бібліотеками
маршрутизації, зокрема React Router, що дало змогу реалізувати повноцінну
навігацію між сторінками застосунку без перезавантаження. Це особливо
актуально для систем, які мають багато вкладених маршрутів, як-от сторінки
команди, сторінка користувача, форми редагування, перегляду тощо.
Використання React Router дозволило створити інтуїтивно зрозумілу
структуру навігації та забезпечити плавність перемикання між
компонентами, не порушуючи поточний стан застосунку.
Крім того, важливо зазначити, що React має високу розширюваність,
що дозволяє легко додавати новий функціонал без зміни вже реалізованих
частин системи. Завдяки розподілу логіки на малі, незалежні компоненти,
додавання нових форм, фільтрів, віджетів або діалогових вікон відбувається з
мінімальними витратами часу та без ризику порушення стабільності
застосунку. У випадку з даним проєктом це дозволило реалізувати форму
створення завдання у вигляді модального вікна, яке просто додається до
існуючого дерева компонентів, не змінюючи структуру основної сторінки
команди.
Варто також зазначити, що використання React позитивно вплинуло на
продуктивність розробки. Завдяки численним інструментам і розширенням,
зокрема React Developer Tools, можливо ефективно відслідковувати стан
компонентів, відлагоджувати помилки та оптимізовувати ререндери. Під час
створення функціоналу редагування завдань, наприклад, ці інструменти
дозволяли швидко виявляти логічні помилки у роботі з формами або
помилки, пов’язані з асинхронною взаємодією з сервером.
Компонент використовує хук useState для локального зберігання полів
форми: назви, опису та виконавця завдання. Хук useDispatch з бібліотеки
react-redux дозволяє ініціювати асинхронні Redux-екшени. У функції
handleChange відслідковуються зміни в інпуті та оновлюється відповідне
поле стану форми. Функція handleSubmit виконує перевірку обов’язкових
полів, викликає асинхронну дію updateTaskAction (імпортовану з Redux-
модуля завдань), після чого, у разі успішного оновлення, закриває режим
редагування.
Цей підхід відповідає принципам розділення логіки та інтерфейсу —
логіка обробки подій зосереджена в контейнерному компоненті, тоді як
презентаційний займається відображенням інтерфейсу. Така архітектура
дозволяє покращити повторне використання компонентів, спростити
тестування та структурувати код за функціональними рівнями, що відповідає
загальним рекомендаціям розробки React-додатків [22].
Окрім цього, використання Redux і асинхронних дій через redux-thunk
або createAsyncThunk (як це типово в Redux Toolkit) є поширеним підходом
до централізованого управління станом і взаємодії з API. Це дозволяє
зберігати бізнес-логіку в одному місці та уникати дублювання коду в
компонентах інтерфейсу [23].
Таким чином, компонент демонструє сучасний підхід до реалізації
редагування сутності в React-застосунках з використанням Redux для
асинхронної роботи зі станом. В Додатку Б наведено повний програмний код
презентаційного компонента для редагування завдання.
Функції для створення, відображення, редагування та видалення є
досить схожими для кожної сутності, тож у даній кваліфікаційній роботі
наведено лише деякі з них для загального розуміння використаних підходів.
Всі складові клієнтської та серверної частини, зрештою, ведуть до одного,
кінцевого модуля. Для клієнта це головний компонент:
function App() {
const dispatch = useDispatch();
useEffect(() => {const token = localStorage.getItem("token");
if (token) {dispatch(getCurrentUser());}}, [dispatch]);
return (<BrowserRouter>
<div className="App">
<HeaderContainer />
<div className="App-pages">
<Routes><Route index element={<SignInContainer />} />
<Route path="signup" element={<SignUpContainer />} />
<Route path="/verify/:token"
element={<EmailVerifyPageContainer />}/>
<Route path="/profile/:id" element={<ProfileContainer />} />
<Route path="teams" element={<TeamsContainer />} />
<Route path="/teams/:id" element={<TeamDetailsContainer />} />
</Routes></div>
<div className="App-footer"><Footer /></div></div>
</BrowserRouter>);}
Для сервера це головний серверний файл:
const app = express();
const port = 3000;
const corsOptions = {origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true, optionsSuccessStatus: 204, };
app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use('/api', authRouter);
app.use('/api', teamRouter);
app.use('/api/tasks', taskRouter);
app.listen(port, () => {console.log(
`Server listening on port ${port} and starting at http://localhost:${port}`);});
3.3 Тестування системи
Тестування є ключовим етапом розробки програмного забезпечення,
який забезпечує перевірку його стабільності, безпеки та відповідності
очікуваному функціоналу. Своєчасне виявлення помилок дозволяє значно
зменшити витрати на підтримку, підвищити якість продукту та покращити
досвід користувачів. Особливо важливим є тестування вебзастосунків, де
взаємодія клієнтської та серверної частин потребує узгодженості. Як
зазначено в публікації Mozilla, тестування — це не лише процес виявлення
дефектів, а й важливий засіб забезпечення якості програмного забезпечення в
різних середовищах [24].
Для початку проведемо тестування модулю авторизації та реєстрації,
адже це перше, з чим стикається користувач.
Рис. 3.1 – Форма реєстрації
Рис. 3.2 – Форма авторизації
Рис. 3.3 – Сповіщення про успішну верифікацію електронної пошти
Як можна побачити, після заповнення всіх обов’язкових полів користувач
отримує електронного листа з посиланням на сторінку сповіщення про
успішну верифікацію. Після натискання кнопки «Continue» користувач
переходить на сторінку авторизації. Якщо введені дані збігаються з тими, що
були введені при реєстрації, то відбувається перехід до модуля роботи з
командами, який і буде розглянуто далі.
Рис. 3.4 – Сторінка команд
На сторінці команд відображаються всі команди, учасником яких є
поточний користувач. Вгорі секції доступні дві функції – пошук команди за
назвою та створення нової команди.
Рис. 3.5 – Форма створення команди
Як можна помітити, ця форма виконана в тому самому стилі, що й
форми авторизації та реєстрації. Після введення необхідних даних нова
команда відображається в списку разом з іншими з автоматично доданим
учасником – творцем команди. Тепер слід розглянути сторінку однієї
команди.
Рис. 3.6 – Сторінка команди (початок)
Рис. 3.7 – Сторінка команди (продовження)
Вгорі сторінки відображається аватар, назва та опис команди. Збоку
також є секція завдань, кожне з яких можна взяти для виконання, змінити або
видалити. Також є кнопка для створення нового завдання.
Рис. 3.8 – Форма створення завдання
Після відправлення форми нове завдання додається у список. Після цього
його можна редагувати.
Внизу сторінки можна побачити наявних учасників команди, а також
кнопки для редагування та видалення команди. Якщо користувач не є
учасником команди, то ці кнопки замінюються на кнопку «Join» для
приєднання.
Рис. 3.9 – Форма редагування команди
При редагуванні попередні дані нікуди не зникають, що досить зручно, якщо
користувач хоче внести лише невеликі зміни. Також можна помітити, що
стиль елементів інтерфейсу, пов’язаних зі створенням, редагуванням та
видаленням дещо відрізняється від попередньо розглянутих для інтуїтивної
зрозумілості та естетичності сайту.
Насамкінець варто протестувати сторінку профілю користувача та всі
доступні на ній дії.
Рис. 3.10 – Сторінка профілю користувача
Рис. 3.11 – Форма редагування профілю
На цій сторінці знаходяться дані про користувача, а також можливість
редагування та видалення профілю. Всі ці функції працюють справно. Також
у шапці сайту є кнопка «Logout», що надає можливість вийти з облікового
запису й повертає на сторінку авторизації. Якщо користувач не виходив з
нього та не видаляв кеш браузера, то при відвіданні сайту одразу бачитиме
сторінку команд. Це відбувається завдяки використанню JWT-токена.
В цілому можна сказати, що функції сайту працюють коректно.
Зовнішній вигляд відповідає задуманому дизайну та загальним поширеним
практикам у дизайні. Тестування системи було проведено успішно.
3.4 Порівняння з аналогами
Порівняння розробленого вебзастосунку з наявними аналогами дає
змогу глибше зрозуміти його сильні та слабкі сторони, а також виявити його
потенціал у конкретному сегменті користувачів. Серед обраних для аналізу
платформ — JetBrains Academy, Codecademy Teams, Scrimba, The Odin Project
та Frontend Mentor — кожна має свою цільову аудиторію, специфіку
навчального процесу та формат командної взаємодії. Однак розроблений
продукт орієнтується на інші завдання: він не лише слугує середовищем для
навчання, а й надає користувачам реальний досвід роботи над проєктами в
динамічних командах, сприяє створенню довготривалих професійних зв’язків
та потенційно — появі стартапів.
JetBrains Academy пропонує навчання через розробку повноцінних
застосунків, підтримує інтеграцію з GitHub, роботу в групах та створення
власних курсів. Проте платформа все ж таки має освітній фокус — метою є
навчити користувача певним технологіям і концепціям, а не надати
інфраструктуру для командного розвитку поза межами курсових проєктів. До
того ж, командна взаємодія обмежується рамками навчального контенту й не
передбачає створення окремих командних середовищ зі збереженням даних,
історією змін і розподілом ролей.
Codecademy Teams орієнтований на командне навчання з фокусом на
Git, DevOps та Agile. Він дозволяє організувати процес колективного
опанування технологій, що актуально для корпоративного навчання або
освітніх закладів. Проте, як і у випадку JetBrains Academy, проєктна
діяльність реалізована як частина навчального процесу, без повноцінної
підтримки менеджменту команд, обліку учасників, автономного створення
задач та контролю виконання.
Scrimba та The Odin Project мають схожу специфіку. Вони надають
доступ до навчального контенту з веброзробки та заохочують спільну роботу,
однак здебільшого в межах неформальної взаємодії — через спільне
редагування коду, обговорення на Discord або через open-source репозиторії.
Наприклад, The Odin Project пропонує роботу з GitHub у межах завдань і
проєктів, однак не має внутрішнього механізму для постійного формування
команд, не підтримує функціональності типу призначення завдань,
оновлення профілів, приєднання до команди тощо. Scrimba, хоч і
використовує інтерактивну форму навчання, також не має вбудованої
інфраструктури для менеджменту команд.
Frontend Mentor є найближчим за духом до розробленої платформи,
оскільки дозволяє публікувати власні рішення задач, отримувати фідбек та
взаємодіяти з іншими користувачами. Крім того, він має можливість
переглядати реалізації інших, що є формою колективного вдосконалення.
Проте й тут відсутня система менеджменту команд, не реалізовано створення
персоналізованих завдань, немає гнучкого управління учасниками чи
підтримки ролей в команді. Платформа спрямована більше на покращення
особистих навичок дизайну та верстки.
На відміну від вищенаведених аналогів, розроблений вебзастосунок
має низку відмінностей. По-перше, він не передбачає обов’язкову участь в
освітніх курсах і не обмежує функціональність рамками навчальної
програми. Користувач має змогу створити команду незалежно від досвіду чи
ролі, запросити інших учасників, створити завдання, оновити або видалити
його, при цьому всі зміни фіксуються на сервері. Це дозволяє моделювати
реальні умови розробки — з динамічно змінними вимогами,
відповідальністю за задачі та колективною діяльністю.
Додатковою перевагою є реалізація реєстрації через підтвердження
електронної пошти, завантаження зображень користувача й команди через
Cloudinary, а також збереження повного профілю користувача. Це формує
довготривалу й персоналізовану присутність у системі, на відміну від
тимчасової або сесійної участі в аналогах. Такий підхід дозволяє будувати
довіру серед учасників, що є критично важливим у командній роботі.
Ще одним важливим фактором є можливість використання розробленої
системи серед працівників різних напрямків, у той час як інші системи
націлені на вивчення саме програмування, або взагалі якоїсь окремої його
галузі. Дана система може бути впроваджена у сфері IT, маркетингу, дизайну
чи навіть використовуватись у нецифрових професіях, як-от будівництво чи
мистецтво.
Підсумовуючи, розроблений вебзастосунок займає окрему нішу — це
не платформа для навчання в традиційному сенсі, а середовище для розвитку
навичок взаємодії в команді на основі реальних сценаріїв співпраці. Саме це
відрізняє його від наявних аналогів, які або обмежуються освітнім
контекстом, або не мають необхідного функціоналу для довготривалого й
структурованого менеджменту команд. Таким чином, платформа має
потенціал як для навчання, так і для реального застосування знань у
командній роботі, що особливо актуально для початківців, які прагнуть
створити портфоліо чи знайти партнерів для стартапів [25].
ВИСНОВКИ
У межах виконання кваліфікаційної роботи було досягнуто поставлену
мету — створено web-застосунок для пошуку фахівців і формування команд
із можливістю керування завданнями. Робота виконана на базі сучасних
вебтехнологій: Node.js (зокрема Express.js) на серверній частині, MongoDB як
гнучка та масштабована база даних, а також React.js для реалізації
інтерактивного інтерфейсу. Це забезпечило ефективну взаємодію між
клієнтською та серверною частинами системи, масштабованість,
адаптивність інтерфейсу, а також зручне розширення функціоналу. У
результаті реалізовано систему, що дозволяє не лише організовувати
командну співпрацю, а й сприяє розвитку фахових компетентностей
користувачів.
1. Проаналізовано вимоги до системи для організації командної взаємодії
у сфері спільного виконання проєктів. У результаті дослідження було
виокремлено основні функціональні потреби користувачів, серед яких:
реєстрація, авторизація з підтвердженням електронної пошти,
створення й керування командами, робота з завданнями, редагування
профілю. Аналіз дозволив сформувати технічне завдання, на основі
якого реалізовано функціонал застосунку.
2. Розроблено архітектуру вебзастосунку з урахуванням принципів
модульності, масштабованості та безпеки. Архітектура базується на
розділенні відповідальностей між frontend, backend та базою даних, що
забезпечує простоту супроводу, тестування та можливість подальшого
розвитку системи.
3. Спроєктовано інтерфейс користувача за допомогою React, що дало
змогу реалізувати зручну й адаптивну систему для взаємодії з
функціоналом застосунку. Компонентний підхід у розробці забезпечив
повторне використання елементів і підвищив ефективність розробки.
4. Реалізовано серверну частину застосунку на основі Node.js та
Express.js, що забезпечило обробку HTTP-запитів, авторизацію, роботу
з базою даних і захист даних користувача. Для зберігання даних
використано MongoDB, що дозволяє працювати з гнучкими
структурами документів.
5. Протестовано базовий функціонал системи шляхом перевірки кожного
з модулів: створення профілю, керування командами,
додавання/редагування/видалення завдань, що підтвердило коректну
роботу програмного забезпечення згідно з поставленими вимогами.
6. Обґрунтовано вибір стеку технологій, зокрема MongoDB, Express,
React та Redux Toolkit, що забезпечило швидку розробку, гнучкість
структури збереження даних і зручну роботу з глобальним станом
застосунку.
Вебдодаток прогнозовано забезпечить ефективну організацію
командної взаємодії, що є особливо актуальним у сфері освітніх і
професійних проєктів. Система вже впроваджена в тестовому режимі на
локальному сервері, де підтверджено її працездатність, зручність інтерфейсу
та надійність механізмів безпеки.
З огляду на результати роботи, доцільним є подальше використання
створеної системи для допомоги початківцям у пошуку фахівців, формуванні
команд і роботі над спільними проєктами. У перспективі можлива адаптація
застосунку для мобільних пристроїв, додавання рейтингової системи,
інтеграції з професійними платформами (LinkedIn, GitHub) і вдосконалення
інструментів аналітики для оцінювання ефективності командної співпраці.
Також доцільно реалізувати систему повідомлень, календар завдань і
можливість інтеграції відеозв’язку, що зробить систему ще більш придатною
для реального використання.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Create a Programming Course With JetBrains Academy: Guides and
Resources. URL: https://blog.jetbrains.com/education/2024/03/11/programming-course-
creation-resources/
2. General. URL: https://www.codecademy.com/resources/docs/general
3. How Scrimba came to be. URL: https://v1.scrimba.com/articles/how-scrimba-came-to-
be/
4. About The Odin Project. URL: https://www.theodinproject.com/about
5. Introducing Frontend Mentor for Teams! URL:
https://www.frontendmentor.io/articles/introducing-frontend-mentor-for-teams
6. Krug, S. Don't Make Me Think: A Common Sense Approach to Web
Usability. 3rd edition, New Riders, 2014. 216 p.
7. Data Modeling. URL: https://www.mongodb.com/docs/manual/data-modeling/
8. Production best practices: performance and reliability. URL:
https://expressjs.com/en/advanced/best-practice-performance.html
9. Redux Style Guide. URL: https://redux.js.org/style-guide/#structure-files-as-feature-
folders-or-ducks
10. Authentication Cheat Sheet. URL:
https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html
11. Issues. URL: https://docs.gitlab.com/user/project/issues/
12. Art. 17 GDPR. Right to erasure (‘right to be forgotten’). URL: https://gdpr-
info.eu/art-17-gdpr/
13. Why Use MongoDB and When to Use It? URL:
https://www.mongodb.com/resources/products/fundamentals/why-use-mongodb
14. Routing. URL: https://expressjs.com/en/guide/routing.html
15. Quick Start. URL: https://react.dev/learn
16. Introduction to JSON Web Tokens. URL: https://jwt.io/introduction
17. Visualize Engaging Experiences. URL: https://cloudinary.com/documentation
18. Authorization Cheat Sheet. URL:
https://cheatsheetseries.owasp.org/cheatsheets/Authorization_Cheat_Sheet.html
19. $addToSet. URL:
https://www.mongodb.com/docs/manual/reference/operator/update/addToSet/
20. Getting Started. URL: https://axios-http.com/docs/intro
21. Getting Started with Redux Toolkit. URL: https://redux-
toolkit.js.org/introduction/getting-started
22. Thinking in React. URL: https://react.dev/learn/thinking-in-react
23. Why Redux Toolkit is How To Use Redux Today. URL: https://redux-
toolkit.js.org/introduction/why-rtk-is-redux-today
24. Introduction to cross-browser testing. URL: https://developer.mozilla.org/en-
US/docs/Learn_web_development/Extensions/Testing/Introduction
25. West, M. A. (2012). Effective Teamwork: Practical Lessons from
Organizational Research. 3rd edition. Wiley-Blackwell, 2012. 312 p.
ДОДАТОК А
СХЕМИ
Блок-схема функції реєстрації користувача:
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
Схема роботи функції створення команди:
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
Схема роботи функції створення завдання:
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
ДОДАТОК Б
ПРОГРАМНИЙ КОД
Програмний код Redux-slice для роботи з командами:
const teamsSlice = createSlice({ name: "teams",
initialState: {data: [], currentTeam: null, status: "idle", error: null,
userTeams: [], userTeamsStatus: "idle", userTeamsError: null,},
reducers: {},
extraReducers: (builder) => {builder
.addCase(createTeamAction.pending, (state) => {
state.status = "loading";})
.addCase(createTeamAction.fulfilled, (state, action) => {
state.status = "succeeded";
state.data.push(action.payload);})
.addCase(createTeamAction.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message;})
.addCase(updateTeamAction.pending, (state) => {
state.status = "loading";})
.addCase(updateTeamAction.fulfilled, (state, action) => {
state.status = "succeeded";
const updatedTeam = action.payload;
state.data = state.data.map((team) =>
team._id === updatedTeam._id ? updatedTeam : team);})
.addCase(updateTeamAction.rejected, (state, action) => {
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
state.status = "failed";
state.error = action.error.message;})
.addCase(getTeamsByIdAction.pending, (state) => {
state.status = "loading";})
.addCase(getTeamsByIdAction.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = action.payload;})
.addCase(getTeamsByIdAction.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message;})
.addCase(getTeamsAllAction.pending, (state) => {
state.status = "loading";})
.addCase(getTeamsAllAction.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = action.payload;})
.addCase(getTeamsAllAction.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message; })
.addCase(getTeamAction.pending, (state) => {
state.status = "loading"; })
.addCase(getTeamAction.fulfilled, (state, action) => {
state.status = "succeeded";
state.currentTeam = action.payload;})
.addCase(getTeamAction.rejected, (state, action) => {
Змн. Арк. № докум. Підпис Дата
Розроб. Літ. Арк. Акрушів
Перевір. 1
Н. Контр. ХПК
Затверд.
state.status = "failed";
state.error = action.error.message;})
.addCase(getUserTeamsAction.pending, (state) => {
state.userTeamsStatus = "loading";})
.addCase(getUserTeamsAction.fulfilled, (state, action) => {
state.userTeamsStatus = "succeeded";
state.userTeams = action.payload;})
.addCase(getUserTeamsAction.rejected, (state, action) => {
state.userTeamsStatus = "failed";
state.userTeamsError = action.error.message;})
.addCase(removeTeamAction.pending, (state) => {
state.status = "loading";})
.addCase(removeTeamAction.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = state.data.filter((team) => team._id !== action.payload);})
.addCase(removeTeamAction.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message;});},});
Програмний код презентаційного компонента для редагування завдань:
const EditTask = ({ setIsEditing, handleChange, handleSubmit, formData }) => {
return (
<form onSubmit={handleSubmit} className={styles.editTaskForm}>
<input type="text" name="name" value={formData.name}
onChange={handleChange}placeholder="Task name"
required/><textarea
name="description" value={formData.description}
onChange={handleChange} placeholder="Description"
required/><input
type="text" name="doer" value={formData.doer}
onChange={handleChange}
placeholder="User ID of assignee (optional)" />
<div className={styles.buttonGroup}>
<button type="submit" className={styles.saveButton}>
Save</button>
<button type="button" className={styles.cancelButton}
onClick={() => setIsEditing(false)}> Cancel</button></div></form>);};