Сайт-візитівка магазину продажу спортивних товарів

Валуєв, Сергій Вадимович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9682
Title:	Сайт-візитівка магазину продажу спортивних товарів
Authors:	Дяченко, Петро Васильович Валуєв, Сергій Вадимович
Keywords:	WEB-РОЗРОБКА;САЙТ-ВІЗИТІВКА;СПОРТИВНІ ТОВАРИ;АДАПТИВНИЙ ДИЗАЙН;JAVASCRIPT;WEB-ЗАСТОСУНОК.
Issue Date:	11-Jun-2026
Abstract:	Актуальність теми полягає у необхідності створення сучасних web-ресурсів для представлення діяльності магазинів спортивних товарів у мережі Інтернет. Використання сайтів-візитівок дозволяє підвищити рівень взаємодії з клієнтами, забезпечити зручний доступ до інформації про товари та послуги, а також покращити конкурентоспроможність підприємства в умовах цифровізації бізнесу. Мета роботи і задачі дослідження. Метою роботи є розробка сайту-візитівки магазину продажу спортивних товарів із використанням сучасних web-технологій та адаптивного інтерфейсу користувача.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/9682
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)
Files in This Item:
File	Description	Size	Format
Пояснювальна записка_Валуєв Сергій_КН-2201_2025-2026.pdf Restricted Access		4.69 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
1 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
 
Кафедра комп’ютерних наук та системного аналізу 
 
 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
                                         бакалавра       
 (освітньо-кваліфікаційний рівень) 
 
на тему: «Сайт-візитівка магазину продажу спортивних товарів» 
 
 
 
Виконав: студент 4 курсу, групи КН-2201 
  
спеціальності 122  «Комп’ютерні науки» 
                                                             (шифр і назва спеціальності) 
 
Освітня програма «Комп’ютерні науки та  
                                                                (назва освітньої програми) 
прикладне програмування» 
 
 Сергій ВАЛУЄВ    
 
Керівник                        Петро ДЯЧЕНКО  
                                                                  (прізвище та ініціали) 
 
Рецензент                                                  К    
                                                                     (прізвище та ініціали) 
 
 
 
 
 
 
 
Черкаси 2026 року 
2 
Бланк завдання на кваліфікаційну роботу бакалавра студенту 
 
Черкаський державний технологічний університет 
Факультет Інформаційних технологій і систем 
Кафедра Комп’ютерних наук та системного аналізу 
Освітньо-кваліфікаційний рівень Бакалавр 
Спеціальність 122 – комп’ютерні науки  
Освітня програма Комп’ютерні науки та прикладне програмування 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри КНСА  
_______________ Юрій ТРИУС 
«____» _____________ 2026 р. 
 
 
ЗАВДАННЯ 
на кваліфікаційну роботу бакалавра студенту 
Валуєву Сергію Вадимовичу 
(прізвище, ім‘я, по батькові) 
1. Тема роботи    Сайт-візитівка магазину продажу спортивних товарів 
                                      
Керівник роботи  Дяченко Петро Васильович к.т.н., доцент 
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
затверджені наказом університету від « 12 » березня 2026 р. № 56/03-03. 
2. Строк подання студентом роботи  «10» червня 2026 року  
3. Вихідні дані до роботи:  
Звіт з переддипломної практики.  
Сайти аналоги продажу спортивних товарів 
Практичні навики роботи з web-сайтами. Робота з базами даних. 
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити): 
Вступ 
4.1. Аналіз предметної області та сучасних web-технологій. 
4.2. Проєктування сайту-візитівки магазину спортивних товарів. 
4.3. Програмна реалізація web-застосунку 
4.4. Тестування та аналіз результатів роботи системи. 
Висновки.  
 5. Перелік додатків (з точним зазначенням назв додатків): 
5 .1. Додаток А. Специфікація 482.ЧДТУ. 62284-01. 
5 .2 . Додаток Б . Лістинг ко ду програми. 
5.3. Додаток В. Інструкція користувача. 
5.4. Додаток Г. Схеми підключень. 
5.5. Додаток Д. Апробація результатів роботи. 
5.6. Презентація у вигляді 20 слайдів. 
 
3 
 
 
6. Консультанти розділів роботи 
Прізвище, ініціали та Підпис, дата 
Розділ посада 
консультанта завдання видав завдання прийняв 
    
    
 
7. Дата видачі завдання 12.01.2026 р. 
  
 
КАЛЕНДАРНИЙ ПЛАН 
№ з/п Назва етапів кваліфікаційної роботи бакалавра Строк виконання 
етапів роботи Примітка 
1 Видача завдання на кваліфікаційну роботу до 15.01.2026 Виконано 
бакалавра. 
2 Аналіз літературних джерел, об’єкту та 
предмету дослідження. до 12.02.2026 Виконано 
3 Написання теоретичного розділу кваліфікаційної до 18.03.2026 Виконано 
роботи бакалавра. 
4 Написання аналітичного розділу (аналіз об’єкту 
й предмету дослідження). до 01.04.2026 Виконано 
5 Написання практичних розділів й висновків по 
роботі. до 01.05.2026 Виконано 
6 Передзахист кваліфікаційної роботи бакалавра Виконано 
до 03.06.2026 
на засіданні кафедри КНСА. 
7 Подання роботи завідувачу кафедри КНСА. до 10.06. 2026 Виконано 
8 Захист кваліфікаційної роботи бакалавра. 10.06.2026 Виконано 
    
    
    
    
 
 
Студент                                     _________________  _____       / Сергій ВАЛУЄВ   /  
                                                                                                        (підпис)                                                                    ПІБ 
 
Керівник роботи                     ________________________     / Петро ДЯЧЕНКО  / 
                                           (підпис)                                                                   ПІБ 
 
4 
РЕФЕРАТ 
Кваліфікаційна робота бакалавра: 93 с., 28 рис., 2 табл., 25 джерел, 4 
додатки. 
Актуальність теми. Актуальність теми полягає у необхідності створення 
сучасних web-ресурсів для представлення діяльності магазинів спортивних 
товарів у мережі Інтернет. Використання сайтів-візитівок дозволяє підвищити 
рівень взаємодії з клієнтами, забезпечити зручний доступ до інформації про 
товари та послуги, а також покращити конкурентоспроможність підприємства в 
умовах цифровізації бізнесу. 
Мета роботи і задачі дослідження. Метою роботи є розробка сайту-
візитівки магазину продажу спортивних товарів із використанням сучасних 
web-технологій та адаптивного інтерфейсу користувача. 
Для досягнення поставленої мети необхідно вирішити такі завдання: 
− провести аналіз сучасних web-ресурсів магазинів спортивних товарів; 
− дослідити сучасні технології та засоби web-розробки; 
− спроєктувати архітектуру web-застосунку; 
− реалізувати клієнтську та серверну частини системи; 
− створити адаптивний інтерфейс користувача; 
− реалізувати функціонал відображення каталогу товарів; 
− провести тестування та оцінку працездатності системи. 
Об’єкт дослідження – web-застосунки для представлення діяльності 
комерційних організацій у мережі Інтернет. 
Предмет дослідження – методи та засоби розробки сайту-візитівки 
магазину спортивних товарів із використанням сучасних web-технологій. 
Методи дослідження. У роботі використано методи web-проєктування, 
адаптивної верстки та модульної розробки програмного забезпечення. Для 
створення інтерфейсу користувача застосовано технології HTML5, CSS3 та 
JavaScript. Під час реалізації клієнтської частини використано бібліотеку React, 
а серверної частини – платформу Node.js та фреймворк Express.js. Для 
зберігання та обробки даних використано MongoDB. 
5 
У процесі виконання роботи проведено аналіз сучасних web-ресурсів 
спортивних магазинів, досліджено особливості побудови адаптивних web-
застосунків та визначено основні вимоги до функціональності системи. 
Виконано аналіз сучасних технологій web-розробки та обґрунтовано вибір 
програмних засобів для реалізації проєкту. 
Розроблено архітектуру web-застосунку, що включає клієнтську та 
серверну частини. Реалізовано адаптивний інтерфейс користувача, систему 
навігації, модулі відображення каталогу товарів, сторінки контактної 
інформації та форми зворотного зв’язку. Забезпечено коректне відображення 
web-ресурсу на персональних комп’ютерах, планшетах і мобільних пристроях. 
У результаті тестування встановлено, що розроблений сайт забезпечує 
стабільну роботу в сучасних web-браузерах, швидке завантаження сторінок та 
коректне відображення елементів інтерфейсу. Реалізовані засоби адаптивного 
дизайну дозволили забезпечити зручність використання системи на різних 
типах пристроїв та покращити взаємодію користувача з web-ресурсом. 
Апробація результатів роботи. Практичне значення отриманих 
результатів полягає у можливості використання розробленого сайту-візитівки 
для представлення діяльності магазину спортивних товарів у мережі Інтернет, а 
також у навчальному процесі спеціальності 122 «Комп’ютерні науки». 
Ключові слова: WEB-РОЗРОБКА, САЙТ-ВІЗИТІВКА, СПОРТИВНІ 
ТОВАРИ, REACT, NODE.JS, JAVASCRIPT, АДАПТИВНИЙ ДИЗАЙН, WEB-
ЗАСТОСУНОК. 
 
 
 
 
 
 
 
 
6 
ABSTRACT 
Bachelor’s qualification thesis: 93 pages, 28 figures, 2 tables, 25 references, 4 
appendices. 
Relevance of the topic. The relevance of the topic lies in the need to create 
modern web resources for presenting the activities of sports goods stores on the 
Internet. The use of business card websites makes it possible to improve customer 
interaction, provide convenient access to information about products and services, 
and increase the competitiveness of enterprises in the context of business 
digitalization. 
Purpose of the work and research objectives. The purpose of the work is to 
develop a business card website for a sports goods store using modern web 
technologies and a responsive user interface. 
To achieve the stated goal, it is necessary to solve the following tasks: 
− analyze modern web resources of sports goods stores; 
− investigate modern technologies and tools of web development; 
− design the architecture of the web application; 
− implement the client-side and server-side parts of the system; 
− create a responsive user interface; 
− implement the functionality for displaying the product catalog; 
− conduct testing and evaluate the performance of the system. 
The object of research is web applications for presenting the activities of 
commercial organizations on the Internet. 
The subject of research is methods and tools for developing a business card 
website for a sports goods store using modern web technologies. 
Research methods. The work uses methods of web design, responsive layout, 
and modular software development. HTML5, CSS3, and JavaScript technologies 
were used to create the user interface. The React library was used for implementing 
the client-side part, while Node.js and the Express.js framework were used for the 
server-side part. MongoDB was used for data storage and processing. 
7 
During the work, an analysis of modern web resources of sports stores was 
carried out, the features of building responsive web applications were investigated, 
and the main requirements for the system functionality were determined. Modern 
web development technologies were analyzed, and the choice of software tools for 
project implementation was substantiated. 
The architecture of the web application, including client-side and server-side 
parts, was developed. A responsive user interface, navigation system, product catalog 
display modules, contact information pages, and feedback forms were implemented. 
Correct display of the web resource on personal computers, tablets, and mobile 
devices was ensured. 
As a result of testing, it was established that the developed website provides 
stable operation in modern web browsers, fast page loading, and correct display of 
interface elements. The implemented responsive design tools made it possible to 
ensure usability on different types of devices and improve user interaction with the 
web resource. 
Approbation of the research results. The practical significance of the 
obtained results lies in the possibility of using the developed business card website 
for presenting the activities of a sports goods store on the Internet, as well as in the 
educational process of Specialty 122 “Computer Science”. 
Keywords: WEB DEVELOPMENT, BUSINESS CARD WEBSITE, SPORTS 
GOODS, REACT, NODE.JS, JAVASCRIPT, RESPONSIVE DESIGN, WEB 
APPLICATION. 
 
 
8 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ .... 10 
ВСТУП  ............................................................................................................................ 11 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА СУЧАСНИХ WEB-ТЕХНОЛОГІЙ ........ 13 
1.1 Аналіз сучасного ринку спортивних товарів ................................................... 14 
1.2 Аналіз аналогів та існуючих web-ресурсів ...................................................... 16 
1.3 Огляд сучасних web-технологій ....................................................................... 22 
1.4 Аналіз засобів та інструментів web-розробки ................................................. 29 
1.5 Постановка задачі дослідження 
Висновки до розділу 1 ............................................................................................. 34 
2 ПРОЄКТУВАННЯ САЙТУ-ВІЗИТІВКИ МАГАЗИНУ СПОРТИВНИХ 
ТОВАРІВ ......................................................................................................................... 36 
2.1 Загальна архітектура системи ........................................................................... 36 
2.2 Проєктування структури web-застосунку ........................................................ 43 
2.3 Моделювання системи засобами UML ............................................................ 45 
2.4 Проєктування бази даних .................................................................................. 49 
2.5 Проєктування користувацького інтерфейсу .................................................... 50 
2.6 Вибір технологій реалізації ............................................................................... 52 
Висновки до розділу 2 ............................................................................................. 52 
3 ПРОГРАМНА РЕАЛІЗАЦІЯ WEB-ЗАСТОСУНКУ................................................ 54 
3.1 Реалізація клієнтської частини ......................................................................... 54 
3.2 Реалізація серверної частини ............................................................................ 56 
3.3 Реалізація адаптивного дизайну ....................................................................... 57 
3.4 Реалізація функціоналу каталогу товарів ........................................................ 59 
3.5 Інтеграція компонентів системи ....................................................................... 63 
Висновки до розділу 3 ............................................................................................. 67 
4 ТЕСТУВАННЯ ТА АНАЛІЗ РЕЗУЛЬТАТІВ РОБОТИ СИСТЕМИ ..................... 68 
4.1 Тестування функціональності системи ............................................................ 68 
4.2 Аналіз продуктивності web-застосунку ........................................................... 69 
9 
4.3 Аналіз адаптивності та usability системи......................................................... 73 
4.4 Оцінка результатів роботи системи .................................................................. 73 
Висновки до розділу 4 ............................................................................................. 78 
ВИСНОВКИ  ................................................................................................................... 80 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ  ..................................................................... 82 
ДОДАТОК А. Специфікація 482.ЧДТУ. 62200-01. ...................................................... 84 
ДОДАТОК Б. Лістинг коду програми ........................................................................... 86 
ДОДАТОК В. Інтерфейс користувача web-застосунку ............................................... 90 
ДОДАТОК Г. Результати тестування системи ............................................................. 94 
 
10 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І 
ТЕРМІНІВ 
API — Application Programming Interface, інтерфейс програмування застосунків. 
CSS — Cascading Style Sheets, каскадні таблиці стилів для оформлення web-
сторінок. 
DOM — Document Object Model, об’єктна модель документа HTML. 
Express.js — програмний фреймворк для платформи Node.js. 
Flexbox — технологія CSS для побудови гнучких макетів web-сторінок. 
Git — система контролю версій програмного коду. 
HTML — HyperText Markup Language, мова розмітки web-сторінок. 
HTTP — HyperText Transfer Protocol, протокол передачі гіпертекстових даних. 
HTTPS — HyperText Transfer Protocol Secure, захищений протокол передачі 
даних. 
JSON — JavaScript Object Notation, текстовий формат обміну даними. 
JavaScript — мова програмування для створення інтерактивних web-
застосунків. 
MongoDB — документоорієнтована система керування базами даних. 
Node.js — програмна платформа для виконання JavaScript на стороні сервера. 
NPM — Node Package Manager, менеджер пакетів для Node.js. 
React — JavaScript-бібліотека для створення інтерфейсів користувача. 
REST API — архітектурний стиль взаємодії компонентів web-застосунків 
HTTP. 
Responsive Design — адаптивний дизайн web-інтерфейсів для різних типів 
пристроїв. 
SPA — Single Page Application, односторінковий web-застосунок. 
UI — User Interface, інтерфейс користувача. 
URL — Uniform Resource Locator, уніфікований локатор ресурсу. 
UX — User Experience, досвід взаємодії користувача із системою. 
VS Code — Visual Studio Code, редактор програмного коду. 
11 
Web-застосунок — програмна система, доступ до якої здійснюється через web-
браузер.    
12 
ВСТУП 
У сучасних умовах розвитку інформаційних технологій та цифровізації 
суспільства web-ресурси стали важливим інструментом ведення бізнесу, 
реклами продукції та взаємодії з клієнтами. Більшість підприємств різних сфер 
діяльності використовують мережу Інтернет для представлення власних товарів 
і послуг, підвищення впізнаваності бренду та розширення клієнтської аудиторії. 
Особливо актуальним це є для сфери продажу спортивних товарів, оскільки 
популяризація здорового способу життя та фізичної активності сприяє 
постійному зростанню попиту на спортивний одяг, інвентар та аксесуари. 
Одним із найбільш ефективних способів представлення компанії у 
цифровому середовищі є створення сайту-візитівки. Такий web-ресурс дозволяє 
забезпечити користувачів необхідною інформацією про діяльність магазину, 
асортимент продукції, акційні пропозиції, контакти та умови співпраці. На 
відміну від складних інтернет-магазинів, сайт-візитівка має простішу 
структуру, швидше завантажується та потребує менших витрат на підтримку й 
адміністрування. 
Сучасні web-технології дозволяють створювати адаптивні та інтерактивні 
web-застосунки, які забезпечують зручну взаємодію користувача із системою 
незалежно від типу пристрою. Використання HTML5, CSS3, JavaScript, React та 
Node.js дає можливість реалізувати сучасний інтерфейс користувача, високу 
швидкість роботи та модульну структуру програмного забезпечення. 
Актуальність теми кваліфікаційної роботи полягає у необхідності 
створення сучасного адаптивного web-ресурсу для магазину спортивних 
товарів, який забезпечить ефективне представлення продукції, зручну навігацію 
та доступність інформації для користувачів на різних типах пристроїв. 
Метою кваліфікаційної роботи є розробка сайту-візитівки магазину 
продажу спортивних товарів із використанням сучасних web-технологій та 
адаптивного інтерфейсу користувача. 
Для досягнення поставленої мети необхідно вирішити такі завдання: 
13 
– провести аналіз сучасних web-ресурсів магазинів спортивних товарів; 
– дослідити сучасні технології та засоби web-розробки; 
– спроєктувати архітектуру web-застосунку; 
– реалізувати клієнтську та серверну частини системи; 
– створити адаптивний інтерфейс користувача; 
– реалізувати функціонал відображення каталогу товарів; 
– провести тестування та оцінку працездатності системи. 
Об’єктом дослідження є web-застосунки для представлення діяльності 
комерційних організацій у мережі Інтернет. 
Предметом дослідження є методи та засоби розробки сайту-візитівки 
магазину спортивних товарів із використанням сучасних web-технологій. 
Методи дослідження базуються на використанні методів web-
проєктування, адаптивної верстки, модульного програмування та аналізу 
сучасних технологій створення web-застосунків. Для реалізації програмного 
продукту використовуються технології HTML5, CSS3, JavaScript, React, Node.js 
та MongoDB. 
Практичне значення отриманих результатів полягає у створенні готового 
web-ресурсу, який може бути використаний для представлення діяльності 
магазину спортивних товарів у мережі Інтернет. Розроблений сайт може 
застосовуватись для демонстрації асортименту продукції, взаємодії з клієнтами 
та подальшого розширення функціональних можливостей системи. 
Кваліфікаційна робота складається зі вступу, чотирьох розділів, 
висновків, списку використаних джерел та додатків. У першому розділі 
виконано аналіз предметної області та сучасних web-технологій. У другому 
розділі розглянуто проєктування структури та архітектури системи. У третьому 
розділі описано програмну реалізацію web-застосунку. У четвертому розділі 
наведено результати тестування та аналіз ефективності роботи системи. 
14 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА СУЧАСНИХ WEB-
ТЕХНОЛОГІЙ 
На сьогодні web-технології є важливою складовою діяльності сучасних 
підприємств, зокрема магазинів спортивних товарів. Використання web-
ресурсів дозволяє забезпечити ефективне представлення продукції, взаємодію з 
клієнтами та підвищення конкурентоспроможності компанії. У зв’язку з 
розвитком електронної комерції особливої актуальності набуває створення 
сучасних адаптивних сайтів-візитівок, які забезпечують швидкий доступ до 
інформації та зручність використання на різних типах пристроїв. 
У даному розділі проведено аналіз предметної області, сучасного ринку 
спортивних товарів та існуючих web-ресурсів. Розглянуто сучасні технології 
web-розробки, інструменти створення web-застосунків і визначено основні 
вимоги до розроблюваної системи. 
1.1 Аналіз сучасного ринку спортивних товарів 
У сучасних умовах розвитку цифрових технологій та електронної 
комерції сфера продажу спортивних товарів демонструє стабільне зростання. 
Популяризація здорового способу життя, фітнесу, активного відпочинку та 
професійного спорту сприяє збільшенню попиту на спортивний одяг, взуття, 
тренажери, аксесуари та інший спортивний інвентар. 
Значна частина взаємодії між продавцями та покупцями відбувається 
через мережу Інтернет, що обумовлює необхідність створення сучасних web-
ресурсів для представлення продукції та послуг. Як показано на рисунку 1.1, 
сучасний ринок спортивних товарів активно використовує цифрові технології 
та online-платформи для взаємодії з клієнтами. 
15 
 
Рисунок 1.1 – Сучасний ринок спортивних товарів та використання web-
технологій. 
Сучасний ринок спортивних товарів характеризується високою 
конкуренцією між виробниками та торговельними компаніями. Для 
забезпечення конкурентоспроможності підприємства активно використовують 
інформаційні технології, цифровий маркетинг та web-застосунки. 
Наявність власного web-сайту дозволяє компаніям: 
– забезпечувати постійний доступ користувачів до інформації про товари; 
– представляти асортимент продукції у зручному вигляді; 
– інформувати клієнтів про новини, акції та спеціальні пропозиції; 
– підвищувати рівень довіри до бренду; 
– розширювати аудиторію потенційних покупців. 
Одним із найбільш поширених типів web-ресурсів для малого та 
середнього бізнесу є сайт-візитівка. Приклад структури сучасного сайту-
візитівки магазину спортивних товарів наведено на рисунку 1.2. 
16 
 
Рисунок 1.2 – Приклад структури сайту-візитівки магазину спортивних 
товарів. 
Такий тип сайту дозволяє представити основну інформацію про компанію 
без необхідності створення складної системи електронної комерції. Сайт-
візитівка має порівняно просту структуру, швидко завантажується та може бути 
адаптований для роботи на різних типах пристроїв. 
Для магазинів спортивних товарів сайт-візитівка виконує декілька 
важливих функцій: 
– інформаційну; 
– рекламну; 
– презентаційну; 
– комунікаційну. 
Важливим аспектом сучасних web-ресурсів є адаптивність інтерфейсу. 
Значна частина користувачів здійснює перегляд сайтів за допомогою 
смартфонів та планшетів, тому web-застосунок повинен коректно 
відображатися на різних розмірах екранів. Приклад адаптивного інтерфейсу 
наведено на рисунку 1.3. 
17 
 
Рисунок 1.3 – Відображення web-сайту на різних типах пристроїв 
Таким чином, створення сучасного сайту-візитівки для магазину 
спортивних товарів є актуальним завданням, яке потребує використання 
сучасних web-технологій, адаптивного дизайну та ефективних засобів 
організації користувацького інтерфейсу. 
1.2 Аналіз аналогів та існуючих web-ресурсів 
Для визначення основних вимог до розроблюваної системи було 
проведено аналіз сучасних web-ресурсів магазинів спортивних товарів. 
Більшість існуючих сайтів мають схожу структуру та реалізують базові 
функціональні можливості, необхідні для представлення товарів та взаємодії з 
користувачами. 
Типовий web-сайт магазину спортивних товарів містить: 
– головну сторінку; 
– каталог товарів; 
– сторінку акцій; 
– інформацію про компанію; 
– контактні дані; 
– інтеграцію із соціальними мережами. 
18 
Приклад сучасного інтерфейсу web-магазину спортивних товарів 
наведено на рисунку 1.4. 
 
Рисунок 1.4 – Приклад інтерфейсу сучасного web-магазину спортивних 
товарів 
На головній сторінці зазвичай розміщуються банери, популярні товари, 
інформація про знижки та короткі відомості про магазин. Каталог товарів 
реалізується у вигляді карток із фотографіями, назвами та описами продукції. 
Під час аналізу сучасних web-ресурсів були визначені основні переваги 
існуючих рішень: 
– сучасний дизайн; 
– адаптивний інтерфейс; 
– використання анімацій та інтерактивних елементів; 
– швидкий доступ до інформації; 
– інтеграція із соціальними мережами. 
Разом із тим були виявлені певні недоліки: 
– надмірна кількість графічних елементів; 
– складна структура меню; 
– перевантаженість сторінок; 
19 
– низька швидкість завантаження; 
– недостатня адаптація для мобільних пристроїв. 
Як показано на рисунку 1.5, складна структура інтерфейсу негативно 
впливає на зручність користування web-ресурсом. 
 
Рисунок 1.5 – Приклад перевантаженого інтерфейсу web-сайту 
На основі проведеного аналізу було сформовано основні вимоги до 
розроблюваного сайту-візитівки: 
– простий та зрозумілий інтерфейс; 
– адаптивний дизайн; 
– швидке завантаження сторінок; 
– зручна система навігації; 
– структуроване представлення товарів; 
– підтримка сучасних web-браузерів; 
– можливість подальшого розширення функціоналу. 
1.3 Огляд сучасних web-технологій 
Розробка сучасних web-застосунків здійснюється із використанням 
широкого набору технологій та програмних засобів. Основу більшості web-
ресурсів складають HTML, CSS та JavaScript. 
20 
HTML (HyperText Markup Language) є мовою розмітки web-сторінок і 
використовується для створення структури документів. CSS (Cascading Style 
Sheets) застосовується для оформлення web-сторінок, а JavaScript забезпечує 
інтерактивність системи. 
Структуру взаємодії основних web-технологій наведено на рисунку 1.6. 
 
Рисунок 1.6 – Взаємодія HTML, CSS та JavaScript у web-застосунку 
Однією з найбільш популярних бібліотек для створення інтерфейсів 
користувача є React. Основними перевагами React є: 
– компонентний підхід; 
– повторне використання елементів інтерфейсу; 
– висока швидкість оновлення сторінок; 
– підтримка SPA-застосунків. 
Архітектуру сучасного web-застосунку із використанням React та Node.js 
наведено на рисунку 1.7. 
21 
 
Рисунок 1.7 – Архітектура сучасного web-застосунку 
Для реалізації серверної частини широко використовується платформа 
Node.js. Вона дозволяє виконувати JavaScript-код на стороні сервера та 
забезпечує обробку HTTP-запитів, взаємодію з базами даних і передачу даних 
між клієнтом та сервером. 
Для зберігання даних використовується MongoDB – 
документоорієнтована система керування базами даних. Приклад взаємодії 
клієнтської та серверної частини системи показано на рисунку 1.8. 
22 
 
Рисунок 1.8 – Схема взаємодії клієнта, сервера та бази даних 
Сучасні web-застосунки також активно використовують: 
– REST API; 
– JSON; 
– адаптивну верстку; 
– модульну архітектуру; 
– системи контролю версій Git. 
Важливу роль у розробці web-застосунків відіграє адаптивний дизайн. 
Для його реалізації використовуються media queries, Flexbox та CSS Grid. Як 
показано на рисунку 1.9, адаптивна верстка дозволяє змінювати структуру 
інтерфейсу залежно від розміру екрана пристрою. 
23 
 
Рисунок 1.9 – Принцип роботи адаптивного дизайну 
1.4 Аналіз засобів та інструментів web-розробки 
Для створення сучасних web-застосунків використовуються різноманітні 
програмні засоби та середовища розробки. Одним із найпоширеніших 
редакторів програмного коду є Visual Studio Code. 
Середовище Visual Studio Code забезпечує: 
– підтримку великої кількості мов програмування; 
– інтеграцію із системою Git; 
– підтримку розширень; 
– автоматичне форматування коду; 
– засоби налагодження програм. 
Інтерфейс середовища розробки Visual Studio Code наведено на рисунку 
1.10. 
24 
 
Рисунок 1.10 – Середовище розробки Visual Studio Code 
Для керування версіями програмного коду використовується система Git. 
Вона дозволяє зберігати історію змін, організовувати командну роботу та 
забезпечувати резервне копіювання проєкту. 
Під час розробки клієнтської частини web-застосунку використовуються: 
– React; 
– Vite; 
– npm; 
– Axios. 
Для тестування web-застосунків застосовуються сучасні браузери: 
– Google Chrome; 
– Mozilla Firefox; 
– Microsoft Edge. 
Приклад процесу тестування web-застосунку у браузері наведено на 
рисунку 1.11. 
25 
 
Рисунок 1.11 – Тестування web-застосунку у браузері 
 
1.5 Постановка задачі дослідження 
На основі проведеного аналізу предметної області та сучасних web-
технологій було сформовано задачу дослідження, яка полягає у розробці 
сучасного адаптивного сайту-візитівки магазину спортивних товарів. 
Основними вимогами до системи є: 
– сучасний дизайн інтерфейсу; 
– адаптивність для різних пристроїв; 
– швидке завантаження сторінок; 
– зручна навігація; 
– структуроване представлення товарів; 
– підтримка сучасних браузерів; 
– можливість подальшого розширення функціоналу. 
Для реалізації системи обрано сучасний технологічний стек: 
– HTML5; 
– CSS3; 
– JavaScript; 
26 
– React; 
– Node.js; 
– Express.js; 
– MongoDB. 
Загальну структуру розроблюваної системи наведено на рисунку 1.12. 
 
Рисунок 1.12 – Загальна структура web-застосунку магазину спортивних 
товарів 
Результатом виконання роботи має стати функціональний web-
застосунок, який забезпечуватиме представлення магазину спортивних товарів 
у мережі Інтернет та зручну взаємодію користувачів із системою. 
Висновки до розділу 1 
У першому розділі було проведено аналіз предметної області та сучасних 
web-технологій. Досліджено особливості сучасного ринку спортивних товарів 
та визначено роль web-ресурсів у діяльності торговельних компаній. 
Проведено аналіз аналогів та існуючих web-застосунків магазинів 
спортивних товарів, визначено їх основні переваги та недоліки. На основі 
аналізу сформовано вимоги до розроблюваного сайту-візитівки. 
27 
Розглянуто сучасні технології web-розробки, зокрема HTML5, CSS3, 
JavaScript, React, Node.js та MongoDB. Виконано аналіз сучасних інструментів і 
засобів розробки програмного забезпечення. 
За результатами проведеного дослідження сформовано постановку задачі 
кваліфікаційної роботи та обрано технологічний стек для реалізації web-
застосунку магазину спортивних товарів. 
28 
2 ПРОЄКТУВАННЯ САЙТУ-ВІЗИТІВКИ МАГАЗИНУ СПОРТИВНИХ 
ТОВАРІВ 
Проєктування web-застосунку є одним із найважливіших етапів розробки 
програмного забезпечення, оскільки саме на цьому етапі визначаються 
структура системи, взаємодія її компонентів, функціональні можливості та 
принципи організації користувацького інтерфейсу. Якісне проєктування 
дозволяє забезпечити зручність використання системи, ефективність обробки 
даних, адаптивність та можливість подальшого розширення функціоналу. 
Для розробки сайту-візитівки магазину спортивних товарів необхідно 
створити сучасну архітектуру web-застосунку, яка забезпечуватиме стабільну 
роботу системи, швидкий доступ до інформації та коректне відображення 
інтерфейсу на різних типах пристроїв. Важливими аспектами проєктування є 
організація структури сторінок, побудова навігації, моделювання взаємодії 
користувача із системою та проєктування бази даних. 
У даному розділі розглянуто процес проєктування сайту-візитівки 
магазину спортивних товарів, описано загальну архітектуру системи, структуру 
web-застосунку, UML-моделювання, структуру бази даних та особливості 
створення користувацького інтерфейсу. 
2.1 Загальна архітектура системи 
Проєктування web-застосунку є одним із найважливіших етапів 
створення програмного забезпечення, оскільки саме на цьому етапі 
визначається структура системи, її основні компоненти, взаємодія між 
модулями та принципи функціонування. Для розробки сайту-візитівки магазину 
спортивних товарів було обрано сучасну клієнт-серверну архітектуру, яка 
забезпечує ефективну взаємодію між користувачем, серверною частиною та 
базою даних. 
Основною метою створення системи є забезпечення користувачів 
зручним доступом до інформації про магазин спортивних товарів, каталог 
продукції, акції та контактні дані. Крім того, система повинна мати адаптивний 
29 
інтерфейс, високу швидкість роботи та можливість подальшого розширення 
функціоналу. 
Архітектура web-застосунку складається з трьох основних рівнів: 
– клієнтська частина (Frontend); 
– серверна частина (Backend); 
– база даних. 
Клієнтська частина відповідає за взаємодію з користувачем та 
відображення інформації у браузері. Вона реалізована із використанням 
сучасних web-технологій HTML5, CSS3 та JavaScript, а також бібліотеки React. 
Основними функціями frontend-частини є: 
– відображення сторінок web-сайту; 
– навігація між розділами; 
– виведення каталогу товарів; 
– адаптація інтерфейсу до різних пристроїв; 
– взаємодія із сервером через API. 
Серверна частина реалізована на платформі Node.js із використанням 
фреймворку Express.js. Вона забезпечує: 
– обробку HTTP-запитів; 
– маршрутизацію; 
– обробку даних; 
– формування відповідей клієнту; 
– взаємодію із базою даних. 
Для зберігання інформації про товари, категорії та контактні дані 
використовується база даних MongoDB. Використання документоорієнтованої 
бази даних дозволяє забезпечити гнучкість структури даних та спрощує 
масштабування системи. 
Загальну архітектуру системи наведено на рисунку 2.1. 
30 
 
Рисунок 2.1 – Загальна архітектура web-застосунку магазину спортивних 
товарів 
У процесі роботи системи користувач взаємодіє із web-інтерфейсом через 
браузер. Клієнтська частина надсилає HTTP-запити до сервера, після чого 
сервер виконує обробку даних, звертається до бази даних та повертає результат 
у форматі JSON або HTML-відповіді. 
Основними перевагами обраної архітектури є: 
– модульність; 
– масштабованість; 
– висока швидкість роботи; 
– зручність підтримки; 
– можливість подальшого розширення функціоналу. 
Використання компонентного підходу React дозволяє повторно 
використовувати елементи інтерфейсу та забезпечує спрощення процесу 
розробки. Крім того, архітектура системи підтримує можливість інтеграції 
додаткових сервісів, таких як системи авторизації, онлайн-оплати або API 
доставки. 
 
 
31 
2.2 Проєктування структури web-застосунку 
На етапі проєктування структури web-застосунку було визначено основні 
сторінки та компоненти системи. Головною задачею є забезпечення простого та 
зрозумілого інтерфейсу для користувача, який дозволить швидко отримати 
доступ до необхідної інформації. 
Структура сайту-візитівки включає такі основні сторінки: 
– головна сторінка; 
– каталог товарів; 
– сторінка «Про нас»; 
– сторінка акцій; 
– контакти; 
– форма зворотного зв’язку. 
Головна сторінка є центральним елементом web-застосунку. Вона 
містить: банер із основною інформацією; популярні категорії товарів; короткий 
опис магазину; блок акцій та новинок; контактну інформацію. 
Проєктування структури web-застосунку є важливим етапом розробки 
програмного забезпечення, оскільки від правильної організації сторінок та 
компонентів залежить зручність використання системи, швидкість доступу до 
інформації та ефективність взаємодії користувача із web-ресурсом. Під час 
проєктування сайту-візитівки магазину спортивних товарів основна увага 
приділялася створенню простої та зрозумілої структури, яка забезпечує логічне 
розміщення інформації та швидку навігацію між основними розділами системи.  
Структура web-застосунку побудована за модульним принципом, що 
дозволяє спростити процес розробки та забезпечити можливість подальшого 
розширення функціоналу системи. Основними сторінками web-застосунку є 
головна сторінка, каталог товарів, сторінка акцій, сторінка «Про нас» та 
контакти. Для реалізації інтерфейсу використовуються окремі React-
компоненти, які забезпечують повторне використання елементів та спрощують 
підтримку програмного коду. Крім того, структура системи враховує вимоги 
адаптивного дизайну, що забезпечує коректне відображення web-застосунку на 
персональних комп’ютерах, планшетах та мобільних пристроях. 
32 
Приклад структури головної сторінки наведено на рисунку 2.2. 
 
Рисунок 2.2 – Структура головної сторінки web-застосунку 
 
33 
Каталог товарів реалізовано у вигляді карток товарів, які містять: 
– фотографію; 
– назву товару; 
– короткий опис; 
– ціну; 
– категорію. 
Для зручності користувачів передбачено систему навігації та 
категоризації товарів. Основні категорії: 
– спортивне взуття; 
– спортивний одяг; 
– тренажери; 
– аксесуари; 
– спортивне харчування. 
Схему структури каталогу товарів наведено на рисунку 2.3. 
 
Рисунок 2.3 – Структура каталогу товарів 
Для організації навігації використовується верхнє меню, яке забезпечує 
швидкий доступ до всіх сторінок web-застосунку. У мобільній версії меню 
реалізовано у вигляді адаптивного «бургер-меню». 
34 
Важливим елементом системи є футер сайту, який містить: 
– контактну інформацію; 
– посилання на соціальні мережі; 
– копірайт; 
– додаткові навігаційні елементи. 
Таким чином, структура web-застосунку забезпечує логічну організацію 
контенту та зручність взаємодії користувача із системою. 
2.3 Моделювання системи засобами UML 
Для моделювання структури та функціонування системи 
використовуються UML-діаграми. UML (Unified Modeling Language) є 
універсальною мовою моделювання, яка дозволяє описати архітектуру 
програмного забезпечення, взаємодію компонентів та поведінку системи. 
У рамках проєкту були розроблені: 
– діаграма варіантів використання (Use Case Diagram); 
– діаграма компонентів (Component Diagram); 
– діаграма діяльності (Activity Diagram). 
Діаграма варіантів використання дозволяє визначити основних 
користувачів системи та їх взаємодію із web-застосунком. Основними акторами 
системи є: користувач; адміністратор. 
Користувач має можливість: 
– переглядати сторінки сайту; 
– переглядати каталог товарів; 
– здійснювати пошук товарів; 
– надсилати повідомлення через форму зворотного зв’язку. 
Адміністратор системи має можливість: 
– додавати нові товари; 
– редагувати інформацію; 
– оновлювати акції; 
– керувати контентом сайту. 
Приклад UML-діаграми варіантів використання наведено на рисунку 2.4. 
35 
 
Рисунок 2.4 – UML Use Case Diagram web-застосунку 
Діаграма компонентів описує взаємодію між frontend- та backend-
компонентами системи. Вона дозволяє відобразити структуру програмних 
модулів та взаємозв’язки між ними. 
Діаграму компонентів наведено на рисунку 2.5. 
 
Рисунок 2.5 – UML Component Diagram web-застосунку 
36 
Діаграма діяльності використовується для моделювання послідовності дій 
користувача під час взаємодії із системою. Вона відображає логіку роботи web-
застосунку та основні етапи обробки інформації. 
Приклад діаграми діяльності наведено на рисунку 2.6. 
 
Рисунок 2.6 – UML Activity Diagram взаємодії користувача із системою 
37 
Використання UML-моделювання дозволило: 
– спростити проєктування системи; 
– визначити взаємозв’язки між компонентами; 
– покращити структуру програмного забезпечення; 
– спростити подальшу розробку та тестування. 
2.4 Проєктування бази даних 
Для зберігання інформації у web-застосунку використовується база даних 
MongoDB. Вона забезпечує гнучку структуру зберігання даних та підтримує 
роботу із JSON-подібними документами. 
Основними сутностями бази даних є: 
– товари; 
– категорії; 
– користувачі; 
– повідомлення з форми зворотного зв’язку. 
Колекція товарів містить такі поля: 
– назва товару; 
– опис; 
– ціна; 
– категорія; 
– фотографія; 
– дата створення. 
Проєктування бази даних є важливим етапом створення web-застосунку, 
оскільки саме база даних забезпечує зберігання, обробку та швидкий доступ до 
інформації системи. Для розробки сайту-візитівки магазину спортивних товарів 
було обрано документоорієнтовану систему керування базами даних MongoDB, 
яка забезпечує гнучкість структури даних та ефективну інтеграцію із JavaScript-
застосунками. Як показано на рисунку 2.7, структура бази даних включає 
основні колекції: товари, категорії, користувачі, замовлення, повідомлення з 
форми зворотного зв’язку та акційні пропозиції. Між колекціями реалізовано 
логічні зв’язки за допомогою ідентифікаторів ObjectId, що дозволяє 
38 
організувати ефективну взаємодію між даними та забезпечити масштабованість 
системи у процесі подальшого розвитку web-застосунку. 
Структуру бази даних наведено на рисунку 2.7. 
 
Рисунок 2.7 – Структура бази даних web-застосунку 
Використання MongoDB дозволяє: 
– швидко виконувати запити; 
– гнучко змінювати структуру даних; 
– масштабувати систему; 
– спрощувати інтеграцію із JavaScript-застосунками. 
2.5 Проєктування користувацького інтерфейсу 
Одним із ключових етапів розробки web-застосунку є створення 
сучасного та зручного інтерфейсу користувача. Під час проєктування 
інтерфейсу особлива увага приділялася: 
– простоті навігації; 
– адаптивності; 
– сучасному дизайну; 
– швидкому доступу до інформації. 
Основними принципами проєктування інтерфейсу стали: 
39 
– мінімалізм; 
– структурованість; 
– логічне розташування елементів; 
– візуальна привабливість. 
Основні кольори інтерфейсу: 
– синій; 
– білий; 
– темно-сірий. 
Інтерфейс web-застосунку містить: 
– верхнє меню; 
– банер; 
– блоки категорій; 
– картки товарів; 
– футер. 
Макет інтерфейсу web-застосунку наведено на рисунку 2.8. 
 
Рисунок 2.8 – Макет користувацького інтерфейсу web-застосунку 
Для забезпечення адаптивності використовуються: 
– media queries; 
40 
– Flexbox; 
– CSS Grid. 
Адаптивний інтерфейс дозволяє коректно відображати web-застосунок 
на: 
– персональних комп’ютерах; 
– планшетах; 
– смартфонах. 
 
Висновки до розділу 2 
У другому розділі було виконано проєктування сайту-візитівки магазину 
спортивних товарів. Розроблено загальну архітектуру системи та визначено 
основні компоненти web-застосунку. 
Було спроєктовано структуру web-застосунку, визначено основні 
сторінки та функціональні можливості системи. Виконано UML-моделювання 
програмного забезпечення та описано взаємодію між компонентами системи. 
Спроєктовано структуру бази даних та визначено основні сутності для 
зберігання інформації. Також розроблено концепцію користувацького 
інтерфейсу із врахуванням вимог адаптивності, зручності та сучасного дизайну. 
Отримані результати проєктування є основою для подальшої програмної 
реалізації web-застосунку магазину спортивних товарів. 
41 
3 ПРОГРАМНА РЕАЛІЗАЦІЯ WEB-ЗАСТОСУНКУ 
Програмна реалізація web-застосунку є одним із ключових етапів 
створення сучасної інформаційної системи, оскільки саме на цьому етапі 
відбувається практичне впровадження спроєктованої архітектури, 
функціональних модулів та користувацького інтерфейсу. Якість програмної 
реалізації безпосередньо впливає на продуктивність системи, стабільність її 
роботи, швидкість обробки даних та зручність взаємодії користувача із web-
ресурсом. Для створення сайту-візитівки магазину спортивних товарів було 
використано сучасні web-технології та програмні засоби, які дозволяють 
реалізувати адаптивний інтерфейс, модульну структуру системи та ефективну 
взаємодію між клієнтською та серверною частинами застосунку. 
У процесі програмної реалізації було створено frontend-частину web-
застосунку із використанням бібліотеки React, а також backend-частину на 
платформі Node.js та Express.js. Для зберігання даних використовується 
документоорієнтована база даних MongoDB, яка забезпечує гнучкість 
структури та високу швидкість обробки інформації. Особлива увага 
приділялася реалізації адаптивного дизайну, організації REST API, інтеграції 
компонентів системи та забезпеченню стабільної взаємодії між модулями 
програмного забезпечення. У даному розділі розглянуто особливості реалізації 
клієнтської та серверної частин web-застосунку, описано структуру програмних 
модулів, реалізацію каталогу товарів, адаптивного інтерфейсу та інтеграцію 
всіх компонентів системи в єдиний програмний продукт. 
3.1 Реалізація клієнтської частини 
Клієнтська частина web-застосунку забезпечує взаємодію користувача із 
системою та відповідає за відображення інтерфейсу, навігацію між сторінками, 
обробку подій та взаємодію із серверною частиною. Для реалізації frontend-
частини сайту-візитівки магазину спортивних товарів було використано 
сучасний технологічний стек, що включає HTML5, CSS3, JavaScript та 
бібліотеку React. 
42 
Однією з головних переваг використання бібліотеки React під час 
розробки клієнтської частини web-застосунку є компонентний підхід до 
побудови інтерфейсу користувача. Суть даного підходу полягає у тому, що 
кожен окремий елемент інтерфейсу реалізується у вигляді самостійного 
програмного компонента, який містить власну логіку роботи, структуру та 
стилі оформлення. Такий підхід дозволяє значно спростити процес створення 
складних web-застосунків, оскільки інтерфейс формується із набору 
незалежних модулів, які можуть використовуватись у різних частинах системи. 
Наприклад, такі елементи як хедер, футер, картка товару, меню навігації або 
форма зворотного зв’язку реалізуються як окремі React-компоненти. 
Використання компонентного підходу забезпечує повторне використання 
елементів інтерфейсу, що дозволяє зменшити обсяг програмного коду та 
спростити його підтримку. Крім того, модульна структура системи дає 
можливість швидко вносити зміни до окремих компонентів без необхідності 
зміни всієї структури web-застосунку. Це позитивно впливає на 
масштабованість системи та прискорює процес розробки програмного 
забезпечення. Завдяки React також забезпечується швидке оновлення сторінок 
без повного перезавантаження браузера, що покращує продуктивність web-
застосунку та підвищує комфорт роботи користувача із системою. 
Структура клієнтської частини web-застосунку включає декілька 
основних модулів. До них належать компоненти інтерфейсу користувача, 
сторінки web-застосунку, система маршрутизації, стилі оформлення та модулі 
взаємодії із серверною частиною. Компоненти інтерфейсу забезпечують 
відображення окремих елементів системи, таких як меню, картки товарів, 
кнопки, форми та інформаційні блоки. Сторінки web-застосунку формують 
основну структуру web-ресурсу та забезпечують логічний поділ інформації між 
різними розділами системи. 
Для організації переходів між сторінками використовується система 
маршрутизації React Router, яка дозволяє реалізувати SPA-застосунок без 
перезавантаження сторінок. Стилі оформлення реалізовані за допомогою CSS3 
та забезпечують сучасний адаптивний дизайн інтерфейсу. Модулі взаємодії із 
43 
сервером відповідають за надсилання HTTP-запитів до backend-частини 
системи та отримання даних через REST API. Для цього використовується 
бібліотека Axios, яка дозволяє ефективно організувати обмін інформацією між 
клієнтською та серверною частинами web-застосунку. 
Для організації навігації між сторінками використовується бібліотека 
React Router. Вона забезпечує можливість створення SPA-застосунку та 
дозволяє здійснювати перехід між сторінками без перезавантаження web-
ресурсу. 
Клієнтська частина web-застосунку складається з набору основних 
сторінок, кожна з яких виконує окремі функції та забезпечує взаємодію 
користувача із системою. Головною сторінкою web-застосунку є стартова 
сторінка сайту, яка містить основну інформацію про магазин спортивних 
товарів, рекламні банери, популярні категорії товарів, новинки та акційні 
пропозиції. Основним завданням головної сторінки є привернення уваги 
користувача та забезпечення швидкого доступу до основних розділів системи. 
Для покращення зручності використання на головній сторінці також розміщено 
навігаційне меню, блоки переваг магазину та коротку контактну інформацію. 
Каталог товарів призначений для відображення асортименту спортивної 
продукції у вигляді карток товарів із фотографіями, назвами, цінами та 
коротким описом. Для зручності користувачів реалізовано систему категорій, 
фільтрації та сортування товарів. Сторінка товару забезпечує детальний 
перегляд інформації про обрану продукцію, включаючи характеристики, опис, 
додаткові фотографії та ціну. Сторінка акцій використовується для 
відображення спеціальних пропозицій, знижок та новин магазину. Сторінка 
контактів містить контактну інформацію, адресу магазину, карту розташування 
та форму зворотного зв’язку для взаємодії користувача із адміністрацією сайту. 
Сторінка «Про нас» призначена для представлення інформації про діяльність 
магазину, його переваги, історію розвитку та основні напрямки роботи. Така 
структура клієнтської частини дозволяє забезпечити логічну організацію 
контенту та зручну навігацію web-застосунком. 
Компонентна структура frontend-частини наведена на рисунку 3.1. 
44 
 
Рисунок 3.1 – Структура компонентів клієнтської частини 
Для оформлення інтерфейсу використовуються CSS3, Flexbox та CSS 
Grid. Адаптивний дизайн дозволяє забезпечити коректне відображення web-
застосунку на персональних комп’ютерах, планшетах та смартфонах. 
Приклад реалізації React-компонента наведено нижче. Даний компонент 
ProductCard використовується для відображення окремої картки товару у 
каталозі web-застосунку. Компонент приймає об’єкт product через властивості 
(props) та динамічно відображає інформацію про товар, зокрема зображення, 
назву та ціну продукції. Завдяки використанню JSX структура компонента є 
зрозумілою та наближеною до HTML-розмітки, що спрощує процес розробки 
інтерфейсу користувача. 
Використання такого підходу дозволяє повторно застосовувати 
компонент для відображення великої кількості товарів без дублювання 
програмного коду. Кожна картка товару автоматично отримує необхідні дані із 
масиву товарів, що надходить із серверної частини через API. Крім того, 
компонентна структура React забезпечує просте масштабування системи та 
можливість подальшого розширення функціоналу, наприклад додавання кнопки 
45 
«До кошика», рейтингу товару або системи обраного. Приклад реалізації React-
компонента ProductCard наведено у лістингу 3.1. 
function ProductCard({ product }) { 
  return ( 
    <div className="product-card"> 
      <img src={product.image} alt={product.name} /> 
      <h3>{product.name}</h3> 
      <p>{product.price} грн</p> 
      <button>Детальніше</button> 
    </div> 
  ); 
} 
У даному компоненті використовується CSS-клас product-card, який 
відповідає за стилізацію картки товару. Елемент <img> відображає фотографію 
продукції, <h3> - назву товару, а тег <p> використовується для виведення ціни. 
Кнопка «Детальніше» забезпечує можливість переходу до сторінки детального 
перегляду товару. Така реалізація дозволяє створити зручний, структурований 
та адаптивний інтерфейс каталогу товарів web-застосунку. 
Для взаємодії із серверною частиною використовується бібліотека Axios. 
Вона забезпечує надсилання HTTP-запитів та отримання даних у форматі JSON. 
3.2 Реалізація серверної частини 
Серверна частина web-застосунку забезпечує обробку HTTP-запитів, 
взаємодію із базою даних та передачу інформації клієнтській частині. Для 
реалізації backend-частини було використано платформу Node.js та фреймворк 
Express.js. 
Для реалізації серверної частини web-застосунку було використано 
платформу Node.js, яка є одним із найбільш популярних середовищ для 
створення сучасних web-серверів та REST API. Однією з головних переваг 
Node.js є висока продуктивність, що забезпечується використанням 
асинхронної моделі обробки подій та неблокуючого вводу-виводу. Такий підхід 
дозволяє серверу ефективно обробляти велику кількість одночасних запитів 
46 
користувачів без значного навантаження на систему. Крім того, використання 
JavaScript як на клієнтській, так і на серверній стороні значно спрощує процес 
розробки програмного забезпечення та забезпечує єдиний підхід до написання 
програмного коду. 
Для організації серверної логіки та створення API використовується 
фреймворк Express.js. Даний фреймворк дозволяє спростити реалізацію 
маршрутизації, обробки HTTP-запитів та взаємодії між компонентами системи. 
Express.js забезпечує підтримку middleware-модулів, які використовуються для 
перевірки даних, обробки помилок, логування запитів та налаштування безпеки 
web-застосунку. Крім того, Express.js дозволяє ефективно реалізувати REST 
API для взаємодії клієнтської частини із сервером та базою даних. 
Структура серверної частини побудована за модульним принципом та 
включає декілька основних рівнів. Маршрути (Routes) відповідають за обробку 
URL-запитів та передачу керування відповідним контролерам. Контролери 
(Controllers) реалізують основну логіку обробки запитів та формування 
відповідей клієнту. Моделі (Models) забезпечують взаємодію із базою даних 
MongoDB та описують структуру даних системи. Middleware-модулі 
використовуються для проміжної обробки запитів, перевірки автентифікації, 
валідації даних та обробки помилок. Сервіси (Services) містять допоміжну 
бізнес-логіку та реалізують окремі функціональні можливості системи, що 
дозволяє забезпечити модульність, масштабованість та зручність підтримки 
програмного коду. 
Загальна структура backend-частини наведена на рисунку 3.2. Схема 
відображає основні компоненти серверної частини web-застосунку та 
взаємозв’язки між ними. У структурі показано процес обробки HTTP-запитів 
від клієнтської частини через маршрути (Routes), контролери (Controllers), 
сервіси (Services) та моделі (Models), які забезпечують взаємодію із базою 
даних MongoDB. Окремо представлено middleware-рівень, що відповідає за 
перевірку автентифікації, валідацію даних, логування запитів та обробку 
помилок. Така модульна організація backend-частини дозволяє забезпечити 
47 
масштабованість системи, спрощує підтримку програмного коду та підвищує 
ефективність взаємодії між компонентами web-застосунку. 
Загальна структура backend-частини наведена на рисунку 3.2. 
 
Рисунок 3.2 – Структура серверної частини web-застосунку 
Для реалізації API використовуються REST-запити: 
– GET — отримання даних; 
– POST — створення записів; 
– PUT — оновлення інформації; 
– DELETE — видалення даних. 
Приклад реалізації маршруту Express.js наведено нижче. Даний маршрут 
використовується для отримання списку товарів із бази даних MongoDB через 
HTTP GET-запит. У наведеному прикладі маршрут /products обробляє запит 
клієнтської частини та виконує звернення до моделі Product, яка відповідає за 
взаємодію із колекцією товарів у базі даних. Для виконання асинхронного 
запиту використовується конструкція async/await, що дозволяє забезпечити 
неблокуючу обробку операцій та підвищити продуктивність серверної частини 
web-застосунку. 
router.get('/products', async (req, res) => { 
48 
  const products = await Product.find(); 
  res.json(products); 
}); 
У процесі виконання маршруту сервер отримує запит від клієнта, виконує 
пошук усіх товарів у базі даних за допомогою методу find() та повертає 
результат у форматі JSON. Отримані дані використовуються клієнтською 
частиною для формування каталогу товарів та відображення інформації у web-
інтерфейсі. Використання REST API забезпечує ефективний обмін даними між 
frontend- та backend-частинами системи. 
Для організації додаткової обробки HTTP-запитів у серверній частині 
використовуються middleware-модулі. Middleware є проміжними функціями, які 
виконуються між отриманням запиту та формуванням відповіді сервером. Вони 
дозволяють реалізувати додаткову логіку обробки даних та забезпечують 
підвищення безпеки і стабільності роботи системи. 
У розробленому web-застосунку middleware використовуються для: 
– перевірки помилок під час виконання запитів; 
– логування HTTP-запитів користувачів; 
– валідації вхідних даних; 
– налаштування та обробки CORS-запитів. 
Перевірка помилок дозволяє забезпечити стабільну роботу серверної 
частини та коректне інформування користувача про можливі проблеми. 
Логування запитів використовується для моніторингу роботи системи та 
спрощення процесу налагодження програмного забезпечення. Валідація даних 
забезпечує перевірку правильності введеної інформації перед її збереженням у 
базі даних. Обробка CORS (Cross-Origin Resource Sharing) використовується 
для надання доступу клієнтській частині до серверних ресурсів при взаємодії 
між різними доменами або портами. Завдяки використанню middleware 
забезпечується підвищення надійності, безпеки та ефективності роботи web-
застосунку. 
Використання REST API дозволяє забезпечити ефективну взаємодію між 
frontend- та backend-частинами системи. 
49 
3.3 Реалізація адаптивного дизайну 
Однією з основних вимог до сучасних web-застосунків є підтримка різних 
типів пристроїв. Для забезпечення адаптивності інтерфейсу було використано 
технології Flexbox, CSS Grid та media queries. 
Адаптивний дизайн забезпечує: 
– коректне відображення сторінок; 
– автоматичне масштабування елементів; 
– зміну структури блоків залежно від розміру екрана; 
– оптимізацію інтерфейсу для мобільних пристроїв. 
Приклад використання media queries: 
@media (max-width: 768px) { 
  .products-grid { 
    grid-template-columns: 1fr; 
  } 
} 
Для побудови адаптивних блоків використовується CSS Grid: 
.products-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
} 
Для реалізації адаптивного дизайну у web-застосунку використовуються 
media queries — спеціальні CSS-конструкції, які дозволяють змінювати 
оформлення сторінки залежно від розміру екрана пристрою. Завдяки 
використанню media queries забезпечується коректне відображення інтерфейсу 
на персональних комп’ютерах, планшетах та мобільних пристроях. У 
наведеному прикладі використовується правило @media (max-width: 768px), яке 
активується у випадку, коли ширина екрана пристрою становить менше або 
дорівнює 768 пікселів. Це дозволяє автоматично змінювати структуру 
розміщення елементів для мобільних пристроїв та забезпечує зручність 
перегляду контенту користувачем. 
50 
@media (max-width: 768px) { 
  .products-grid { 
    grid-template-columns: 1fr; 
  } 
} 
У даному прикладі для блоку .products-grid змінюється кількість колонок 
сітки. Якщо на великих екранах товари відображаються у декілька колонок, то 
на мобільних пристроях усі елементи автоматично розташовуються в один 
стовпець. Це дозволяє уникнути горизонтальної прокрутки сторінки та 
покращує читабельність інтерфейсу. 
Для побудови адаптивної структури сторінки використовується 
технологія CSS Grid, яка забезпечує гнучке розташування елементів у вигляді 
сітки. CSS Grid дозволяє легко створювати багатоколонкові макети та 
автоматично адаптувати їх до різних розмірів екрана. 
.products-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
} 
У наведеному прикладі блок .products-grid реалізований як CSS Grid-
контейнер. Властивість grid-template-columns: repeat(4, 1fr) створює чотири 
рівні колонки, у яких відображаються картки товарів. Значення 1fr означає, що 
кожна колонка займає однакову частину доступного простору. Властивість gap: 
20px задає відступи між елементами сітки, що покращує візуальне сприйняття 
інтерфейсу та забезпечує більш сучасний вигляд сторінки. 
Поєднання CSS Grid та media queries дозволяє створити адаптивний 
інтерфейс web-застосунку, який автоматично підлаштовується під різні типи 
пристроїв та забезпечує комфортну взаємодію користувача із системою. 
Приклад адаптивного інтерфейсу web-застосунку наведено на рисунку 
3.3. 
51 
 
Рисунок 3.3 – Адаптивний інтерфейс web-застосунку 
Особлива увага приділялася: 
– оптимізації розміщення елементів; 
– зручності навігації; 
– швидкості завантаження сторінок; 
– підтримці мобільних браузерів. 
3.4 Реалізація функціоналу каталогу товарів 
Каталог товарів є одним із ключових модулів web-застосунку. Він 
забезпечує відображення товарів, категорій та детальної інформації про 
продукцію. 
Основними функціями каталогу є: 
– перегляд товарів; 
– фільтрація; 
– сортування; 
– пошук; 
– перегляд детальної інформації. 
Інформація про товари зберігається у базі даних MongoDB та передається 
через REST API у форматі JSON. 
52 
Приклад структури об’єкта товару: 
{ 
  "name": "Кросівки Nike Air Zoom", 
  "price": 2999, 
  "category": "Взуття", 
  "image": "nike.jpg" 
} 
Для відображення каталогу використовується React-компонент 
ProductList, який формує список карток товарів. 
Приклад каталогу товарів наведено на рисунку 3.4. 
 
Рисунок 3.4 – Реалізація каталогу товарів 
Для реалізації пошуку використовується фільтрація масиву товарів за 
назвою або категорією. 
3.5 Інтеграція компонентів системи 
На завершальному етапі розробки було виконано інтеграцію всіх 
компонентів web-застосунку в єдину систему. Інтеграція забезпечує взаємодію 
між: 
– клієнтською частиною; 
53 
– серверною частиною; 
– базою даних; 
– зовнішніми сервісами. 
Під час інтеграції було реалізовано: 
– обмін даними через REST API; 
– завантаження інформації з MongoDB; 
– обробку HTTP-запитів; 
– взаємодію із формою зворотного зв’язку. 
Схему інтеграції компонентів наведено на рисунку 3.5. 
 
Рисунок 3.5 – Інтеграція компонентів web-застосунку 
Для тестування взаємодії між компонентами використовувалися: 
– Postman; 
– Google Chrome DevTools; 
– MongoDB Compass. 
У результаті інтеграції було забезпечено: 
– стабільну роботу системи; 
– швидке завантаження сторінок; 
– коректне відображення інформації; 
– адаптивність інтерфейсу. 
54 
 
Висновки до розділу 3 
У третьому розділі було виконано програмну реалізацію web-застосунку 
магазину спортивних товарів із використанням сучасних web-технологій та 
інструментів розробки. У процесі роботи реалізовано клієнтську та серверну 
частини системи, організовано взаємодію між компонентами застосунку та 
забезпечено інтеграцію із базою даних MongoDB. Використання сучасного 
технологічного стеку дозволило створити адаптивний, функціональний та 
масштабований web-застосунок, який відповідає сучасним вимогам до web-
ресурсів. 
Клієнтська частина системи реалізована із використанням бібліотеки 
React, що забезпечило компонентний підхід до побудови інтерфейсу 
користувача. Завдяки використанню React вдалося реалізувати модульну 
структуру застосунку, повторне використання компонентів та швидке 
оновлення інтерфейсу без перезавантаження сторінки. Було створено основні 
сторінки web-застосунку, зокрема головну сторінку, каталог товарів, сторінку 
акцій, контакти та сторінку «Про нас». Для організації маршрутизації 
використано React Router, що дозволило забезпечити зручну навігацію між 
сторінками системи. 
Особливу увагу приділено реалізації адаптивного дизайну web-
застосунку. Для цього використано CSS Grid, Flexbox та media queries, які 
забезпечують коректне відображення інтерфейсу на різних типах пристроїв — 
персональних комп’ютерах, планшетах та смартфонах. Реалізація адаптивного 
інтерфейсу дозволила покращити зручність користування системою та 
забезпечити комфортну взаємодію користувача із web-застосунком незалежно 
від розміру екрана пристрою. 
Серверна частина системи реалізована на платформі Node.js із 
використанням фреймворку Express.js. У процесі розробки було створено REST 
API для взаємодії між frontend- та backend-частинами системи. Реалізовано 
маршрутизацію HTTP-запитів, контролери обробки даних, моделі взаємодії із 
базою даних та middleware-модулі для перевірки помилок, валідації даних, 
55 
логування запитів і забезпечення безпеки системи. Використання асинхронної 
моделі Node.js дозволило забезпечити ефективну обробку великої кількості 
запитів та підвищити продуктивність web-застосунку. 
Для зберігання інформації використано документоорієнтовану базу даних 
MongoDB. У базі даних реалізовано колекції товарів, категорій, користувачів та 
повідомлень з форми зворотного зв’язку. Інтеграція MongoDB із серверною 
частиною дозволила забезпечити швидкий доступ до даних, гнучкість 
структури інформації та можливість подальшого масштабування системи. 
У ході реалізації функціоналу каталогу товарів було створено механізми 
відображення товарів, фільтрації, сортування та пошуку продукції. Для 
взаємодії із серверною частиною використано бібліотеку Axios, що забезпечує 
обмін даними у форматі JSON через REST API. Також реалізовано інтеграцію 
всіх компонентів системи в єдину програмну архітектуру, що дозволило 
забезпечити стабільну роботу web-застосунку та ефективну взаємодію між його 
модулями. 
Отже, результати програмної реалізації підтверджують доцільність 
використання сучасних web-технологій для створення адаптивного та 
функціонального сайту-візитівки магазину спортивних товарів. Розроблений 
web-застосунок забезпечує зручне представлення інформації про товари, 
підтримує сучасний інтерфейс користувача та може бути використаний як 
основа для подальшого розвитку системи електронної комерції. 
56 
4 ТЕСТУВАННЯ ТА АНАЛІЗ РЕЗУЛЬТАТІВ РОБОТИ СИСТЕМИ 
Тестування програмного забезпечення є завершальним та одним із 
найважливіших етапів розробки web-застосунку, оскільки саме на цьому етапі 
виконується перевірка працездатності системи, коректності реалізації 
функціоналу та стабільності роботи всіх компонентів програмного продукту. 
Проведення тестування дозволяє виявити можливі помилки, оцінити 
продуктивність системи та визначити відповідність розробленого web-
застосунку поставленим вимогам. Для сучасних web-ресурсів особливо 
важливими є швидкість роботи, адаптивність інтерфейсу, стабільність взаємодії 
між клієнтською та серверною частинами, а також коректне функціонування 
REST API та бази даних. 
У даному розділі проведено тестування та аналіз результатів роботи 
сайту-візитівки магазину спортивних товарів. Виконано перевірку клієнтської 
та серверної частин системи, протестовано адаптивність інтерфейсу на різних 
типах пристроїв, працездатність REST API та взаємодію із базою даних 
MongoDB. Окрему увагу приділено аналізу продуктивності web-застосунку, 
швидкості завантаження сторінок та стабільності обробки HTTP-запитів. 
Результати проведеного тестування дозволяють оцінити ефективність 
використаних технологій та підтвердити працездатність розробленої системи 
для практичного використання у сфері електронної комерції. 
4.1 Мета та задачі тестування web-застосунку 
Тестування програмного забезпечення є важливим етапом розробки web-
застосунку, який дозволяє перевірити коректність роботи системи, виявити 
помилки та оцінити стабільність функціонування програмного продукту. 
Основною метою тестування сайту-візитівки магазину спортивних товарів є 
перевірка працездатності клієнтської та серверної частин системи, коректності 
взаємодії між компонентами та відповідності реалізованого функціоналу 
поставленим вимогам. 
У процесі тестування виконувалася перевірка: 
57 
– коректності відображення сторінок; 
– працездатності навігації; 
– функціонування каталогу товарів; 
– роботи REST API; 
– адаптивності інтерфейсу; 
– швидкості завантаження сторінок; 
– взаємодії із базою даних; 
– обробки помилок та некоректних запитів. 
Основними задачами тестування є: 
– виявлення програмних помилок; 
– перевірка стабільності роботи web-застосунку; 
– оцінка продуктивності системи; 
– аналіз коректності роботи API; 
– перевірка адаптивності інтерфейсу на різних пристроях. 
Загальну схему процесу тестування наведено на рисунку 4.1. 
 
Рисунок 4.1 – Процес тестування web-застосунку 
Проведення тестування дозволяє забезпечити стабільну роботу web-
застосунку та покращити якість взаємодії користувача із системою. 
 
 
 
58 
4.2 Тестування клієнтської частини системи 
Тестування клієнтської частини проводилося з метою перевірки 
коректності роботи інтерфейсу користувача, адаптивності дизайну та 
функціонування React-компонентів. 
У процесі тестування клієнтської частини web-застосунку виконувалася 
комплексна перевірка працездатності інтерфейсу користувача та коректності 
функціонування основних елементів системи. Одним із головних етапів 
тестування була перевірка правильності відображення сторінок у web-браузері. 
Під час тестування аналізувалося коректне відображення тексту, графічних 
елементів, кнопок, меню навігації та блоків каталогу товарів. Особлива увага 
приділялася відсутності помилок верстки, некоректного масштабування 
елементів та порушення структури сторінки при зміні розміру екрана. 
Також перевірялася коректність роботи навігації web-застосунку. У 
процесі тестування було проаналізовано роботу меню, переходів між 
сторінками та маршрутизації React Router. Виконувалася перевірка переходів 
до сторінок каталогу товарів, акцій, контактів та інформаційних сторінок. 
Додатково тестувалася працездатність кнопок та форм зворотного зв’язку, 
включаючи правильність обробки подій натискання, введення даних та 
передачі інформації на серверну частину системи. 
Важливим етапом тестування була перевірка адаптивності інтерфейсу. 
Для цього аналізувалася коректність автоматичної зміни структури сторінки 
залежно від розміру екрана пристрою. Проводилася перевірка розташування 
блоків, масштабування зображень, роботи адаптивного меню та читабельності 
тексту на різних типах пристроїв. Крім того, оцінювалася швидкість 
завантаження сторінок та коректність відображення каталогу товарів при 
отриманні даних із серверної частини через REST API. 
Тестування web-застосунку проводилося у сучасних web-браузерах, 
зокрема: 
– Google Chrome; 
– Mozilla Firefox; 
– Microsoft Edge. 
59 
Використання декількох браузерів дозволило перевірити 
кросбраузерність системи та переконатися у коректному відображенні 
інтерфейсу незалежно від програмного середовища користувача. У процесі 
тестування особлива увага приділялася сумісності CSS-стилів, JavaScript-
функціоналу та роботі адаптивного дизайну. 
Для перевірки адаптивності web-застосунку використовувалися: 
– режим адаптивного перегляду браузера; 
– смартфони; 
– планшети; 
– персональні комп’ютери. 
Режим адаптивного перегляду браузера дозволив виконати емуляцію 
різних типів пристроїв та протестувати роботу web-застосунку при різних 
роздільних здатностях екрана. Додаткове тестування на реальних смартфонах 
та планшетах дозволило оцінити зручність користування системою, швидкість 
роботи інтерфейсу та коректність взаємодії сенсорних елементів. Отримані 
результати підтвердили коректну роботу web-застосунку на різних типах 
пристроїв та стабільність адаптивного дизайну системи. 
Приклад тестування адаптивного інтерфейсу наведено на рисунку 4.2. 
 
Рисунок 4.2 – Тестування адаптивного інтерфейсу web-застосунку 
60 
У результаті тестування було встановлено, що web-застосунок коректно 
відображається на різних типах пристроїв та підтримує сучасні web-браузери. 
4.3 Тестування серверної частини та REST API 
Тестування серверної частини здійснювалося для перевірки коректності 
роботи REST API, взаємодії із базою даних та обробки HTTP-запитів. 
Основними етапами тестування backend-частини були: 
– перевірка GET-запитів; 
– перевірка POST-запитів; 
– тестування взаємодії із MongoDB; 
– перевірка обробки помилок; 
– тестування middleware. 
Для тестування API використовувався програмний засіб Postman. Він 
дозволяє надсилати HTTP-запити до сервера та аналізувати відповіді системи. 
У процесі тестування були перевірені такі маршрути: 
– /products; 
– /categories; 
– /contacts; 
– /promotions. 
Приклад тестування REST API наведено на рисунку 4.3. 
61 
 
Рисунок 4.3 – Тестування REST API у Postman 
Під час тестування було встановлено, що серверна частина коректно 
обробляє HTTP-запити та забезпечує передачу даних у форматі JSON. 
4.4 Аналіз продуктивності системи 
Для оцінки ефективності роботи web-застосунку було проведено аналіз 
продуктивності системи.  
Під час тестування були отримані такі результати: 
– середній час завантаження сторінки — 1,5–2 секунди; 
– середній час відповіді сервера — до 300 мс; 
– коректна робота API при багаторазових запитах; 
– стабільне відображення інтерфейсу без помилок. 
Аналіз продуктивності системи є важливим етапом тестування web-
застосунку, оскільки дозволяє оцінити швидкість роботи програмного 
забезпечення, ефективність обробки запитів та стабільність функціонування 
системи при взаємодії користувача із web-ресурсом. Для сучасних web-
застосунків високий рівень продуктивності є одним із ключових факторів, що 
впливає на комфорт користування системою, швидкість доступу до інформації 
та загальну ефективність роботи web-сайту. 
62 
У процесі аналізу продуктивності оцінювалися такі показники: 
– швидкість завантаження сторінок; 
– час відповіді сервера; 
– швидкість обробки REST API-запитів; 
– стабільність роботи клієнтської частини; 
– швидкість відображення інтерфейсу користувача; 
– ефективність завантаження ресурсів. 
Для проведення тестування використовувалися сучасні інструменти 
аналізу продуктивності: 
– Google Lighthouse; 
– Chrome DevTools; 
– Postman. 
Google Lighthouse дозволив оцінити основні характеристики web-
застосунку, зокрема продуктивність, доступність, SEO-оптимізацію та 
відповідність сучасним рекомендаціям web-розробки. За результатами 
тестування web-застосунок отримав високі показники продуктивності, що 
свідчить про ефективне використання React, Node.js та MongoDB у процесі 
розробки системи. 
Під час тестування встановлено, що середній час завантаження сторінки 
становить приблизно 1,5–2 секунди, а середній час відповіді сервера не 
перевищує 300 мс. Такі показники забезпечують комфортну взаємодію 
користувача із web-застосунком та дозволяють швидко отримувати необхідну 
інформацію із сервера. Крім того, система стабільно працює при багаторазових 
HTTP-запитах та не виявляє критичних помилок під час обробки даних. 
Особлива увага приділялася аналізу продуктивності на різних типах 
пристроїв. Тестування показало, що web-застосунок коректно працює як на 
персональних комп’ютерах, так і на мобільних пристроях. Завдяки 
використанню адаптивного дизайну та оптимізації CSS- і JavaScript-файлів 
вдалося забезпечити високу швидкість завантаження сторінок навіть при 
використанні мобільного інтернет-з’єднання. 
63 
Результати аналізу продуктивності web-застосунку наведено на рисунку 
4.4. Як видно із результатів тестування, розроблена система демонструє 
високий рівень продуктивності, стабільність роботи та ефективну обробку 
HTTP-запитів. Отримані показники підтверджують доцільність використання 
сучасних web-технологій для створення адаптивних та функціональних web-
застосунків електронної комерції. 
Результати аналізу продуктивності наведено на рисунку 4.4. 
 
Рисунок 4.4 – Результати аналізу продуктивності web-застосунку 
Проведений аналіз показав, що використання React, Node.js та MongoDB 
дозволяє забезпечити високу швидкість роботи системи та ефективну обробку 
даних. 
4.5 Аналіз результатів роботи системи 
Після завершення тестування було проведено аналіз результатів роботи 
web-застосунку. У ході дослідження оцінювалися: 
– стабільність роботи системи; 
– коректність функціонування модулів; 
– зручність користувацького інтерфейсу; 
– ефективність взаємодії між компонентами; 
64 
– адаптивність web-застосунку. 
У результаті тестування встановлено, що: 
– усі основні функції системи працюють коректно; 
– каталог товарів відображається без помилок; 
– REST API забезпечує стабільний обмін даними; 
– адаптивний дизайн коректно працює на різних пристроях; 
– серверна частина стабільно обробляє HTTP-запити. 
Приклад роботи готового web-застосунку наведено на рисунку 4.5. 
 
Рисунок 4.5 – Інтерфейс готового web-застосунку 
Проведене тестування підтвердило працездатність та ефективність 
розробленої системи. Отримані результати свідчать про можливість 
практичного використання web-застосунку для представлення магазину 
спортивних товарів у мережі Інтернет. 
Висновки до розділу 4 
У четвертому розділі було проведено комплексне тестування та аналіз 
результатів роботи web-застосунку магазину спортивних товарів. У процесі 
тестування виконано перевірку клієнтської та серверної частин системи, 
адаптивності інтерфейсу, коректності роботи REST API та взаємодії із базою 
65 
даних MongoDB. Проведене тестування дозволило оцінити стабільність 
функціонування web-застосунку, ефективність використаних технологій та 
відповідність реалізованого програмного забезпечення поставленим вимогам. 
Під час тестування клієнтської частини було перевірено правильність 
відображення сторінок у сучасних web-браузерах, коректність роботи навігації, 
функціонування кнопок та форм, а також адаптивність інтерфейсу на різних 
типах пристроїв. Результати тестування підтвердили, що web-застосунок 
коректно працює у браузерах Google Chrome, Mozilla Firefox та Microsoft Edge. 
Крім того, система стабільно функціонує на персональних комп’ютерах, 
планшетах та смартфонах, забезпечуючи зручну взаємодію користувача із web-
ресурсом. 
У процесі тестування серверної частини було виконано перевірку REST 
API та механізмів взаємодії із базою даних MongoDB. За допомогою 
програмного засобу Postman протестовано основні HTTP-запити та маршрути 
системи, зокрема отримання списку товарів, категорій та акційних пропозицій. 
Результати тестування показали, що серверна частина коректно обробляє 
HTTP-запити, забезпечує стабільний обмін даними у форматі JSON та 
підтримує ефективну взаємодію між frontend- та backend-компонентами 
системи. 
Окрему увагу приділено аналізу продуктивності web-застосунку. Для 
оцінки швидкості роботи системи використовувалися інструменти Google 
Lighthouse, Chrome DevTools та Postman. У результаті тестування встановлено, 
що web-застосунок має високі показники продуктивності, забезпечує швидке 
завантаження сторінок та стабільну роботу серверної частини навіть при 
багаторазових запитах користувачів. Середній час завантаження сторінок 
становить приблизно 1,5–2 секунди, а час відповіді сервера не перевищує 300 
мс, що відповідає сучасним вимогам до web-застосунків електронної комерції. 
Проведений аналіз також підтвердив ефективність використання React, 
Node.js та MongoDB у процесі створення web-застосунку. Використання 
компонентного підходу React забезпечило швидке оновлення інтерфейсу та 
зручність підтримки програмного коду. Застосування Node.js та Express.js 
66 
дозволило реалізувати продуктивну серверну частину із підтримкою REST API, 
а використання MongoDB забезпечило гнучкість структури даних та ефективну 
роботу із інформацією про товари й користувачів. 
За результатами тестування встановлено, що всі основні функціональні 
модулі системи працюють коректно та відповідають поставленим вимогам. 
Web-застосунок забезпечує стабільне відображення каталогу товарів, швидку 
навігацію між сторінками, адаптивність інтерфейсу та ефективний обмін 
даними між компонентами системи. Розроблений сайт-візитівка може бути 
використаний як готовий web-ресурс для представлення магазину спортивних 
товарів у мережі Інтернет, а також як основа для подальшого розширення 
функціоналу та створення повноцінної системи електронної комерції. 
67 
ВИСНОВКИ 
У результаті виконання кваліфікаційної роботи бакалавра було 
розроблено web-застосунок «Сайт-візитівка магазину продажу спортивних 
товарів», який призначений для представлення інформації про товари, 
популяризації спортивної продукції та забезпечення зручної взаємодії 
користувачів із web-ресурсом. У процесі виконання роботи проведено аналіз 
сучасних web-технологій, методів створення адаптивних web-застосунків та 
особливостей організації сайтів електронної комерції. 
У першому розділі роботи було виконано аналіз предметної області та 
сучасних технологій web-розробки. Досліджено особливості функціонування 
сучасних web-магазинів спортивних товарів, проаналізовано тенденції розвитку 
електронної комерції та визначено основні вимоги до структури й функціоналу 
web-застосунку. Розглянуто сучасні технології frontend- та backend-розробки, 
зокрема HTML5, CSS3, JavaScript, React, Node.js, Express.js та MongoDB. 
Проведений аналіз дозволив обґрунтувати вибір технологічного стеку для 
реалізації системи. 
У другому розділі виконано проєктування web-застосунку. Розроблено 
загальну архітектуру системи, структуру клієнтської та серверної частин, UML-
діаграми та структуру бази даних. Спроєктовано основні сторінки web-
застосунку, включаючи головну сторінку, каталог товарів, сторінку акцій, 
контакти та інформаційні сторінки. У процесі проєктування особлива увага 
приділялася адаптивності інтерфейсу, зручності навігації та модульності 
системи. 
У третьому розділі було реалізовано програмну частину web-застосунку 
із використанням сучасних web-технологій. Клієнтська частина створена за 
допомогою бібліотеки React із використанням компонентного підходу до 
побудови інтерфейсу користувача. Серверна частина реалізована на платформі 
Node.js із використанням фреймворку Express.js. Для зберігання даних 
використано документоорієнтовану базу даних MongoDB. У процесі розробки 
68 
реалізовано REST API для взаємодії між frontend- та backend-компонентами 
системи, а також адаптивний дизайн, що забезпечує коректне відображення 
web-застосунку на різних типах пристроїв. 
У четвертому розділі проведено тестування та аналіз результатів роботи 
системи. Виконано перевірку працездатності клієнтської та серверної частин, 
тестування REST API та аналіз продуктивності web-застосунку. У результаті 
тестування підтверджено коректність роботи основних функціональних 
модулів системи, стабільність роботи серверної частини та адаптивність 
інтерфейсу. Аналіз продуктивності показав достатню швидкість завантаження 
сторінок і ефективну обробку HTTP-запитів. 
У процесі виконання кваліфікаційної роботи було досягнуто поставленої 
мети — розроблено адаптивний та функціональний web-застосунок для 
магазину спортивних товарів. Розроблена система забезпечує зручне 
представлення інформації про товари, підтримує сучасний інтерфейс 
користувача та може бути використана як основа для подальшого розвитку 
повноцінної системи електронної комерції. 
Практичне значення отриманих результатів полягає у можливості 
використання розробленого web-застосунку для представлення магазину 
спортивних товарів у мережі Інтернет, а також у навчальному процесі 
спеціальності 122 «Комп’ютерні науки» під час вивчення дисциплін, 
пов’язаних із web-програмуванням та розробкою інформаційних систем. 
Перспективами подальшого розвитку системи є: 
– реалізація повноцінного кошика покупця; 
– інтеграція платіжних систем; 
– створення системи реєстрації та авторизації користувачів; 
– впровадження адміністративної панелі керування товарами; 
– інтеграція системи онлайн-замовлень; 
– оптимізація SEO та підвищення рівня інформаційної безпеки web-
застосунку. 
69 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Фленаган Д. JavaScript. Повне керівництво / Д. Фленаган. – 7-ме вид. – 
Київ : Видавнича група BHV, 2021. – 704 с.  
2. Duckett J. HTML and CSS: Design and Build Websites / J. Duckett. – 
Indianapolis : Wiley, 2014. – 490 p.  
3. Freeman E. Head First HTML and CSS / E. Freeman, E. Robson. – Sebastopol : 
O’Reilly Media, 2012. – 768 p.  
4. Banks A. Learning React: Modern Patterns for Developing React Apps / A. 
Banks, E. Porcello. – 2nd ed. – Sebastopol : O’Reilly Media, 2020. – 310 p.  
5. Haverbeke M. Eloquent JavaScript / M. Haverbeke. – 3rd ed. – San Francisco : 
No Starch Press, 2018. – 472 p.  
6. Tilkov S. Node.js in Practice / S. Tilkov, T. Vinoski. – Shelter Island : Manning 
Publications, 2014. – 336 p.  
7. Holmes S. Express in Action: Writing, Building, and Testing Node.js 
Applications / S. Holmes. – Shelter Island : Manning Publications, 2016. – 352 p.  
8. Chodorow K. MongoDB: The Definitive Guide / K. Chodorow. – 3rd ed. – 
Sebastopol : O’Reilly Media, 2019. – 514 p.  
9. Пасічник В. В. Організація баз даних та знань : підручник / В. В. Пасічник, 
В. А. Резніченко. – Київ : Видавнича група BHV, 2020. – 384 с.  
10. Семеріков С. О. Інформаційні технології та web-програмування : 
навчальний посібник / С. О. Семеріков. – Кривий Ріг : КНУ, 2021. – 412 с.  
11. Таненбаум Е. С. Комп’ютерні мережі / Е. С. Таненбаум, Д. Везеролл. – 6-те 
вид. – Київ : Видавнича група BHV, 2020. – 960 с.  
12. Krug S. Don’t Make Me Think: A Common Sense Approach to Web Usability / 
S. Krug. – 3rd ed. – Berkeley : New Riders, 2014. – 216 p.  
13. Nielsen J. Usability Engineering / J. Nielsen. – San Francisco : Morgan 
Kaufmann, 1994. – 362 p. 
14. MDN Web Docs [Електронний ресурс]. – Режим доступу: 
https://developer.mozilla.org/  
70 
15. React Documentation [Електронний ресурс]. – Режим доступу: 
https://react.dev/  
16. Node.js Documentation [Електронний ресурс]. – Режим доступу: 
https://nodejs.org/  
17. Express.js Documentation [Електронний ресурс]. – Режим доступу: 
https://expressjs.com/  
18. MongoDB Documentation [Електронний ресурс]. – Режим доступу: 
https://www.mongodb.com/docs/  
19. W3Schools Online Web Tutorials [Електронний ресурс]. – Режим доступу: 
https://www.w3schools.com/  
20. Bootstrap Documentation [Електронний ресурс]. – Режим доступу: 
https://getbootstrap.com/  
21. Postman API Platform [Електронний ресурс]. – Режим доступу: 
https://www.postman.com/  
22. Google Lighthouse Documentation [Електронний ресурс]. – Режим доступу: 
https://developer.chrome.com/docs/lighthouse/  
23. Mozilla Developer Network. CSS Grid Layout [Електронний ресурс]. – 
Режим доступу: https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_grid_layout  
24. Mozilla Developer Network. Flexbox [Електронний ресурс]. – Режим 
доступу: https://developer.mozilla.org/en-
US/docs/Learn/CSS/CSS_layout/Flexbox  
25. ECMAScript 2023 Language Specification [Електронний ресурс]. – Режим 
доступу: https://tc39.es/ecma262/  
71 
 
ДОДАТОК А 
 
 
 
        Затверджую               
Зав. кафедри КНСА, 
                                              _________ Юрій ТРИУС 
«____»____________2026 р.                                                                                                                                                                              
 
 
 
 
 
 
 
САЙТ-ВІЗИТІВКА МАГАЗИНУ ПРОДАЖУ СПОРТИВНИХ ТОВАРІВ  
 
 
Специфікація  
482.ЧДТУ.62283-01  
 
Листів 2 
 
 
 
 
 
 
 
 
Розробник                          ____________________                 Валуєв С.В. 
 
Керівник                             ____________________                Дяченко П.В. 
 
 
 
 
 
 
 
 
 
Черкаси – 2026
72 
 
482.ЧДТУ. 62283-01 
Позначення Найменування Примітка 
   
   
 Документація  
   
482.ЧДТУ. 62283-01    12 01 Лістинг коду програми  
482.ЧДТУ. 62283-01    34 01 Інструкція користувача  
482.ЧДТУ. 62283-01    90 01 Схеми підключень  
 482.ЧДТУ. 62283-01    91 01 Результати тестування  
системи 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
73 
 
ДОДАТОК Б 
 
 
 
 
 
 
 
 
 
 
 
САЙТ-ВІЗИТІВКА МАГАЗИНУ ПРОДАЖУ СПОРТИВНИХ ТОВАРІВ  
 
 
 
 
 
ЛІСТИНГ КОДУ ПРОГРАМИ  
482. ЧДТУ 62283-01 12 01 
 
Листів 4 
 
 
 
 
 
 
 
 
Розробник: Валуєв С.В. 
 
  
Керівник: Дяченко П.В. 
 
 
 
 
 
 
 
 
 
74 
Черкаси – 2026 
import React, { useMemo, useState } from "react"; 
import { Search, ShoppingCart, Heart, User, Menu, X, Truck, ShieldCheck, RotateCcw, 
Headphones, Star, MapPin, Phone, Mail } from "lucide-react"; 
 
const categories = [ 
  { id: "all", name: "Усі товари" }, 
  { id: "shoes", name: "Взуття" }, 
  { id: "clothes", name: "Одяг" }, 
  { id: "equipment", name: "Тренажери" }, 
  { id: "accessories", name: "Аксесуари" }, 
  { id: "nutrition", name: "Харчування" }, 
]; 
 
const products = [ 
  { 
    id: 1, 
    name: "Кросівки Nike Air Zoom", 
    category: "shoes", 
    categoryName: "Взуття", 
    price: 2499, 
    oldPrice: 3199, 
    rating: 4.8, 
    image: "https://images.unsplash.com/photo-1542291026-
7eec264c27ff?q=80&w=900&auto=format&fit=crop", 
    badge: "-20%", 
  }, 
  { 
    id: 2, 
    name: "Футболка Adidas Run", 
    category: "clothes", 
    categoryName: "Одяг", 
    price: 799, 
    oldPrice: 999, 
    rating: 4.6, 
    image: "https://images.unsplash.com/photo-1523398002811-
999ca8dec234?q=80&w=900&auto=format&fit=crop", 
    badge: "Хіт", 
  }, 
  { 
    id: 3, 
    name: "Гантелі розбірні 20 кг", 
    category: "equipment", 
    categoryName: "Тренажери", 
    price: 2699, 
    oldPrice: 2999, 
    rating: 4.7, 
    image: "https://images.unsplash.com/photo-1517836357463-
d25dfeac3438?q=80&w=900&auto=format&fit=crop", 
    badge: "Новинка", 
  }, 
  { 
    id: 4, 
    name: "Спортивна сумка Sport Pro", 
75 
    category: "accessories", 
    categoryName: "Аксесуари", 
    price: 1299, 
    oldPrice: 1599, 
    rating: 4.5, 
    image: "https://images.unsplash.com/photo-1590874103328-
eac38a683ce7?q=80&w=900&auto=format&fit=crop", 
    badge: "-15%", 
  }, 
  { 
    id: 5, 
    name: "М’яч футбольний Select", 
    category: "equipment", 
    categoryName: "Тренажери", 
    price: 899, 
    oldPrice: 1199, 
    rating: 4.4, 
    image: "https://images.unsplash.com/photo-1614632537190-
23e4146777db?q=80&w=900&auto=format&fit=crop", 
    badge: "Акція", 
  }, 
  { 
    id: 6, 
    name: "Шейкер 700 мл", 
    category: "nutrition", 
    categoryName: "Харчування", 
    price: 299, 
    oldPrice: 399, 
    rating: 4.3, 
    image: "https://images.unsplash.com/photo-1579722820308-
d74e571900a9?q=80&w=900&auto=format&fit=crop", 
    badge: "Топ", 
  }, 
]; 
 
function Header({ currentPage, setCurrentPage }) { 
  const [open, setOpen] = useState(false); 
  const nav = [ 
    ["home", "Головна"], 
    ["catalog", "Каталог"], 
    ["promotions", "Акції"], 
    ["about", "Про нас"], 
    ["contacts", "Контакти"], 
  ]; 
 
  const go = (page) => { 
    setCurrentPage(page); 
    setOpen(false); 
    window.scrollTo({ top: 0, behavior: "smooth" }); 
  }; 
 
  return ( 
    <header className="sticky top-0 z-50 border-b bg-white/95 backdrop-blur"> 
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4"> 
76 
        <button onClick={() => go("home")} className="flex items-center gap-3"> 
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-red-
600 text-xl font-black text-white shadow-sm">S</div> 
          <div className="text-left leading-tight"> 
            <div className="text-xl font-black tracking-tight">SPORT</div> 
            <div className="text-xs font-bold tracking-[0.3em] text-red-
600">STORE</div> 
          </div> 
        </button> 
 
        <nav className="hidden items-center gap-7 lg:flex"> 
          {nav.map(([id, label]) => ( 
            <button 
              key={id} 
              onClick={() => go(id)} 
              className={`text-sm font-semibold transition hover:text-red-600 ${currentPage 
=== id ? "text-red-600" : "text-gray-700"}`} 
            > 
              {label} 
            </button> 
          ))} 
        </nav> 
 
        <div className="hidden items-center gap-4 lg:flex"> 
          <div className="flex items-center gap-2 rounded-2xl border px-3 py-2 text-sm 
text-gray-500"> 
            <Search size={18} /> 
            <span>Пошук товарів...</span> 
          </div> 
          <User size={22} /> 
          <Heart size={22} /> 
          <div className="relative"> 
            <ShoppingCart size={23} /> 
            <span className="absolute -right-2 -top-2 rounded-full bg-red-600 px-1.5 text-
xs font-bold text-white">3</span> 
          </div> 
        </div> 
 
        <button onClick={() => setOpen(!open)} className="lg:hidden"> 
          {open ? <X /> : <Menu />} 
        </button> 
      </div> 
 
      {open && ( 
        <div className="border-t bg-white px-4 py-4 lg:hidden"> 
          <div className="mx-auto flex max-w-7xl flex-col gap-3"> 
            {nav.map(([id, label]) => ( 
              <button key={id} onClick={() => go(id)} className="rounded-xl px-3 py-2 
text-left font-semibold hover:bg-gray-100"> 
                {label} 
              </button> 
            ))} 
          </div> 
        </div> 
77 
      )} 
    </header> 
  ); 
} 
 
function Hero({ setCurrentPage }) { 
  return ( 
    <section className="mx-auto max-w-7xl px-4 pt-6"> 
      <div className="relative overflow-hidden rounded-[2rem] bg-neutral-950 shadow-
xl"> 
        <div className="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-
transparent" /> 
        <img 
          className="absolute inset-0 h-full w-full object-cover opacity-70" 
          src="https://images.unsplash.com/photo-1517963879433-
6ad2b056d712?q=80&w=1600&auto=format&fit=crop" 
          alt="Спортсмен під час тренування" 
        /> 
        <div className="relative z-10 max-w-2xl px-8 py-20 text-white md:px-14 md:py-
28"> 
          <p className="mb-4 text-sm font-bold uppercase tracking-[0.3em] text-red-
400">Нова колекція</p> 
          <h1 className="mb-5 text-4xl font-black leading-tight md:text-6xl">Твій стиль. 
Твоя перемога.</h1> 
          <p className="mb-8 max-w-lg text-lg text-gray-200">Якісні спортивні товари 
для тренувань, активного способу життя та щоденних перемог.</p> 
          <button 
            onClick={() => setCurrentPage("catalog")} 
            className="rounded-2xl bg-red-600 px-7 py-4 font-bold text-white shadow-lg 
transition hover:bg-red-700" 
          > 
            Перейти до каталогу 
          </button> 
        </div> 
      </div> 
    </section> 
  ); 
} 
 
function Benefits() { 
  const items = [ 
    [Truck, "Швидка доставка", "Доставка по всій Україні"], 
    [ShieldCheck, "Гарантія якості", "Офіційна гарантія на товари"], 
    [RotateCcw, "Легке повернення", "Повернення протягом 14 днів"], 
    [Headphones, "Підтримка 24/7", "Ми завжди на зв’язку"], 
  ]; 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-8"> 
      <div className="grid gap-4 rounded-[2rem] border bg-white p-5 shadow-sm 
md:grid-cols-4"> 
        {items.map(([Icon, title, desc]) => ( 
          <div key={title} className="flex items-center gap-4 rounded-2xl p-3"> 
            <Icon className="text-red-600" size={32} /> 
            <div> 
78 
              <div className="font-bold">{title}</div> 
              <div className="text-sm text-gray-500">{desc}</div> 
            </div> 
          </div> 
        ))} 
      </div> 
    </section> 
  ); 
} 
 
function CategoryCards({ setCategory, setCurrentPage }) { 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-6"> 
      <div className="mb-5 flex items-center justify-between"> 
        <h2 className="text-2xl font-black">Категорії товарів</h2> 
        <button onClick={() => setCurrentPage("catalog")} className="font-semibold 
text-red-600">Усі категорії →</button> 
      </div> 
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5"> 
        {categories.slice(1).map((cat) => ( 
          <button 
            key={cat.id} 
            onClick={() => { 
              setCategory(cat.id); 
              setCurrentPage("catalog"); 
            }} 
            className="rounded-[1.5rem] border bg-white p-6 text-left shadow-sm transition 
hover:-translate-y-1 hover:shadow-lg" 
          > 
            <div className="mb-4 h-12 w-12 rounded-2xl bg-red-50" /> 
            <div className="text-lg font-bold">{cat.name}</div> 
            <div className="text-sm text-gray-500">Переглянути товари</div> 
          </button> 
        ))} 
      </div> 
    </section> 
  ); 
} 
 
function ProductCard({ product }) { 
  return ( 
    <article className="group overflow-hidden rounded-[1.5rem] border bg-white 
shadow-sm transition hover:-translate-y-1 hover:shadow-xl"> 
      <div className="relative aspect-[4/3] overflow-hidden bg-gray-50"> 
        <img src={product.image} alt={product.name} className="h-full w-full object-
cover transition duration-300 group-hover:scale-105" /> 
        <span className="absolute left-4 top-4 rounded-full bg-red-600 px-3 py-1 text-xs 
font-bold text-white">{product.badge}</span> 
        <button className="absolute right-4 top-4 rounded-full bg-white p-2 shadow-
sm"><Heart size={18} /></button> 
      </div> 
      <div className="p-5"> 
        <div className="mb-1 text-sm text-gray-500">{product.categoryName}</div> 
        <h3 className="min-h-12 text-lg font-black">{product.name}</h3> 
79 
        <div className="mb-3 mt-2 flex items-center gap-1 text-sm text-amber-500"> 
          {Array.from({ length: 5 }).map((_, i) => <Star key={i} size={15} 
fill="currentColor" />)} 
          <span className="ml-2 text-gray-500">{product.rating}</span> 
        </div> 
        <div className="mb-4 flex items-end gap-3"> 
          <span className="text-xl font-black text-red-
600">{product.price.toLocaleString("uk-UA")} грн</span> 
          <span className="text-sm text-gray-400 line-
through">{product.oldPrice.toLocaleString("uk-UA")} грн</span> 
        </div> 
        <button className="w-full rounded-2xl bg-red-600 py-3 font-bold text-white 
transition hover:bg-red-700">Детальніше</button> 
      </div> 
    </article> 
  ); 
} 
 
function ProductGrid({ selectedCategory, setSelectedCategory }) { 
  const [query, setQuery] = useState(""); 
  const filtered = useMemo(() => { 
    return products.filter((product) => { 
      const byCategory = selectedCategory === "all" || product.category === 
selectedCategory; 
      const byQuery = product.name.toLowerCase().includes(query.toLowerCase()); 
      return byCategory && byQuery; 
    }); 
  }, [selectedCategory, query]); 
 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-8"> 
      <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-
between"> 
        <div> 
          <h2 className="text-3xl font-black">Каталог товарів</h2> 
          <p className="text-gray-500">Знайдено товарів: {filtered.length}</p> 
        </div> 
        <div className="flex flex-col gap-3 sm:flex-row"> 
          <div className="flex items-center gap-2 rounded-2xl border bg-white px-4 py-
3"> 
            <Search size={18} /> 
            <input value={query} onChange={(e) => setQuery(e.target.value)} 
placeholder="Пошук..." className="outline-none" /> 
          </div> 
          <select value={selectedCategory} onChange={(e) => 
setSelectedCategory(e.target.value)} className="rounded-2xl border bg-white px-4 py-3 
outline-none"> 
            {categories.map((cat) => <option key={cat.id} 
value={cat.id}>{cat.name}</option>)} 
          </select> 
        </div> 
      </div> 
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> 
        {filtered.map((product) => <ProductCard key={product.id} product={product} />)} 
80 
      </div> 
    </section> 
  ); 
} 
 
function Promotions() { 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-10"> 
      <h2 className="mb-6 text-3xl font-black">Акційні пропозиції</h2> 
      <div className="grid gap-6 md:grid-cols-3"> 
        {["Знижки до 30% на взуття", "Безкоштовна доставка від 1500 грн", "Нова 
колекція спортивного одягу"].map((title, idx) => ( 
          <div key={title} className="rounded-[2rem] bg-neutral-950 p-7 text-white 
shadow-lg"> 
            <div className="mb-8 text-5xl font-black text-red-500">0{idx + 1}</div> 
            <h3 className="mb-3 text-2xl font-black">{title}</h3> 
            <p className="text-gray-300">Вигідні умови для клієнтів магазину та 
спеціальні пропозиції для активного способу життя.</p> 
          </div> 
        ))} 
      </div> 
    </section> 
  ); 
} 
 
function About() { 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-12"> 
      <div className="grid items-center gap-10 lg:grid-cols-2"> 
        <div> 
          <p className="mb-3 font-bold uppercase tracking-[0.25em] text-red-600">Про 
магазин</p> 
          <h2 className="mb-5 text-4xl font-black">SPORT STORE — товари для 
активного життя</h2> 
          <p className="mb-4 text-lg leading-8 text-gray-600">Магазин пропонує 
спортивне взуття, одяг, тренажери, аксесуари та товари для тренувань. Основна мета 
сайту — забезпечити швидкий доступ до інформації про асортимент і створити зручний 
канал взаємодії з клієнтами.</p> 
          <p className="text-lg leading-8 text-gray-600">Web-застосунок має 
адаптивний інтерфейс, зрозумілу навігацію, каталог товарів, блок акцій та контактну 
форму.</p> 
        </div> 
        <img className="rounded-[2rem] shadow-xl" 
src="https://images.unsplash.com/photo-1534438327276-
14e5300c3a48?q=80&w=1200&auto=format&fit=crop" alt="Спортивний магазин" /> 
      </div> 
    </section> 
  ); 
} 
 
function Contacts() { 
  return ( 
    <section className="mx-auto max-w-7xl px-4 py-12"> 
      <h2 className="mb-6 text-3xl font-black">Контакти</h2> 
81 
      <div className="grid gap-8 lg:grid-cols-2"> 
        <div className="rounded-[2rem] border bg-white p-7 shadow-sm"> 
          <div className="mb-5 flex items-center gap-3"><Phone className="text-red-
600" /> +38 (099) 123-45-67</div> 
          <div className="mb-5 flex items-center gap-3"><Mail className="text-red-600" 
/> [email protected]</div> 
          <div className="flex items-center gap-3"><MapPin className="text-red-600" /> 
м. Київ, вул. Спортивна, 10</div> 
        </div> 
        <form className="rounded-[2rem] border bg-white p-7 shadow-sm"> 
          <input className="mb-4 w-full rounded-2xl border px-4 py-3 outline-none" 
placeholder="Ваше ім’я" /> 
          <input className="mb-4 w-full rounded-2xl border px-4 py-3 outline-none" 
placeholder="Email" /> 
          <textarea className="mb-4 min-h-32 w-full rounded-2xl border px-4 py-3 
outline-none" placeholder="Повідомлення" /> 
          <button type="button" className="rounded-2xl bg-red-600 px-7 py-3 font-bold 
text-white hover:bg-red-700">Надіслати</button> 
        </form> 
      </div> 
    </section> 
  ); 
} 
 
function Footer() { 
  return ( 
    <footer className="mt-12 bg-neutral-950 text-white"> 
      <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 md:grid-cols-4"> 
        <div> 
          <div className="mb-3 text-2xl font-black">SPORT STORE</div> 
          <p className="text-gray-400">Сайт-візитівка магазину спортивних 
товарів.</p> 
        </div> 
        <div> 
          <div className="mb-3 font-bold">Каталог</div> 
          <p className="text-gray-400">Взуття<br />Одяг<br />Тренажери<br 
/>Аксесуари</p> 
        </div> 
        <div> 
          <div className="mb-3 font-bold">Інформація</div> 
          <p className="text-gray-400">Про нас<br />Акції<br />Контакти<br 
/>Доставка</p> 
        </div> 
        <div> 
          <div className="mb-3 font-bold">Підписка</div> 
          <div className="flex rounded-2xl bg-white p-1"> 
            <input className="min-w-0 flex-1 px-3 text-gray-900 outline-none" 
placeholder="Ваш email" /> 
            <button className="rounded-xl bg-red-600 px-4 py-2 font-bold">OK</button> 
          </div> 
        </div> 
      </div> 
      <div className="border-t border-white/10 py-4 text-center text-sm text-gray-
500">© 2026 SPORT STORE. Усі права захищено.</div> 
82 
    </footer> 
  ); 
} 
 
export default function SportStoreApp() { 
  const [currentPage, setCurrentPage] = useState("home"); 
  const [selectedCategory, setSelectedCategory] = useState("all"); 
 
  return ( 
    <main className="min-h-screen bg-gray-50 text-gray-950"> 
      <Header currentPage={currentPage} setCurrentPage={setCurrentPage} /> 
 
      {currentPage === "home" && ( 
        <> 
          <Hero setCurrentPage={setCurrentPage} /> 
          <Benefits /> 
          <CategoryCards setCategory={setSelectedCategory} 
setCurrentPage={setCurrentPage} /> 
          <ProductGrid selectedCategory="all" setSelectedCategory={setSelectedCategory} 
/> 
          <Promotions /> 
          <About /> 
        </> 
      )} 
 
      {currentPage === "catalog" && <ProductGrid selectedCategory={selectedCategory} 
setSelectedCategory={setSelectedCategory} />} 
      {currentPage === "promotions" && <Promotions />} 
      {currentPage === "about" && <About />} 
      {currentPage === "contacts" && <Contacts />} 
 
      <Footer /> 
    </main> 
  ); 
} 
83 
 
ДОДАТОК В 
ІНТЕРФЕЙС КОРИСТУВАЧА WEB-ЗАСТОСУНКУ 
У додатку В наведено приклади інтерфейсу користувача розробленого 
web-застосунку «Сайт-візитівка магазину продажу спортивних товарів». 
Інтерфейс системи реалізовано з використанням сучасних web-технологій 
HTML5, CSS3, JavaScript та бібліотеки React. Основну увагу під час розробки 
приділено зручності навігації, адаптивності, візуальній привабливості та 
логічному розміщенню інформаційних блоків. 
Головна сторінка web-застосунку є основним елементом взаємодії 
користувача із сайтом. Вона містить навігаційне меню, банер із рекламним 
повідомленням, блок категорій товарів, популярні товари, інформаційні 
переваги магазину та футер. Така структура дозволяє користувачеві швидко 
отримати доступ до основних розділів сайту та перейти до перегляду каталогу 
товарів. 
 
Рисунок В.1 – Головна сторінка web-застосунку магазину спортивних 
товарів 
84 
Каталог товарів призначений для відображення асортименту магазину у 
вигляді карток товарів. Кожна картка містить зображення, назву товару, 
категорію, ціну, рейтинг та кнопку для перегляду детальної інформації. Для 
зручності користувачів передбачено пошук товарів і фільтрацію за категоріями. 
 
Рисунок В.2 – Сторінка каталогу товарів web-застосунку 
На рисунку В.2 представлено сторінку каталогу товарів web-застосунку 
магазину спортивних товарів. Дана сторінка призначена для перегляду 
асортименту продукції та забезпечує зручний доступ до інформації про товари. 
У верхній частині сторінки розташовано навігаційне меню, логотип магазину, 
рядок пошуку товарів та кнопки взаємодії користувача із системою. Основна 
частина інтерфейсу містить блок фільтрації товарів за категоріями, ціною та 
брендами, що дозволяє швидко знаходити необхідну продукцію. 
У центральній частині сторінки відображається каталог товарів у вигляді 
карток. Кожна картка містить зображення товару, назву, категорію, рейтинг, 
ціну та кнопку для придбання або перегляду додаткової інформації. Для 
зручності користувача реалізовано сортування товарів та пагінацію сторінок 
каталогу. Інтерфейс сторінки побудований із використанням адаптивного 
85 
дизайну, що забезпечує коректне відображення елементів на різних типах 
пристроїв. Використання сучасного оформлення, чіткої структури та системи 
фільтрації дозволяє покращити зручність користування web-застосунком та 
спрощує процес пошуку спортивних товарів. 
Сторінка акцій використовується для представлення спеціальних 
пропозицій, знижок та новинок магазину. Вона дозволяє привернути увагу 
користувачів до актуальних товарів і стимулювати зацікавленість у продукції 
магазину. 
 
Рисунок В.3 – Сторінка акційних пропозицій 
Сторінка «Про нас» містить коротку інформацію про магазин спортивних 
товарів, основні напрями його діяльності, переваги та призначення web-
застосунку. Даний розділ сприяє формуванню довіри користувача до магазину 
та покращує інформаційне наповнення сайту. 
86 
 
Рисунок В.4 – Сторінка «Про нас» web-застосунку 
На рисунку В.4 представлено сторінку «Про нас» web-застосунку 
магазину спортивних товарів. Дана сторінка призначена для ознайомлення 
користувачів із діяльністю магазину, його основними перевагами, місією та 
напрямами роботи. У верхній частині сторінки розташовано навігаційне меню, 
логотип web-застосунку та інформаційний банер із тематичним зображенням 
спортивної тематики, що формує сучасний стиль інтерфейсу та підкреслює 
спеціалізацію магазину. 
Основна частина сторінки містить інформаційні блоки з описом місії 
магазину, переваг сервісу та характеристик діяльності компанії. Для 
покращення візуального сприйняття використано іконки, графічні елементи та 
структуровані текстові блоки. На сторінці також представлено інформацію про 
команду магазину із фотографіями співробітників та їх посадовими ролями. 
Такий підхід дозволяє підвищити рівень довіри користувачів до web-застосунку 
та забезпечує більш персоналізоване представлення компанії. 
Інтерфейс сторінки реалізовано із використанням адаптивного дизайну, 
що забезпечує коректне відображення елементів на різних типах пристроїв. 
87 
Використання сучасного оформлення, контрастної кольорової гами та 
логічного розташування інформаційних блоків покращує зручність 
користування системою та забезпечує комфортне сприйняття інформації 
користувачем. 
Сторінка контактів забезпечує можливість зв’язку користувача з 
адміністрацією магазину. Вона містить номер телефону, електронну адресу, 
місцезнаходження магазину та форму зворотного зв’язку. Форма дозволяє 
користувачеві надіслати повідомлення безпосередньо через web-інтерфейс. 
 
Рисунок В.5 – Сторінка контактів web-застосунку 
Особливістю інтерфейсу є адаптивність, яка забезпечує коректне 
відображення сайту на різних типах пристроїв. Для цього використано CSS 
Grid, Flexbox та media queries. Web-застосунок коректно відображається на 
персональних комп’ютерах, планшетах і смартфонах. 
88 
 
Рисунок В.6 – Адаптивне відображення інтерфейсу web-застосунку 
Отже, інтерфейс користувача розробленого web-застосунку є зручним, 
сучасним та адаптивним. Він забезпечує логічну навігацію між сторінками, 
зрозуміле представлення товарів і комфортну взаємодію користувача із сайтом 
магазину спортивних товарів. 
89 
 
ДОДАТОК Г 
РЕЗУЛЬТАТИ ТЕСТУВАННЯ СИСТЕМИ 
У додатку Г наведено результати тестування web-застосунку «Сайт-
візитівка магазину продажу спортивних товарів». Основною метою тестування 
було визначення коректності роботи функціональних модулів системи, 
перевірка адаптивності інтерфейсу, стабільності роботи серверної частини та 
ефективності взаємодії між компонентами web-застосунку. 
Тестування проводилося на персональних комп’ютерах, планшетах та 
мобільних пристроях із використанням сучасних web-браузерів: 
– Google Chrome; 
– Mozilla Firefox; 
– Microsoft Edge. 
Для перевірки серверної частини та REST API використовувалися: 
– Postman; 
– Chrome DevTools; 
– Google Lighthouse. 
Г.1 Результати тестування клієнтської частини 
У процесі тестування клієнтської частини перевірялися: 
– коректність відображення сторінок; 
– робота навігації; 
– функціонування кнопок та форм; 
– адаптивність інтерфейсу; 
– коректність відображення каталогу товарів; 
– швидкість завантаження сторінок. 
Результати тестування клієнтської частини наведено у таблиці Г.1. 
Таблиця Г.1 – Результати тестування клієнтської частини 
№ Функція системи Результат тестування 
1 Відображення головної сторінки Працює коректно 
2 Навігація між сторінками Працює коректно 
90 
3 Відображення каталогу товарів Працює коректно 
4 Пошук товарів Працює коректно 
5 Адаптивність інтерфейсу Працює коректно 
6 Робота контактної форми Працює коректно 
7 Відображення акційних пропозицій Працює коректно 
Приклад тестування інтерфейсу web-застосунку наведено на рисунку Г.1. 
 
Рисунок Г.1 – Тестування інтерфейсу web-застосунку у браузері 
 
Г.2 Результати тестування REST API 
Для тестування серверної частини системи використовувалися HTTP-
запити до REST API. У процесі тестування перевірялися: 
– GET-запити; 
– POST-запити; 
– передача даних у форматі JSON; 
– взаємодія із базою даних MongoDB; 
– обробка помилок сервером. 
Результати тестування REST API наведено у таблиці Г.2. 
91 
 
Таблиця Г.2 – Результати тестування REST API 
№ API-запит Метод Результат 
1 /products GET Успішно 
2 /categories GET Успішно 
3 /promotions GET Успішно 
4 /contacts POST Успішно 
5 /products/:id GET Успішно 
Приклад тестування REST API наведено на рисунку Г.2. 
 
Рисунок Г.2 – Тестування REST API у Postman 
Г.3 Результати аналізу продуктивності системи 
Для аналізу продуктивності web-застосунку використовувався інструмент 
Google Lighthouse. Основними показниками оцінювання були: 
– продуктивність; 
– доступність; 
– SEO-оптимізація; 
– швидкість завантаження сторінок; 
92 
– час відповіді сервера. 
Результати аналізу продуктивності наведено у таблиці Г.3. 
Таблиця Г.3 – Результати аналізу продуктивності 
Показник Значення 
Performance 96 
Accessibility 95 
Best Practices 100 
SEO 92 
Середній час завантаження сторінки 1,8 с 
Середній час відповіді сервера 220 мс 
Результати тестування продуктивності наведено на рисунку Г.3. 
 
Рисунок Г.3 – Аналіз продуктивності web-застосунку 
Г.4 Результати тестування адаптивності інтерфейсу 
Під час тестування адаптивності виконувалася перевірка роботи web-
застосунку на різних типах пристроїв: 
– персональних комп’ютерах; 
– планшетах; 
93 
– смартфонах. 
У процесі тестування перевірялися: 
– масштабування елементів; 
– адаптація меню навігації; 
– розташування блоків; 
– читабельність тексту; 
– швидкість роботи інтерфейсу. 
Результати тестування адаптивності наведено у таблиці Г.4. 
Таблиця Г.4 – Результати тестування адаптивного інтерфейсу 
Тип пристрою Результат 
Персональний комп’ютер Працює коректно 
Планшет Працює коректно 
Смартфон Працює коректно 
Приклад адаптивного відображення web-застосунку наведено на рисунку 
Г.4. 
 
Рисунок Г.4 – Адаптивне відображення web-застосунку 
Г.5 Загальні результати тестування 
94 
За результатами проведеного тестування встановлено, що web-
застосунок: 
– коректно працює у сучасних web-браузерах; 
– підтримує адаптивний дизайн; 
– забезпечує стабільну роботу REST API; 
– ефективно взаємодіє із базою даних MongoDB; 
– має високі показники продуктивності; 
– забезпечує зручний інтерфейс користувача. 
Проведене тестування підтвердило працездатність та ефективність 
розробленого web-застосунку. Отримані результати свідчать про можливість 
практичного використання системи для представлення магазину спортивних 
товарів у мережі Інтернет та подальшого розвитку функціоналу web-
застосунку.
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
