Web-сайт студії татуювання та пірсингу

Телятник, Вікторія Костянтинівна

Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/9878

Назва:	Web-сайт студії татуювання та пірсингу
Автори:	Ланських , Євген Володимирович Телятник, Вікторія Костянтинівна
Ключові слова:	вебдодаток;Single Page Application (SPA);цифровізація;тату-студія;UI/UX дизайн;компонентний підхід;React
Дата публікації:	9-чер-2026
Короткий огляд (реферат):	Кваліфікаційна робота присвячена проєктуванню та розробці сучасного вебдодатка (веб-орієнтованої інформаційної системи) для студії татуювання та пірсингу "Mozhna Tattoo". Робота є актуальною, оскільки сфера художнього татуювання потребує ефективних спеціалізованих рішень, які вирішують проблеми повільного завантаження та обмеженого функціоналу наявних платформ (сторінок у соцмережах та хмарних конструкторів). Створення швидкого, адаптивного вебсередовища є необхідним кроком для якісної демонстрації портфоліо майстрів та автоматизації комунікації з клієнтами на регіональному ринку. Метою роботи є розробка функціонального вебсайту студії "Mozhna Tattoo" у форматі Single Page Application (SPA), що дозволить автоматизувати взаємодію майстрів із клієнтами та забезпечить якісне представлення художніх послуг у мережі. Об’єкт дослідження – процес цифровізації послуг у сфері художнього татуювання та пірсингу із застосуванням сучасних інформаційних технологій. Предмет дослідження – методи, архітектурні рішення та програмні засоби проєктування і реалізації вебсайту студії "Mozhna Tattoo" із використанням компонентного підходу. Було використано основні методи: системного аналізу предметної області, об'єктно-орієнтованого проєктування, підходи до розробки користувацького інтерфейсу (UI/UX), а також методи тестування та розгортання вебдодатків. Практична значущість отриманих результатів полягає у впровадженні готової, швидкої та оптимізованої інформаційної системи в діяльність студії "Mozhna Tattoo". Це забезпечує клієнтам зручний доступ до портфоліо та "розумної" форми запису, зменшує навантаження на адміністратора та повністю скасовує витрати студії на абонентську плату стороннім платформамконструкторам. У першому розділі здійснено характеристику предметної області, проведено огляд існуючих програмних рішень, виявлено їхні недоліки та сформульовано постановку задачі на розробку власної системи. У другому розділі обґрунтовується технічне завдання на створення системи, розглядаються архітектурні вимоги, проєктується логічна структура та наводиться техніко-економічне підтвердження доцільності розробки. Третій розділ присвячений розробці архітектури інтерфейсу та UI/UX дизайну системи у середовищі Figma з використанням концепції Dark UI, ефектів матового скла та інноваційних рішень (інтерактивної 3D-моделі). У четвертому розділі описано процес програмної реалізації додатку за допомогою React і TypeScript, наведено алгоритми обробки даних та результати комплексного тестування продуктивності й безпеки системи.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/9878
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Файли цього матеріалу:

Файл	Опис	Розмір	Формат
РЕП_БАК_Телятник _WEB-2211.pdf Restricted Access		2.67 MB	Adobe PDF	Переглянути/Відкрити Запит копії

Показати повний опис матеріалу Перегляд статистики

Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра

на тему: «Web-сайт студії татуювання та пірсингу»
Виконала: здобувачка першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 Інформаційні
системи та технології
ОП «Web-технології, Web-дизайн»
Телятник Вікторія Костянтинівна
Керівник: к.т.н., професор Ланських
Є.В.
Рецензент: директор ТОВ
"АНДЕРСЕНЛАБ" Алесін Олег
Вікторович

Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет Інформаційних технологій і систем
Кафедра Інформаційних тезнологій проектування
Освітньо-кваліфікаційний
рівень бакалавр
Спеціальність 126 «Інформаційні системи та технології»
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
___________ Тетяна ПРОКОПЕНКО
«_____» ______________2026 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Телятник Вікторії Костянтинівні
(прізвище, ім‘я, по батькові)
1. Тема роботи Web-сайт студії татуювання та пірсингу

Керівник роботи Ланських Євген Володимирович, кандидат технічних наук, доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від « 1 2 » березня 2026 р. №5 6 /03-03.
2. Строк подання студентом роботи «5» червня 2026 року.
3. Вихідні дані до роботи: Наукові публікації, монографії та підручники з теорії проєктування
та архітектури веборієнтованих інформаційних систем. Офіційна документація React,
TypeScript, Tailwind CSS, Vite, Three.js та @react-three/fiber. Офіційні дані проаналізованих
сайтів.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ
РОЗДІЛ . ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ НА РОЗРОБКУ
РОЗДІЛ 3. РОЗРОБКА АРХІТЕКТУРИ ІНФТЕРФЕЙСУ ТА ДИЗАЙНУ СИСТЕМИ
РОЗДІЛ 4. ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ СИСТЕМИ
ВИСНОВКИ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
ДОДАТКИ
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів)
Порівняльна характеристика аналогів сайтів, Екранні форми прототипу сайту, Блок-схема
взаємодії, Проектна документація, Екранні форми реалізованого веб-додатку

6. Консультанти розділів роботи

Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання
консультанта
прийняв

7. Дата видачі завдання 11.02.2026

КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи Примітка
етапів роботи
бакалавра
1 Підготовча стадія

1.1 Постановка задачі
11.02.2026 виконано
1.2 Підготовка завдання
12.02.2026 виконано
1.3 Погодження завдання
14.02.2026 виконано
1.4 Затвердження завдання
14.02.2026 виконано
2 Основна стадія

2.1 Підбір матеріалів 18.02.2026 виконано
2.2 Аналіз шляхів рішення поставленої 23.02.2026 виконано
задачі
2.3 Розрахунок основних параметрів 28.02.2026 виконано
роботи
2.4 Вибір кінцевого варіанту проектного 03.03.2026 виконано
рішення
2.5 Оформлення первісної редакції 10.03.2026 виконано
роботи
3 Заключна стадія
3.1 Узгодження прийнятих проектних 07.04.2026 виконано
рішень з керівником
3.2 Оформлення пояснювальної записки 24.05.2026 виконано
роботи в кінцевій редакції
3.3 Затвердження роботи 03.06.2026 виконано
3.4 Рецензування роботи 04.06.2026 виконано
3.5 Захист роботи 09.06.2026 виконано

Студентка Вікторія ТЕЛЯТНИК
(підпис)

Керівник роботи Євген ЛАНСЬКИХ
(підпис)

АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з 4
розділів, викладена на 56 сторінках, містить 33 рисунки, 2 блок-схеми, 28
джерел використаної літератури, 1 додатків.
Кваліфікаційна робота присвячена проєктуванню та розробці
сучасного вебдодатка (веб-орієнтованої інформаційної системи) для студії
татуювання та пірсингу "Mozhna Tattoo".
Робота є актуальною, оскільки сфера художнього татуювання
потребує ефективних спеціалізованих рішень, які вирішують проблеми
повільного завантаження та обмеженого функціоналу наявних платформ
(сторінок у соцмережах та хмарних конструкторів). Створення швидкого,
адаптивного вебсередовища є необхідним кроком для якісної демонстрації
портфоліо майстрів та автоматизації комунікації з клієнтами на
регіональному ринку.
Метою роботи є розробка функціонального вебсайту студії "Mozhna
Tattoo" у форматі Single Page Application (SPA), що дозволить
автоматизувати взаємодію майстрів із клієнтами та забезпечить якісне
представлення художніх послуг у мережі.
Об’єкт дослідження – процес цифровізації послуг у сфері художнього
татуювання та пірсингу із застосуванням сучасних інформаційних
технологій.
Предмет дослідження – методи, архітектурні рішення та програмні
засоби проєктування і реалізації вебсайту студії "Mozhna Tattoo" із
використанням компонентного підходу.
Було використано основні методи: системного аналізу предметної
області, об'єктно-орієнтованого проєктування, підходи до розробки
користувацького інтерфейсу (UI/UX), а також методи тестування та
розгортання вебдодатків.
Практична значущість отриманих результатів полягає у впровадженні
готової, швидкої та оптимізованої інформаційної системи в діяльність студії
"Mozhna Tattoo". Це забезпечує клієнтам зручний доступ до портфоліо та
"розумної" форми запису, зменшує навантаження на адміністратора та повністю
скасовує витрати студії на абонентську плату стороннім платформам-
конструкторам.
У першому розділі здійснено характеристику предметної області,
проведено огляд існуючих програмних рішень, виявлено їхні недоліки та
сформульовано постановку задачі на розробку власної системи.
У другому розділі обґрунтовується технічне завдання на створення
системи, розглядаються архітектурні вимоги, проєктується логічна структура та
наводиться техніко-економічне підтвердження доцільності розробки.
Третій розділ присвячений розробці архітектури інтерфейсу та UI/UX
дизайну системи у середовищі Figma з використанням концепції Dark UI, ефектів
матового скла та інноваційних рішень (інтерактивної 3D-моделі).
У четвертому розділі описано процес програмної реалізації додатку за
допомогою React і TypeScript, наведено алгоритми обробки даних та результати
комплексного тестування продуктивності й безпеки системи.
Ключові слова: вебдодаток, цифровізація, тату-студія, UI/UX дизайн,
компонентний підхід, React, Single Page Application (SPA).
SUMMARY
The structure and volume of the work. The thesis consists of 4 chapters, set out
on 56 pages, contains 33 figures, 2 flowcharts, 28 references, 1 appendices.
The bachelor's thesis is dedicated to the design and development of a modern
web-oriented information system (web application) for the tattoo and piercing studio
"Mozhna Tattoo".
The work is relevant because the artistic tattoo industry requires effective
specialized solutions that overcome the performance and functional limitations of
existing platforms (social networks and cloud-based website builders). Creating a fast,
adaptive web environment is a necessary step for high-quality demonstration of artists'
portfolios and automation of client communication in the regional market.
The aim of the study is to develop a functional website for the "Mozhna Tattoo"
studio in the format of a Single Page Application (SPA), which will automate the
interaction between artists and clients and ensure high-quality presentation of artistic
services on the Internet.
Object – the process of digitalization of services in the field of artistic tattooing
and piercing using modern information technologies.
Subject – methods, architectural solutions, and software tools for designing and
implementing the website of the "Mozhna Tattoo" studio using a component-based
approach.
It was used the basic methods: system analysis of the subject area, object-
oriented design, user interface development approaches (UI/UX), as well as web
application testing and deployment methods.
The practical value of the results lies in the implementation of a ready-to-use,
fast, and optimized information system into the activities of the "Mozhna Tattoo"
studio. This provides clients with convenient access to portfolios and a "smart" booking
form, reduces the administrator's workload, and completely eliminates the studio's
costs for subscription fees to third-party website builders.
In the first chapter, the characteristics of the subject area are provided, an
overview of existing software solutions is conducted, their drawbacks are identified,
and the problem statement for developing a custom system is formulated.
In the second chapter, it is substantiated the technical task for creating the
system, architectural requirements are considered, the logical structure is designed, and
a technical-economic justification for the development is provided.
The third chapter is devoted to the development of the interface architecture and
UI/UX design of the system in the Figma environment using the Dark UI concept,
glassmorphism effects, and innovative solutions (interactive 3D model).
In the fourth chapter, the process of software implementation of the application
using React and TypeScript is described, along with data processing algorithms and
the results of comprehensive performance and security testing.
Keywords: web application, digitalization, tattoo studio, UI/UX design,
component-based approach, React, Single Page Application (SPA).

ЗМІСТ
ВСТУП ................................................................................................................................. 3
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, АНАЛОГІВ ........... 6
1.1 Характеристика предметної області та об'єкта розробки .......................................... 6
1.2 Огляд існуючих рішень та програмних аналогів ....................................................... 7
1.3 Постановка задачі на розробку ................................................................................. 12
1.4 Висновки до розділу .................................................................................................. 13
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ НА РОЗРОБКУ ................. 15
2.1. Технічні вимоги та показники якості системи ........................................................ 15
2.2. Проєктування логічної структури та інтелектуальних сценаріїв взаємодії ............ 17
2.3. Вимоги до інтерфейсу користувача (UI/UX) та прототипування ............................ 19
2.4. Техніко-економічне обґрунтування доцільності створення web-ресурсу ................ 20
2.5 Висновки розділу ...................................................................................................... 22
РОЗДІЛ 3. РОЗРОБКА АРХІТЕКТУРИ ІНТЕРФЕЙСУ ТА ДИЗАЙНУ СИСТЕМИ ....... 24
3.1. Інноваційні та нестандартні рішення в дизайні інтерфейсу .................................... 25
3.2. Проєктування базових структурних та інформаційних модулів ............................. 29
3.3 Висновок до розділу .................................................................................................. 33
РОЗДІЛ 4. ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ СИСТЕМИ ........................ 35
4.1. Обґрунтування вибору технологічного стеку та інструментальних засобів розробки35
4.2. Програмна реалізація системи та інтеграція компонентів ...................................... 36
4.2.1. Проєктування логічної та фізичної структури веб-додатка. ................................... 37
4.2.2. Налаштування бази даних та структур колекцій. ................................................... 38
4.2.3. Алгоритми користувацьких скрибтів. ................................................................... 39
4.2.4. Управління глобальним станом та інтеграція з віджетом CRM. ............................. 44
4.2.5 Інтеграція дизайну, забезпечення комфорту та наповнення контентом. .................. 44
4.2.6. Процес розгортання веб-додатка на хостингу. ...................................................... 46
4.3. Тестування системи та аналіз відповідності вимогам ............................................. 47
4.3.1. Функціональне тестування логіки та управління станом. ...................................... 48
4.3.2. Ергономічне та візуальне тестування. ................................................................... 49
4.3.3. Профілювання продуктивності та стабільності. .................................................... 49
4.3.4. Аудит безпеки. .................................................................................................... 50
4.3.5. Аналіз відповідності системи поставленим вимогам. ............................................ 50

ЧДТУ 26 2221.022.ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Телятник В.К. Літ. Лист Листів
Web-сайт студії татуювання та
Перев. Ланських Є.В. Н 2 64
пірсингу.
Рецен Алесін О.В.
Пояснювальна записка ФІТІС,
Нз.. к онтр. Ланських Є.В.
кафедра ІТП, Web-2211
Затв. Прокопенко Т.О.

4.4 Висновки до розділу .................................................................................................. 51
ВИСНОВКИ ...................................................................................................................... 53
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................................... 55
ДОДАТКИ ......................................................................................................................... 57

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 2

ВСТУП
Актуальність теми.
Сучасний етап розвитку сфери послуг характеризується стрімким
впровадженням цифрових технологій у бізнес-процеси та зростанням очікувань
клієнтів щодо доступу до інформації онлайн. Галузь художнього татуювання та
пірсингу, ключова частина креативної економіки, також потребує
спеціалізованих веб-систем. У Черкаському регіоні значна конкуренція між тату-
студіями змушує бізнес не лише надавати якісні послуги, а й створювати зручне
цифрове середовище для демонстрації портфоліо та комунікації з клієнтами.
Сучасний вебсайт перетворюється на основний інструмент автоматизації
взаємодії з аудиторією та підвищення якості сервісу.
Аналіз наявних платформ - сторінок у соцмережах, сайтів на хмарних
конструкторах та агрегаторів - виявив суттєві недоліки. Соцмережі не
дозволяють структурувати розгорнуте портфоліо майстрів і не підтримують
повноцінний онлайн-запис. Конструктори генерують зайвий програмний код, що
гальмує завантаження на мобільних пристроях і обмежує можливість створення
унікального інтерфейсу. Агрегатори нівелюють індивідуальність бренду й
ускладнюють навігацію для клієнтів.
Ці проблеми вирішує розробка власного вебсайту у форматі Single Page
Application (SPA) [6]. Компонентний підхід гарантує швидку реакцію
інтерфейсу, динамічну фільтрацію контенту без перезавантаження сторінок і
плавну, унікально стилізовану логіку онлайн-запису.
Розробка ресурсу має значне практичне значення. Її впровадження
оптимізує вибір послуг для клієнтів, підвищує ефективність роботи
адміністраторів і забезпечує надійну, захищену основу для розвитку бізнесу на
регіональному ринку.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 3

Мета та завдання.
Метою кваліфікаційної роботи є розробка функціонального вебсайту студії
татуювання та пірсингу "Mozhna Tattoo", що дозволить автоматизувати
взаємодію майстрів із клієнтами та забезпечить якісне представлення художніх
послуг у мережі. Очікуваним результатом є створення швидкого та зручного веб-
ресурсу, який сприятиме підвищенню довіри клієнтів і оптимізуватиме роботу
адміністрації студії.
Досягнення поставленої мети передбачається шляхом створення Single
Page Application (SPA) із використанням компонентного підходу на основі
бібліотеки React [5, 6]. Застосування такого підходу забезпечує побудову
динамічного інтерфейсу, швидке відображення сторінок та ефективне керування
станом системи.
Мета роботи визначає об'єкт дослідження - процес цифровізації послуг у
сфері художнього татуювання та пірсингу, а також предмет дослідження -
методи, архітектурні рішення та програмні засоби створення веб-сайту студії
"Mozhna Tattoo".
Для досягнення поставленої мети необхідно вирішити такі завдання:
• Проаналізувати предметну область, визначити потреби цільової
аудиторії та дослідити особливості наявних інформаційних систем у сфері
тату-індустрії.
• Обґрунтувати вибір технологій розробки та сформулювати технічне
завдання для вебсистеми.
• Спроєктувати архітектуру інформаційної системи, структуру бази
даних та взаємодію основних елементів інтерфейсу.
• Розробити програмну частину вебдодатка, зокрема модулі галереї,
онлайн-запису та спеціальних пропозицій.
• Перевірити розроблений ресурс на відповідність вимогам, сумісність
із різними браузерами та мобільними пристроями.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 4

Об'єктом дослідження є процес цифровізації послуг у сфері художнього
татуювання та пірсингу із застосуванням сучасних інформаційних технологій.
Предметом дослідження є методи та засоби проєктування і реалізації
вебсайту студії "Mozhna Tattoo" із використанням компонентного підходу.

Методи дослідження.
У роботі використано методи системного аналізу предметної області,
об'єктно-орієнтованого проєктування, підходи до розробки користувацького
інтерфейсу (UI/UX), а також методи тестування та розгортання вебдодатків.
Практичне значення.
Отримані результати дають змогу впровадити повноцінну інформаційну
систему в діяльність студії "Mozhna Tattoo". Розроблений сайт забезпечує
клієнтам швидкий доступ до портфоліо майстрів, актуальних цін і умов
придбання сертифікатів, що зменшує навантаження на адміністратора. Система
готова до використання та подальшого розширення.
Структура роботи.
Кваліфікаційна робота складається зі вступу, чотирьох розділів, висновків,
списку використаних джерел та додатків. Загальний обсяг роботи становить 55
сторінок, містить 33 рисунки, 28 використаних джерел та 1 додатків.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 5

РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ
1.1 Характеристика предметної області та об'єкта розробки
У сучасну епоху цифрової економіки присутність бізнесу в Інтернеті вже
не просто дає перевагу - вона стала необхідною умовою для його існування та
розвитку. Сфера художнього татуювання та пірсингу, яка ще донедавна
сприймалася як закрита й малодоступна субкультура, сьогодні
трансформувалася у зрілу професійну індустрію з високими стандартами якості
та безпеки. Попри це, у багатьох українських студіях цифрова взаємодія з
клієнтами все ще зводиться переважно до використання соціальних мереж, що
не завжди відповідає сучасним очікуванням і потребам. Саме тому виникає
необхідність у створенні спеціалізованого веб-ресурсу, який би враховував
специфіку цієї галузі та сприяв оптимізації ключових бізнес-процесів студії.
Актуальність цього дослідження визначається нагальною потребою у
розробці спеціалізованого веб-сайту, що поєднує зручну та доступну подачу
інформації, ефективну презентацію робіт і автоматизує окремі етапи бізнес-
процесів. Такий онлайн-ресурс не лише допомагає впорядкувати внутрішню
діяльність студії, а й значно підвищує комфорт та якість взаємодії з клієнтами.
Об'єкт дослідження охоплює процес цифровізації послуг у сфері
художнього татуювання та пірсингу за допомогою сучасних інформаційних
технологій. Це включає як маркетингові інструменти - залучення нових клієнтів
і демонстрацію портфоліо, так і організаційні процеси, такі як онлайн-запис,
інформування щодо безпеки та отримання відгуків. Аналіз цього об'єкта
здійснюється настільки глибоко, наскільки це необхідно для створення
ефективної інформаційної системи, що відповідає актуальним вимогам ринку.
Предмет дослідження становить веб-орієнтована інформаційна система
студії татуювання та пірсингу "Mozhna Tattoo", а також методи, моделі й
інструменти, які використовуються для її проєктування та впровадження.
Особливий акцент робиться на компонентному підході з використанням React,
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 6

розробці інтуїтивно зрозумілого інтерфейсу, логічній структурі бази даних та
інтеграції UI-рішень, що відображають унікальний стиль бренду.
У межах дослідження розглядаються такі питання:
• архітектурні особливості побудови Single Page Application (SPA);
• способи подання мультимедійного контенту, зокрема портфоліо;
• правила взаємодії користувача з інтерактивними елементами сайту,
такими як форми запису та блоки з сертифікатами;
• засоби забезпечення адаптивності та сумісності з різними
браузерами.
Визначення об'єкта і предмета дослідження дає змогу чітко окреслити межі
розробки та встановити критерії оцінювання майбутньої системи. Створення
власного веб-ресурсу для студії "Mozhna Tattoo" спрямоване не лише на
вирішення маркетингових завдань, а й на формування технічної основи для
подальшого розвитку бізнесу в цифровому середовищі.
1.2 Огляд існуючих рішень та програмних аналогів
Щоб створити дійсно ефективний web-ресурс для студії "Mozhna Tattoo",
варто уважно розглянути й проаналізувати існуючі рішення, які вже виконують
подібні функції на ринку. Такий огляд допомагає не просто зрозуміти, які
підходи працюють у сучасній тату-індустрії, а й сформувати чітке бачення вимог
до майбутнього сайту. Зазвичай цифрову присутність тату-студій забезпечують
трьома основними шляхами: через соціальні мережі, за допомогою хмарних
конструкторів сайтів або ж завдяки розробці індивідуальних багатосторінкових
платформ для великих мереж.
Найбільш звичний і доступний шлях для багатьох студій - бізнес-сторінки
в соціальних мережах, передусім у Instagram (рис. 1.1-1.2) [4]. Тут платформа
стає не лише цифровим портфоліо для майстрів, а й головним каналом
комунікації з клієнтами. Соціальні мережі особливо привабливі завдяки легкості
перегляду візуального контенту та здатності охопити широку аудиторію через
алгоритми рекомендацій.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 7

Рисунок 1.1 - Профіль тату-студії в Instagram.

Рисунок 1.2 - Сітка з публікаціями.
Ще одним популярним інструментом для представлення тату-студій
онлайн є SaaS-платформи-конструктори, наприклад Tilda Publishing (рис. 1.3-1.5)
[2]. Саме ця платформа стала основою для чинного сайту студії "Mozhna Tattoo"
[3]. Її головна перевага - візуальний редактор, завдяки якому навіть без глибоких
технічних знань можна швидко зібрати функціональний сайт. До стандартних
можливостей відносяться форми зворотного зв’язку, галереї, підключення
аналітики. Проте варто враховувати й обмеження: документація Tilda
підкреслює, що на швидкість сайту впливають зовнішні скрипти, зображення та
додаткові елементи, які не завжди можна оптимізувати.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 8

Рисунок 1.3 - інтерфейс головної сторінки поточного сайту студії Mozhna Tattoo
на базі конструктора Tilda.

Рисунок 1.4 - інтерфейс сторінки "Послуги" поточного сайту студії Mozhna
Tattoo на базі конструктора Tilda.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 9

Рисунок 1.5 - інтерфейс сторінки "Майстри" поточного сайту студії Mozhna
Tattoo на базі конструктора Tilda.
Третій підхід обирають переважно великі мережеві студії - це
індивідуальні, ретельно спроєктовані сайти, як-от Vean Tattoo (рис. 1.6-1.7) [1].
Подібні ресурси мають складну багаторівневу структуру, працюють із великими
масивами даних (майстри, ціни, філії, інтернет-магазини) й використовують
потужні CMS. Зазвичай тут реалізовано серверну генерацію сторінок, що
позитивно впливає на пошукову індексацію та загальну продуктивність.

Рисунок 1.6 - інтерфейс головної сторінки сайту Vean Tattoo.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 10

Рисунок 1.7 - інтерфейс сторінки "Каталог Майстрів" сайту Vean Tattoo.
Варто визнати, що навіть найпопулярніші рішення мають свої недоліки, які
безпосередньо впливають на комфорт користувача та ефективність
функціонування сайту. Одна з найбільш відчутних проблем - надмірний код і
повільніше завантаження сторінок, з чим часто стикаються користувачі сайтів,
створених на конструкторах. Такі платформи підвантажують додаткові
бібліотеки й елементи навіть тоді, коли вони не потрібні для конкретної сторінки.
Ще одна суттєва складність - обмежені можливості налаштування
інтерфейсу. Наприклад, у Instagram важко структурувати інформацію логічно й
зручно для користувача, а на платформах-конструкторах реалізація унікального
дизайну часто вимагає додаткових технічних знань або ж взагалі є неможливою.
Як наслідок, інтерфейс втрачає адаптивність і цілісність.
Ще один аспект, що суттєво впливає на досвід клієнта, - це розірваність
процесу запису. У соціальних мережах клієнтам часто доводиться домовлятися
про запис через особисті повідомлення, що забирає час як у них, так і в
адміністратора. На великих сайтах нерідко використовують зовнішні віджети,
проте вони не завжди враховують попередній вибір відвідувача, через що дані
доводиться вводити повторно. Подібні нюанси створюють додаткові бар'єри для
користувача й можуть негативно впливати на кількість успішних записів.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 11

Окремо варто згадати і про технологічну залежність від обраної
платформи. Соціальні мережі значно обмежують пошукову видимість бізнесу, а
SaaS-конструктори фактично «прив’язують» студію до свого сервісу. Це
обмежує доступ до серверної частини, а отже - унеможливлює впровадження
складніших функцій, на кшталт фільтрації робіт за кількома параметрами без
перезавантаження сторінки.
Підсумовуючи проведений аналіз, можна сказати: жодне з існуючих
рішень не є ідеальним і повністю зручним. Одні підходи мають технічні
обмеження, інші - недостатню гнучкість або занадто шаблонну структуру. Саме
тому оптимальним рішенням виглядає розробка власного web-додатка у форматі
Single Page Application (SPA) на базі React [5, 6].
Цей підхід дозволяє гарантувати високу швидкість відображення контенту,
створення інтерфейсів будь-якої складності й побудову зручного онлайн-запису,
де всі дані між елементами системи передаються через Context API. Завдяки
цьому як клієнти, так і співробітники студії отримують сучасний, інтуїтивно
зрозумілий інструмент для взаємодії.
Отже, створення власної системи на базі React - це не просто сучасний
технологічний вибір, а й відповідь на реальні потреби студії та очікування
клієнтів у сфері web-дизайну сьогодення.
1.3 Постановка задачі на розробку
Аналіз ринку й огляд подібних систем показали, що для ефективної роботи
студії "Mozhna Tattoo" у веб-середовищі оптимально відмовитися від шаблонних
no-code рішень і зосередитися на створенні власного web-додатка. Такий підхід
дозволяє глибше врахувати унікальні потреби студії, забезпечити гнучкість
системи та позбутися обмежень, які притаманні готовим платформам. Власне
рішення відкриває більше можливостей для розвитку та адаптації під справжні
запити бізнесу.

Враховуючи недоліки існуючих підходів, у межах цієї кваліфікаційної
роботи постає завдання розробити такі технічні рішення: Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 12

1. Оптимізувати роботу сайту завдяки використанню архітектури SPA.
Для цього доцільно застосувати бібліотеку React та інструмент збірки Vite
[5, 15]. Такий підхід дозволить створити легкий і швидкий web-додаток,
мінімізувати зайвий код і забезпечити плавну роботу інтерфейсу - що
особливо цінно для користувачів смартфонів і планшетів.
2. Розробити інтуїтивно зрозумілу систему керування станом для
безперервної взаємодії користувача з сайтом. Тут доцільно використати
Context API, що дозволяє передавати дані між компонентами без складної
ручної передачі властивостей. Це дасть змогу уникнути повторного
введення даних після переходу з портфоліо до форми запису, зробивши
користувацький досвід значно комфортнішим.
3. Реалізувати динамічну фільтрацію контенту в галереї. Модуль має
швидко сортувати зображення за кількома критеріями наприклад, за стилем
чи майстром - без перезавантаження сторінки й без додаткових запитів до
сервера. Подібні рішення широко застосовують у сучасних клієнтських
інструментах для роботи з візуальним контентом, де першочерговою стає
саме швидкість і плавність взаємодії.
4. Подбати про доступність, адаптивність і SEO-придатність ресурсу.
Варто побудувати семантично правильну структуру коду, щоб сайт легко
індексувався пошуковими системами та стабільно працював на різних
пристроях і навіть за неідеального інтернет-з’єднання.
У підсумку, основним завданням цієї кваліфікаційної роботи є
проєктування та розробка web-орієнтованої інформаційної системи для студії
татуювання та пірсингу. Така система має поєднувати високу швидкість роботи,
гнучку логіку функціонування й інтуїтивно зрозумілий інтерфейс - усе для того,
щоб зробити взаємодію комфортною як для клієнтів, так і для команди студії.
1.4 Висновки до розділу 1
Детальний аналіз ринку продемонстрував: для сучасної тату-студії
недостатньо простої сайт-візитки. Необхідно мати зручний інструмент для
онлайн-запису та можливість ефективно презентувати велику кількісАтрьк .
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 13

візуального матеріалу. Дослідження швидкості роботи та зручності від сучасного
сайту: клієнти очікують швидкості завантаження та комфорту користування з
мобільних пристроїв.
Огляд існуючих рішень - від соціальних мереж до конструкторів сайтів і
великих порталів - дозволив чітко окреслити їхні ключові недоліки: надмірний
код, обмежене налаштування під власні потреби та не завжди зручний процес
запису на послуги.
У підсумку найбільш доцільним рішенням стало створення Single Page
Application на основі бібліотеки React. Це відкриває можливості для швидкої
роботи сайту, зручної фільтрації контенту та побудови простої, інтуїтивно
зрозумілої системи онлайн-запису. Саме ці висновки стали підґрунтям для
подальшого проєктування та реалізації веб-системи, що докладно розглядається
у наступних розділах.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 14

РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ НА
РОЗРОБКУ
2.1. Технічні вимоги та показники якості системи
Головне завдання нового вебдодатка студії "Mozhna Tattoo" - створити для
користувача досвід, який за рівнем зручності, швидкості й зрозумілості не
поступається сучасним мобільним застосункам. У сфері художнього татуювання
це особливо актуально, адже саме візуальне враження визначає інтерес клієнта.
Якщо зображення відкриваються повільно або інтерфейс реагує із затримкою,
відвідувач може втратити інтерес ще до того, як побачить портфоліо чи перелік
послуг. Тому під час розробки нового ресурсу особливу увагу приділено не лише
зовнішньому вигляду, а й технічній досконалості роботи сайту.
Досвід використання сайту на основі хмарного конструктора Tilda
засвідчив: готові платформні рішення не завжди відповідають реальним
потребам таких проєктів. Одна з основних проблем - надлишок автоматично
згенерованого коду, який сповільнює завантаження сторінок і створює відчутні
затримки при відображенні великої кількості візуального контенту. Для тату-
студії це критично, адже саме фотографії робіт, приклади стилів і деталі
виконання формують перше враження про майстрів. У таких умовах сайт
повинен працювати швидко, стабільно й не створювати жодних технічних
бар’єрів для користувача.
Особливість цього проєкту полягає в тому, що художнє татуювання завжди
сприймається насамперед візуально. Клієнт не може оцінити якість роботи лише
за коротким описом, тому саме світлини високої якості стають центральним
елементом сайту. Вони мають не просто бути присутніми, а відкриватися
швидко, коректно відображатися на різних пристроях і не створювати зайвого
навантаження на інтерфейс. Тривале завантаження фото погіршує загальне
враження і знижує довіру до студії. Виходячи з цього, серед технічних вимог
нової системи ключовою стала можливість забезпечити швидкий доступ до
основного контенту за будь-яких умов.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 15

Тому однією з основних вимог до проєкту стала саме висока швидкодія.
Якість роботи вебсайту оцінюється з урахуванням сучасних методик аналізу
продуктивності, таких як Google Core Web Vitals [7]. Найголовнішим показником
є швидкість появи основного контенту - момент, коли користувач бачить
ключовий елемент сторінки. У випадку тату-студії це, передусім, фотографії
робіт або блок із динамічною галереєю. Відображення цього контенту має бути
максимально швидким навіть при слабкому інтернет-з'єднанні, адже саме перші
секунди взаємодії формують у користувача відчуття якості ресурсу.
Для досягнення потрібного рівня швидкодії було вирішено відмовитися
від класичної багатосторінкової моделі на користь архітектури Single Page
Application. Такий підхід є більш доцільним для ресурсу, де користувач часто
переходить між портфоліо, описом послуг, сторінками майстрів і формою
запису. У SPA завантаження основного каркаса сайту відбувається один раз, а
надалі сторінка оновлює лише потрібні частини без повного перезавантаження.
Це дозволяє уникнути затримок, характерних для традиційних сайтів, і створює
більш плавний та природний сценарій взаємодії. Для користувача це означає, що
перехід між розділами виглядає швидким і безперервним, без проміжних
порожніх екранів або помітних пауз.
Ще одним ключовим принципом розробки став підхід Mobile-first [25].
Адже значна частина потенційних клієнтів тату-студій знайомиться із сайтом
саме зі смартфона. Для цієї аудиторії вирішальне значення мають зручність
навігації, швидкість завантаження та доступність основної інформації без
зайвого скролінгу. Тому інтерфейс нового сайту має не просто підлаштовуватися
під різні розміри екранів, а й адаптуватися до сценаріїв використання на
мобільних пристроях. Великі галереї, наприклад, перетворюються на зручні
слайдери, а навігаційні елементи - на компактне меню, яке не перевантажує
екран. Це дозволяє користувачам зосередитися на головному - контенті, а не на
пошуку потрібної інформації.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 16

Варто також звернути увагу на технічну інфраструктуру сайта. На відміну
від класичних серверних рішень, де сторінка формується при кожному запиті,
новий вебдодаток складається переважно зі статичних файлів. Це дозволяє
розміщувати сайт на сучасних хмарних платформах і швидко доставляти контент
користувачам незалежно від їхнього місцезнаходження. Такий підхід вигідний
не лише з точки зору швидкості, але й забезпечує надійність і простоту
підтримки. Окрім цього, автоматичне шифрування з'єднання через HTTPS
підвищує рівень безпеки й довіри до ресурсу.
Ураховуючи всі ці фактори, новий вебдодаток студії "Mozhna Tattoo"
розглядається не просто як інформаційний сайт, а як повноцінний цифровий
інструмент для взаємодії з клієнтами. Його розробка спрямована на вирішення
конкретних практичних завдань: забезпечення швидкого доступу до портфоліо,
спрощення процесу запису на сеанс, покращення користувацького досвіду й
формування сучасного іміджу студії в онлайн-просторі. Саме поєднання
технічної швидкодії, продуманої структури й адаптивного інтерфейсу робить
цей підхід оптимальним для такого проєкту.
2.2. Проєктування логічної структури та інтелектуальних сценаріїв
взаємодії
Архітектура нового додатка базується на модульному принципі з
використанням бібліотеки React. Замість класичного підходу, коли кожна
сторінка кодується окремо, інтерфейс формується з незалежних, логічно
пов’язаних "цеглинок": від унікальних SVG-масок до складних компонентів
Coverflow-галереї. Така структура дозволяє не лише гнучко розширювати
функціонал, а й підтримувати чистоту та цілісність коду. Логічна ієрархія
додатка охоплює презентаційну головну сторінку, деталізовані розділи послуг
("Татуювання", "Пірсинг"), інтерактивне портфоліо та персональні профілі
майстрів - Надії, Анастасії, Анни й інших.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 17

Особливий акцент у проєктуванні зроблено на структурі даних галереї.
Замість складних і повільних запитів до бази даних, вся інформація про роботи
(шляхи до зображень, стиль, зв’язок із конкретним майстром) зберігається у
легкій локальній JSON-структурі. Це дало змогу реалізувати інтуїтивний та
надшвидкий алгоритм багатовимірної фільтрації: користувач може миттєво
перемикатися між різними стилями - від графіки до олдскулу - або обирати
роботи свого улюбленого майстра, і галерея реагує на це буквально з першим
кліком, без найменшої затримки.
Особливої уваги заслуговує впровадження інтелектуального сценарію
онлайн-бронювання через React Context API [17]. Дослідження сайтів
конкурентів виявило типову проблему: клієнт, надихнувшись роботою
конкретного майстра, натискає кнопку запису, але потрапляє на порожню форму
й змушений заново шукати ім’я майстра у випадаючому списку. У системі
"Mozhna Tattoo" цю проблему вирішено на випередження. Якщо користувач
ініціює запис із профілю Надії Можаєвої чи безпосередньо з її роботи в галереї,
глобальний стан (BookingContext) автоматично зберігає цей вибір (рис. 2.1).
Модальне вікно з ефектом розмиття фону вже містить попередньо заповнену
інформацію про обраного спеціаліста та послугу. Такий безшовний сценарій
мінімізує когнітивне навантаження клієнта, залишаючи лише одну дію -
введення контактного номера.

Рисунок 2.1 - Схема взаємодії компонентів системи через глобальний стан
BookingContext.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 18

2.3. Вимоги до інтерфейсу користувача (UI/UX) та прототипування
Дизайн-концепція сайту студії татуювання вибудовується на тонкому
балансі між сучасною функціональністю IT-продукту та яскравою візуальною
експресією. Процес проєктування інтерфейсу стартував зі створення цілісної
дизайн-системи у Figma [11]: замість ізольованих макетів одразу формувалася
бібліотека компонентів (UI Kit), яка охоплює типографіку, палітру кольорів,
стани кнопок (hover/active) і векторні ресурси. Цей підхід дозволяє моделювати
користувацькі сценарії (User Flows) ще до початку розробки, що гарантує
інтуїтивність і логічність взаємодії.
Для підкреслення преміальності послуг і створення унікальної атмосфери
обрано концепцію глибокого темного інтерфейсу (Dark UI) [9]. Основний фон не
суцільно чорний - він містить складні відтінки темно-оливкового кольору. З
погляду психології сприйняття, такий фон створює ефект «музейного
освітлення», де фотографії татуювань виглядають максимально контрастно,
деталізовано й об’ємно. Водночас темна тема зменшує навантаження на очі під
час тривалого перегляду портфоліо. Для елементів Call-to-Action (наприклад,
кнопок запису) й інтерактивних ліній-ниток, що пронизують сайт, використано
фірмовий приглушений зелений: він працює як візуальний маркер, допомагаючи
користувачу інтуїтивно знаходити ключові точки взаємодії.
Для втілення творчого духу індустрії модифікації тіла дизайн-система
навмисне порушує класичні правила вебдизайну. Повністю відкинуто нудну,
передбачувану «квадратну сітку» - замість стандартних карток контентні блоки
(наприклад, подарункові сертифікати чи профілі майстрів) оформлені складними
векторними масками у вигляді рваних, асиметричних зірок. Під час розробки
компонента IrregularStar ці форми були експортовані з Figma і імплементовані в
код через CSS-властивість mask-image [18]. Завдяки цьому зірки візуально
«прорізають» цифровий простір сторінки, заходячи на сусідні блоки. Така
складна геометрія формує унікальний, трохи бунтарський візуальний почерк
бренду «Mozhna Tattoo», недосяжний для типових конструкторів.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 19

Щоб надати контенту глибини та багаторівневості, активно
використовується ефект матового скла (Glassmorphism) [10]. Напівпрозорі
інформаційні панелі з ефектом backdrop-blur дозволяють розміщувати
читабельний текст поверх насичених фонових зображень чи графіки, створюючи
враження просторової багатошаровості.
Важливий акцент зроблено на мікроінтеракціях і ергономіці. Інтерфейс
спроєктовано у форматі «мікро-блогінгу»: контент подається порційно, з
акцентом на візуальні елементи й лаконічні текстові підводки, щоб уникати
перевантаження користувача. Закони ергономіки - зокрема закон Фіттса - суворо
дотримані: розміри клікабельних елементів адаптовано для сенсорних екранів [8,
12]. Усі кнопки мають плавні CSS-транзиції при наведенні, забезпечуючи
миттєвий зворотний зв’язок, а навігаційна панель залишається закріпленою
(sticky header), гарантуючи доступ до меню з будь-якої точки сайту.
2.4. Техніко-економічне обґрунтування доцільності створення web-
ресурсу
У сучасному комерційному середовищі розробка програмного
забезпечення має бути підкріплена чіткими фінансовими аргументами. Техніко-
економічне обґрунтування (ТЕО) створення власного вебдодатка для студії
"Mozhna Tattoo" ґрунтується на розрахунку сукупної вартості володіння
продуктом (Total Cost of Ownership, TCO) та прогнозованому рівні повернення
інвестицій (ROI).
Перехід цифрового представництва студії з SaaS-платформи на власну
архітектуру радикально змінює фінансову модель бізнесу. Наприклад,
комерційна модель конструктора Tilda передбачає регулярні щомісячні або
щорічні платежі за повний функціонал - зокрема, можливість підключати власні
скрипти, формувати анімації, прибирати логотипи платформи. У довгостроковій
перспективі (3-5 років) підприємство витрачає тисячі доларів лише на оренду
чужої інфраструктури і стикається з проблемою "Vendor Lock-in":

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 20

студія не володіє вихідним кодом сайту й не може перенести його на інший
хостинг у разі зміни тарифної політики.
Власний React SPA повністю вирішує цю проблему. Оскільки результат
компіляції додатка у Vite - це набір мініфікованих статичних файлів, система не
потребує дорогих серверів чи складної інфраструктури. Такий сайт можна
розмістити безкоштовно на сучасних хмарних CDN-платформах (GitHub Pages,
Vercel). У результаті щомісячні операційні витрати на підтримку ресурсу
фактично зникають, залишаючи лише базову щорічну оплату домену. Вивільнені
кошти студія може спрямувати на таргетований маркетинг (наприклад, рекламу
в Instagram чи TikTok), що безпосередньо збільшує прибуток.
Однак найбільший економічний ефект від впровадження власного
вебдодатка полягає в оптимізації конверсії (Conversion Rate Optimization, CRO).
За результатами досліджень, кожна зайва секунда завантаження сторінки на
мобільному пристрої знижує конверсію на 20% [26]. Завдяки SPA-архітектурі та
миттєвому рендерингу компонентів новий сайт суттєво зменшує показник
відмов (Bounce Rate). Клієнти більше не розчаровуються через довге очікування,
залишаються на сайті довше і частіше завершують покупку чи запис на послугу.
Окрім того, власна архітектура забезпечує масштабованість бізнесу: якщо студія
захоче запустити продаж мерчу чи підключити складну CRM-систему, це можна
реалізувати додаванням нових React-компонентів, а не переходом на дорогі
тарифи електронної комерції у конструкторах.
Не менш значущою є оптимізація робочого часу персоналу студії.
Інноваційна «розумна» форма запису (на основі React Context API), яка
автоматично підтягує ім’я обраного майстра та послугу із галереї, фактично
перетворює сайт на віртуального адміністратора. Замість довгих уточнювальних
діалогів у месенджерах («А до кого ви хотіли?», «Який стиль?») співробітники
отримують чітко структуровані «гарячі» заявки. Економія 10-15 хвилин на
кожному ліді дає у підсумку десятки годин на місяць, які можна спрямувати на
надання бездоганного сервісу клієнтам у студії. Таким чином, створений
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 21

вебдодаток - це не просто сучасне рішення, а потужна інвестиція, що автоматизує
рутинні процеси й стимулює прибутковість бізнесу.
2.5 Висновки розділу 2
Ключовим підсумком цього розділу стало чітке обґрунтування доцільності
впровадження архітектури Single Page Application (SPA) із використанням
бібліотеки React. Визначено конкретні критерії якості, які відповідають світовим
стандартам Google Core Web Vitals - зокрема, забезпечення завантаження
основного контенту (LCP) у межах 1,5-2 секунд і мінімізації візуальних зсувів
макета. Компонентний підхід дозволив сформувати масштабовану систему, де
кожен елемент інтерфейсу працює як незалежний і оптимізований модуль. Це
гарантує високу продуктивність навіть під час роботи з великими обсягами
мультимедійного контенту, забезпечуючи сучасний рівень користувацького
досвіду.
Проєктування логічної структури та сценаріїв взаємодії дозволило
сформувати концепцію «розумного» інтерфейсу. Використання глобального
стану (BookingContext) забезпечило створення безшовного сценарію онлайн-
запису: система автоматично фіксує вибір користувача в галереї та синхронізує
ці дані з формою бронювання. Це архітектурне рішення ліквідує когнітивний
розрив на шляху користувача, прискорюючи, полегшуючи та інтуїтивно
пояснюючи процес перетворення відвідувача на клієнта.
Під час розробки UI/UX-концепції було продумано поєднання бунтарської
й водночас преміальної естетики. Темна колірна палітра, ефекти glassmorphism
та нестандартна геометрія у формі асиметричних SVG-зірок дозволили створити
візуальний стиль. Він віддзеркалює художню філософію студії. Запровадження
принципу Mobile-first гарантує бездоганну ергономіку на мобільних пристроях
[25]. Це особливо важливо для цільової аудиторії сучасної тату-індустрії.
Техніко-економічне обґрунтування підтвердило не лише технологічну, а й
фінансову вигідність проєкту. Перехід на власну розробку дає студії змогу
усунути регулярні витрати на абонентську плату для сторонніх сервісів і
забезпечує повну незалежність від постачальників платформ. ПрогнозованАрек .
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 22

зростання конверсії та автоматизація обробки заявок адміністративним
персоналом генерують значний позитивний економічний ефект у довгостроковій
перспективі. Визначені в цьому розділі вимоги та архітектурні рішення
забезпечують надійний фундамент для подальшої програмної реалізації системи,
детально описаної в наступному розділі роботи.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 23

РОЗДІЛ 3. РОЗРОБКА АРХІТЕКТУРИ ІНТЕРФЕЙСУ ТА ДИЗАЙНУ
СИСТЕМИ
Проєктування інтерфейсу користувача (UI) та моделювання
користувацького досвіду (UX) для інформаційної системи студії «Mozhna
Tattoo» - це не просто технічний етап, а саме творчий процес, який визначає
характер проєкту. Художня індустрія вимагає від цифрового продукту не тільки
функціональності, а й глибокої візуальної виразності, що передає філософію і
цінності бренду. Для створення цілісної, емоційно захопливої візуальної
концепції, встановлення логічних зв'язків між екранами та побудови
інтерактивного прототипу використано графічне середовище Figma [11].
Художнє татуювання та пірсинг базуються на індивідуальному стилі, тому
візуальне оформлення сайту підпорядковане єдиній айдентиці студії. Для вибору
колірної концепції застосовано Dark UI (темну тему) [9], яка є стандартом для
сучасних портфоліо-ресурсів преміального сегмента. Основне тло інтерфейсу
базується на поєднанні глибокого чорного та насиченого темно-оливкового
кольорів. Такий вибір обґрунтовано психологією сприйняття: темне тло виступає
«галерейним освітленням», завдяки чому фотографії робіт виглядають
максимально об’ємними та контрастними.
Щоб зберегти впізнаваність бренду та уникнути когнітивного дисонансу у
постійних клієнтів, ключові фірмові відтінки були гармонійно інтегровані у нову
графічну концепцію на вищому рівні деталізації. Для елементів Call-to-Action
(онлайн-запис, активні фільтри) обрано фірмовий приглушений зелений колір,
який органічно вписується у загальну естетику (рис. 3.1). Типографіка
підпорядковується принципам читабельності та стилістичної відповідності:
заголовки набрано витонченим шрифтом із засічками (Serif), що підкреслює
мистецьку складову, а основний текст - сучасним гротеском (Sans-serif) для
легкого сприйняття (рис. 3.2).
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 24

Рисунок 3.1 - Палітра кольорів та типографіка у середовищі Figma.

Рисунок 3.2 - Елементи дизайн-системи в різних станах.
3.1. Інноваційні та нестандартні рішення в дизайні інтерфейсу
Створюючи архітектуру сторінок, головною метою було подолання
типових проблем взаємодії клієнта з тату-студіями. Так народилася ідея розумної
слайдерної галереї портфоліо (рис. 3.3). Замість нескінченного хаотичного
полотна зображень, користувач отримує інтелектуальний інструмент, де кожна
художня робота супроводжується карткою її автора та стилістичними тегами.
Вбудована панель фільтрації дозволяє миттєво сортувати роботи за напрямками
чи майстрами, перетворюючи складний процес вибору на захопливе й комфортне
дослідження.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 25

Рисунок 3.3 - Прототип слайдерної галереї робіт з інтегрованою панеллю
багатокритеріальної фільтрації та відображенням майстра.
Не менш важливим, і водночас одним із найскладніших етапів
проєктування, стала розробка модуля тривимірної візуалізації анатомічних зон
пірсингу (рис. 3.4) [19]. Практика показує, що клієнти часто губляться у
специфічній термінології, не розуміючи різниці між певними видами проколів.
Інтерактивна карта-схема вирішує цю проблему абсолютно інтуїтивно:
відвідувачу достатньо обрати бажану точку на візуальній моделі, і система сама
підкаже правильну назву проколу, одразу запропонувавши релевантні варіанти
прикрас.

Рисунок 3.4 - Прототип модуля багатовимірної візуалізації анатомічних зон
пірсингу.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 26

Для презентації базових послуг студії було обрано формат інтерактивних
карток із двостороннім рендерингом (рис. 3.5). Вони плавно перевертаються під
час наведення курсору або дотику на сенсорному екрані, відкриваючи деталі та
вартість. Цей легкий елемент гейміфікації ненав'язливо утримує увагу
користувача та стимулює інтерес. Емоційну динаміку продовжує і блок акційних
пропозицій. Щоб уникнути нудної, передбачуваної квадратної сітки, сезонні
знижки та сертифікати оформлені у вигляді фірмових рваних зірок, що ніби
підвішені у цифровому просторі на тонких графічних нитках. Завдяки свідомому
використанню від'ємних вертикальних відступів, ці масивні деталі візуально
наповзають на сусідні секції, створюючи бунтарський ефект багатошаровості та
тривимірної глибини сторінки.

Рисунок 3.5 - Проєктування інтерактивних карток послуг та асиметричної
композиції акційних пропозицій.
Атмосфера студії - це не лише зображення, а й загальний настрій простору.
Тому макет збагатився слайдером фото з сеансів та студії (рис. 3.6), для
презентування комфортної та невимушеної атмосфери між майстрами та
клієнтами, та вбудованим музичним плеєром, що задіює слуховий канал
сприйняття і дозволяє користувачу ще до фізичного візиту зануритися у
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 27

справжній вайб тату-сеансу. Кульмінацією емоційного дизайну стало
перенесення теплої фізичної традиції студії у цифровий вимір. Після успішного
онлайн-запису перед клієнтом з’являється модальне вікно з ефектом матового
скла [10], де генерується випадкове позитивне передбачення (рис. 3.7). Це
рішення не несе прямого комерційного навантаження, проте залишає
надзвичайно приємний післясмак і міцно прив'язує до бренду на емоційному
рівні.

Рисунок 3.6 - Прототип блоку з вбудованим музичним плеєром.

Рисунок 3.7 - Інтерфейс модального вікна гейміфікованого передбачення.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 28

3.2. Проєктування базових структурних та інформаційних модулів
Поряд із розробкою цих інноваційних фішок, величезна увага приділялася
формуванню надійного інформаційного каркаса. Блок знайомства з командою
свідомо відійшов від сухого корпоративного стилю: він спроєктований у форматі
відкритого листа - щирого, персоналізованого звернення студії до свого гостя
(рис. 3.8). Цей мотив відкритості та емпатії продовжується на персональних
сторінках майстрів. Детальна інформація про досвід, спеціалізацію та
індивідуальне портфоліо допомагає клієнту побачити за художніми роботами
живу людину, що є критично важливим фактором довіри у цій сфері.

Рисунок 3.8 - Візуальне оформлення блоку «Про нас» у форматі відкритого
листа.
Особливе місце в інформаційній архітектурі системи посідають
персональні сторінки майстрів, оскільки саме тут відбувається фінальне
знайомство клієнта з творчим стилем фахівця (рис. 3.9). На прикладі сторінки
Надії Можаєвої можна простежити, як дизайн-система підтримує ідею
персоналізації та емоційної відкритості. Ліва частина інтерфейсу спроєктована у
вже згаданому форматі відкритого листа: лаконічна розповідь про майстра, її
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 29

художнє бачення та спеціалізацію створюють відчуття живого діалогу.
Використання великих портретних зображень на темному тлі дозволяє передати
не лише зовнішній вигляд, а й характер артиста, що критично важливо для
встановлення довіри.
Візуальна презентація робіт майстра реалізована через інтерактивний
слайдер із ефектом Coverflow, що додає сторінці тривимірної глибини. Кожна
робота в галереї виглядає як окремий експонат на віртуальній виставці, де
центральне зображення фокусує на собі увагу, а бокові картки створюють
перспективу. Завдяки використанню фірмового зеленого кольору для кнопок
цільової дії, таких як «Переглянути галерею» та «Записатися на сеанс»,
користувач завжди бачить чіткий шлях для продовження взаємодії. Текстова
інформація про вартість сеансу та посилання на соціальні мережі інтегровані
максимально органічно, не перевантажуючи композицію, але залишаючись
завжди доступними для швидкого ознайомлення.

Рисунок 3.9 - Прототип сторінки майстра та відображення його портфоліо.
Практичні завдання бізнесу також знайшли своє відображення у
продуманій структурі інтерфейсу. Аналіз попереднього сайту виявив гостру
потребу у зручному каталозі прикрас для пірсингу. Створення окремого,
ергономічного блоку-каталогу, який органічно переплітається з модулем
візуалізації проколів, дозволило закрити цю інформаційну прогалину та зняти
значну частину рутинного навантаження з адміністраторів. Зони соціального
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 30

доказу та комунікації, такі як блок із реальними відгуками клієнтів, інтегрована
мапа та контактні дані, були розміщені з урахуванням звичних користувацьких
патернів для забезпечення безперешкодного доступу до них (рис. 3.10-3.11).

Рисунок 3.10 - Візуальне оформлення відгуків та форми для їх написання.

Рисунок 3.11 - Проектування футера з контактною інфомацією.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 31

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

Рисунок 3.12 - Проектування мобільної версії.
У результаті проєктування у Figma було сформовано завершений,
ергономічний та візуально захоплюючий каркас інформаційної системи, який
повністю готовий до перенесення в програмний код (рис. 3.13).
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 32

Рисунок 3.13 - Схема логічних зв'язків та користувацьких маршрутів (User
Flows) у режимі прототипування Figma.
3.3 Висновок до розділу 3
Підсумовуючи етап проєктування інтерфейсу та дизайну інформаційної
системи студії «Mozhna Tattoo», можна стверджувати, що створена концепція
повністю відповідає поставленим завданням та специфіці креативного бізнесу.
Використання графічного середовища Figma дозволило не лише розробити
естетично привабливу візуальну оболонку в стилі Dark UI, а й вибудувати
складну інформаційну архітектуру, орієнтовану на максимальну зручність
користувача. Впровадження інноваційних модулів, таких як інтерактивна 3D-
карта проколів, розумна галерея з фільтрацією та гейміфіковані елементи
передбачень, перетворює сайт із простого інформаційного ресурсу на
повноцінний інструмент емоційної взаємодії з брендом.
Спроєктована дизайн-система забезпечує візуальну цілісність усіх розділів
- від презентаційних блоків до функціональних форм запису, а суворе
дотримання принципів Mobile-first гарантує бездоганну роботу сайту на
сучасних мобільних пристроях. Сформований у Figma інтерактивний прототип
став надійним фундаментом для подальшої програмної реалізації, дозволивши
Арк.
заздалегідь протестувати всі користувацЧькДі ТсУц е2н6а р2і2ї 2т1а. 0п2е2р.еПкЗо натися в їхній

Зм н. Арк. № докум. Підпис Дата 33

логічності та ефективності. Таким чином, розроблений дизайн не лише вирішує
маркетингові завдання студії, а й створює комфортне, інтуїтивно зрозуміле та
технологічне цифрове середовище для клієнтів і команди «Mozhna Tattoo».

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 34

РОЗДІЛ 4. ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ
СИСТЕМИ
4.1. Обґрунтування вибору технологічного стеку та інструментальних
засобів розробки
Процес розробки сучасної web-орієнтованої інформаційної системи
вимагає безкомпромісного підходу до вибору інструментарію. Усі обрані
технології повинні утворювати єдину, безконфліктну екосистему, здатну
забезпечити миттєвий рендеринг, складну маршрутизацію та управління
глобальним станом. З огляду на обрану архітектурну модель Single Page
Application (SPA), класичні монолітні системи управління контентом
(наприклад, CMS на базі PHP/MySQL) були категорично відхилені на користь
високопродуктивного JavaScript-стеку.
Основною мовою програмування клієнтської логіки було обрано
TypeScript - строго типізовану надбудову над JavaScript [13]. Оскільки система
опрацьовує складні масиви даних (багатокритеріальна фільтрація портфоліо
майстрів та динамічна передача параметрів бронювання), статична типізація
стала життєво необхідною. Створення чітких інтерфейсів (наприклад, interface
IGalleryItem або interface IBookingState) дозволило виявляти архітектурні
помилки ще на етапі написання коду, унеможливлюючи їх потрапляння у
фінальну збірку.
Ядром для побудови користувацького інтерфейсу стала бібліотека React
[5]. На відміну від інших фреймворків, React фокусується виключно на
візуальному шарі відображення, надаючи розробнику абсолютну свободу в
проектуванні архітектури. Її головна перевага - технологія Virtual DOM
(віртуального дерева об'єктів документа). Для сайту тату-студії, який
перенасичений важкими графічними елементами, класичне перемальовування
сторінки при кожній зміні фільтра (наприклад, перемикання з "Графіки" на
"Олдскул") викликало б катастрофічні затримки. React натомість блискавично
обчислює різницю станів і точково оновлює лише ті компоненти галереї, які
змінилися, гарантуючи реакцію системи (INP) швидше ніж за 100 мілісекунд. За
Арк.
безшовні переходи між сторінками відповЧідДаТє Уб і2бл6і о2т2е2к1а. R02ea2c.Пt RЗo uter [16]: вона

Зм н. Арк. № докум. Підпис Дата 35

імітує класичний багатосторінковий сайт, але підміняє компоненти миттєво, без
фізичного перезавантаження вкладки браузера.
Що стосується візуального оформлення, аналіз існуючих рішень довів, що
шаблонні сіткові фреймворки (як Bootstrap) вбивають креативність. Тому було
прийнято рішення використати utility-first фреймворк Tailwind CSS [14]. Цей
інструмент дозволяє стилізувати елементи безпосередньо в JSX-розмітці і є
критично важливим для нашого проєкту. Саме завдяки Tailwind вдалося легко
реалізувати преміальні ефекти матового скла (backdrop-blur), застосувати
від'ємні відступи для складної геометрії (наповзання SVG-масок) та радикально
зменшити розмір кінцевого файлу стилів завдяки системі автоматичного
видалення невикористаного коду (PurgeCSS) [14].
Для ініціалізації додатку застарілий Webpack було замінено на сучасний
збирач Vite [15]. Завдяки нативним ES-модулям (Native ESM), Vite пришвидшує
запуск локального сервера до мілісекунд і забезпечує миттєве оновлення модулів
(HMR), що економить безліч часу при верстці складних анімацій. Проєктування
інтерфейсу та векторних елементів відбувалося у хмарному середовищі Figma,
де і були створені фірмові рвані SVG-зірки, які згодом імплементувалися в код
як маски для зображень. З огляду на статичну природу зібраного додатка,
платформою розгортання було обрано GitHub Pages [24], що забезпечує
автоматичну CI/CD інтеграцію, швидку доставку контенту (CDN) та
безкоштовний SSL-сертифікат.
Таким чином, обраний технологічний стек утворює цілісний, сучасний
комплекс рішень, що ідеально відповідає амбітній меті - створити швидку,
безпечну та візуально унікальну систему.
4.2. Програмна реалізація системи та інтеграція компонентів
Процес безпосередньої розробки web-орієнтованої інформаційної системи
"Mozhna Tattoo" вимагав вирішення низки нетривіальних інженерних та
візуальних завдань. Розробка складалася з послідовних етапів: побудови
архітектури маршрутизації, реалізації алгоритмів обробки локальних даних,
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 36

налаштування глобального стану та ювелірної інтеграції складної геометрії
інтерфейсу.
4.2.1. Проєктування логічної та фізичної структури веб-додатка.
Фізична структура розробленого SPA-додатка спроєктована за суворим
модульним принципом. Коренева директорія проєкту містить конфігураційні
файли збірки vite.config.ts, tailwind.config.js, tsconfig.json, а вся бізнес-логіка
зосереджена в папці src (рис. 4.1).
Усередині src компоненти згруповані так, щоб підтримувати чітке
розділення відповідальностей: у components зберігаються ізольовані
перевикористовувані UI-елементи, зокрема атоми Button.tsx і Card.tsx, а
також модулі CoverflowGallery.tsx і PiercingViewer.tsx. Папка pages містить
компоненти-контейнери, які виконують роль логічних сторінок,
наприклад HomePage.tsx і TattooPage.tsx. Модуль context відповідає за
глобальний стан системи через BookingContext.tsx, у hooks зосереджені
кастомні React-хуки для обробки даних, такі як useArtists.ts і usePortfolio.ts, а
в data зберігаються нормалізовані JSON-масиви об'єктів.
Логічна маршрутизація побудована в App.tsx (рис. 4.2). Застосовано
шаблон вкладених маршрутів. Усі сторінки обгорнуті в спільний каркас <Layout
/>, який містить фіксовані елементи (шапку, підвал). Важливим кроком стало
створення внутрішнього компонента <ScrollHandler />. Оскільки SPA-додатки не
перезавантажують сторінку, браузер не вміє коректно обробляти якірні
посилання. Цю проблему було вирішено програмно.
Аналіз наведеного фрагмента (рис. 4.2) показує, що хук useEffect
перехоплює зміни об'єкта location. Це забезпечує коректний та плавний
користувацький досвід при переходах на секції типу /#about чи /#reviews.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 37

Рисунок 4.1 - Дерево каталогів фізичної структури проєкту.

Рисунок 4.2 - Реалізація клієнтської маршрутизації та обробника скролу.
4.2.2. Налаштування бази даних та структур колекцій.
Для забезпечення миттєвої реакції інтерфейсу функції бази даних виконує
локальна нормалізована структура у форматі JSON. Дані організовані у вигляді
масивів об’єктів, що дозволяє швидко здійснювати пошук і фільтрацію (рис. 4.3).
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 38

Головними сутностями є колекції masters, tattooWorks та piercingWorks. Колекції
пов'язані між собою логічним ключем — іменем майстра (рис. 4.4).
Для доступу до цих даних розроблено кастомні хуки (наприклад,
usePortfolio.ts). Вони ініціалізують стан через useState та надають оптимізовані
функції фільтрації, зокрема getWorksByArtist(), що гарантує безпомилковий
зв'язок між сторінкою майстра та його портфоліо.

Рисунок 4.3 - Організація даних майстрів та типізація.

Рисунок 4.4 - Схема нормалізованих структур даних (ER-діаграма зв'язків
JSON).
4.2.3. Алгоритми користувацьких скрибтів.
Найбільш технологічно складними компонентами користувацького
інтерфейсу, що виконуються виключно на стороні клієнта (в браузері), є
алгоритм 3D-каруселі портфоліо та логіка рендерингу WebGL-моделі для вибору
пірсингу. Ці модулі вимагали написання кастомних математичних алгоритмів
позиціонування об'єктів у просторі та оптимізації рендерингу для забезпечення
стабільних 60 FPS на мобільних пристроях.
Програмна реалізація просторової каруселі (CoverflowGallery.tsx).
Замість використання готових, але важких бібліотек для створення
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 39

слайдерів (на кшталт Swiper.js), було прийнято рішення розробити власний
оптимізований алгоритм візуалізації CoverflowGallery. Алгоритм базується на
маніпуляції CSS-властивостями transform (зокрема translateX, translateZ та
rotateY) у тривимірному просторі за допомогою перспективи (perspective:
'1200px').
Основою алгоритму є обчислення відносного зміщення кожної картки
портфоліо щодо поточної активної картки. У стані компонента зберігається
індекс центрального елемента activeIndex. Під час проходу масиву
через .map() для кожної картки обчислюється offset = index - activeIndex,
де 0 означає центральну позицію, від’ємні значення — елементи ліворуч, а
додатні — праворуч. Далі використовується absOffset = Math.abs(offset) як
модуль зміщення для розрахунку глибини по осі Z і прозорості елементів (рис.
4.5).
Для оптимізації DOM-дерева скрипт відсікає рендеринг тих вузлів, які
знаходяться занадто далеко від центру екрана (if (absOffset > 2) return null;). Це
радикально зменшує використання оперативної пам'яті браузера.
Оскільки карусель працює з тривимірними трансформаціями, нативний
горизонтальний скрол браузера тут не підходить, тому використано кастомний
обробник свайпів для мобільних пристроїв. Такий підхід із записом стартової
координати в touchstart, обчисленням diffX у touchend і перевіркою
порога 50 пікселів відповідає типовій логіці детекції горизонтальних свайпів.
При onTouchStart зчитується e.touches[0].clientX і зберігається як
початкова точка жесту, а при onTouchEnd береться фінальна координата, після
чого рахується diffX = startX - endX. Якщо Math.abs(diffX) > 50, жест вважається
достатньо вираженим для зміни слайда; при додатному diffX виконується свайп
вліво, при від’ємному — вправо, і activeIndex безпечно інкрементується або
декрементується (рис. 4.6).
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 40

Рисунок 4.5 - Алгоритм математичного розрахунку просторових трансформацій
карток.

Рисунок 4.6 - Алгоритм обробки сенсорних подій (Swipe).
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 41

Рисунок 4.7 – Реалізований інтерфейс каруселі портфоліо.
Програмне управління WebGL-сценою (PiercingViewer.tsx).
Вимога технічного завдання щодо впровадження інтерактивної 3D-
візуалізації проколів вимагала роботи з технологією WebGL. Для її інтеграції в
React-екосистему використано бібліотеку @react-three/fiber (декларативний
рендерер для Three.js) та набір утиліт @react-three/drei [20-22].
Компонент <Model/> отримує масив координат точок
проколів dotPositions (рис. 4.8). Модель голови людини Woman
head.fbx завантажується асинхронно, після чого створюється її глибока копія,
щоб не змінювати оригінальний кешований ассет у пам’яті браузера. Далі всі
меші обходяться через .traverse(), і кожному з них призначається новий
матеріал THREE.MeshStandardMaterial у темно-оливковій палітрі студії з
високою шорсткістю та низькою металічністю. Координати проколів
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 42

перетворюються на THREE.Vector3, після чого в цих точках рендеряться дві
сфери [20]. Для маркерів застосовано depthTest={false} і depthWrite={false}, щоб
вони завжди відображалися поверх моделі та були видимі незалежно від кута
обертання.

Рисунок 4.8 - Рендеринг 3D-моделі та просторових маркерів
(PiercingViewer.tsx).
Для того, щоб при перемиканні видів пірсингу (наприклад, від брови до
губи) камера не стрибала миттєво, а плавно перелітала, реалізовано компонент
CameraRig (рис. 4.9). Він не має візуального представлення (return null), але керує
станом сцени. Хук useFrame виконує колбек-функцію 60 разів на секунду. У
ньому використовується метод лінійної інтерполяції векторів lerp(targetVector,
alpha). Камера поступово (на 5% або 0.05 за кожен кадр) наближається до заданих
координат activeCam, завжди фіксуючи свій об'єктив точно на центрі сцени
завдяки методу state.camera.lookAt(0, 0, 0).

Рисунок 4.9 - Алгоритм кінематографічного управління камерою.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 43

Рисунок 4.10 – Реалізований інтерфейс візуалізації проколів на 3D моделі.
4.2.4. Управління глобальним станом та інтеграція з віджетом CRM.
Найскладнішим завданням стало забезпечення безшовного переходу між
додатком та віджетом CRM. Оскільки віджет працює всередині ізольованого
iframe, пряма передача даних була неможливою. Проблему вирішено через
глобальний стан BookingContext та механізм window.postMessage (рис. 4.9) [17].

Рисунок 4.9 - Асинхронний комунікаційний міст між React та CRM.
4.2.5 Інтеграція дизайну, забезпечення комфорту та наповнення контентом.
Перенесення візуальної концепції у робоче середовище браузера
здійснювалося за допомогою фреймворку Tailwind CSS. Використання
атомарних (utility-first) класів дозволило уникнути створення громіздких
зовнішніх файлів стилів і гнучко керувати відображенням безпосередньо в JSX-
коді компонентів. Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 44

Для забезпечення функціонального комфорту всім інтерактивним
елементам задано стани візуального зворотного зв'язку. У компоненті <Button />
використано класи transition-all duration-300 для плавності. При наведенні
курсору (hover:) елемент генерує світіння за допомогою кастомного класу тіні
hover:shadow-[0_0_20px_rgba(111,137,46,0.4)].
Для реалізації ефекту матового скла (Glassmorphism) у модальних вікнах
та картках послуг застосовано комбінацію класів backdrop-blur-md та
напівпрозорого фону bg-[#0a1208]/90. Це дозволяє візуально відокремити
інформаційний блок від фонового контенту.
Для створення нестандартної сітки у блоці акційних пропозицій
(DiscountSection) контейнери розміщені з використанням від'ємних
вертикальних відступів (space-y-[-60px] md:space-y-[-120px]), що забезпечує їхнє
накладання один на одного по осі Z (рис. 4.10-4.11).
Фонове відео та iframe музичного плеєра Spotify інтегровані з атрибутом
відкладеного завантаження loading="lazy", що запобігає блокуванню основного
потоку рендерингу (Main thread). Усі растрові зображення примусово
сконвертовані у сучасний формат WebP [7], що зменшило фізичну вагу графіки
на 60–75%. Оскільки архітектура SPA генерує HTML-контент динамічно, для
забезпечення коректної SEO-індексації було інтегровано бібліотеку react-helmet-
async [23]. Цей інструмент динамічно підміняє вміст тегів <title> та <meta
name="description"> залежно від активного маршруту, забезпечуючи
формування релевантних сніпетів у пошуковій видачі Google.
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 45

Рисунок 4.10 - Програмна реалізація блоків акцій з від'ємними відступами.

Рисунок 4.11 - Візуалізація блоку акційних пропозицій.
4.2.6. Процес розгортання веб-додатка на хостингу.
Фінальним етапом реалізації стало розгортання оптимізованої збірки на
хмарній платформі GitHub Pages. Процедура деплою складалася з таких
автоматизованих кроків:
1. Запуск команди npm run build, під час якої збирач Vite компілює
TypeScript у чистий JavaScript, видаляє весь невикористаний код Tailwind CSS та

Арк.
формує мініфіковану статичну директоріюЧ dДiТstУ ( р2и6с .2 42.2121). 0[1252]..П З

Зм н. Арк. № докум. Підпис Дата 46

2. Використання npm-пакета gh-pages для безпечного пушу готової збірки
у спеціальну гілку репозиторію [24].
3. Налаштування серверної маршрутизації: оскільки безсерверні хостинги
розраховані на статичні файли і не розуміють клієнтських маршрутів (на кшталт
/tattoo), у директорію public було додано спеціальний скрипт-перехоплювач
(fallback), який перенаправляє прямі запити до внутрішніх сторінок назад на
файл index.html, дозволяючи React Router коректно змонтувати потрібний
компонент.

Рисунок 4.12 - Конфігурація середовища Vite для розгортання.
У результаті виконання вищеописаних кроків додаток було успішно
розгорнуто, переведено в стан готовності до промислової експлуатації та
відкрито для етапу глибокого тестування.
4.3. Тестування системи та аналіз відповідності вимогам
Заключним етапом життєвого циклу розробки інформаційної системи є її
комплексне тестування (Quality Assurance). Головна мета цього етапу - не лише
доведення базової роботоспроможності web-додатка студії "Mozhna Tattoo", але
й виявлення потенційних "вузьких місць" (bottlenecks) в архітектурі, оцінка
ефективності алгоритмів та перевірка стійкості UI-компонентів до
нестандартних дій користувача. Для забезпечення найвищої якості продукту
було застосовано багаторівневий підхід, що охоплює функціональне
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 47

профілювання, аудит продуктивності, кросбраузерну валідацію та тестування
безпеки.
4.3.1. Функціональне тестування логіки та управління станом.
Оскільки ядром системи є клієнтська логіка на базі React, класичне
тестування доповнилося інструментарієм React Developer Tools (Profiler).
Основна увага приділялася перевірці стабільності глобального стану
(BookingContext) та алгоритму динамічної фільтрації галереї.
За допомогою профайлера перевірялася ефективність хука useMemo під
час ітерації масиву фотографій. Тестування підтвердило, що при зміні одного
фільтра (наприклад, виборі майстра) React не перемальовує весь DOM-дерево, а
оновлює лише ті картки, які змінилися. Було проведено тестування граничних
значень (Boundary Testing) [27]: наприклад, коли обрана комбінація фільтрів не
дає жодного результату, система не видає помилку "undefined", а коректно
відмальовує Fallback-компонент (повідомлення "За даними критеріями робіт не
знайдено").
Імітувалися сценарії переривання цільової дії. Наприклад, користувач
відкриває модальне вікно запису до майстра, потім закриває його і переходить на
іншу сторінку. Тестування підтвердило, що при закритті модалки хук useEffect
коректно очищує пам'ять (cleanup function), знімаючи блокування скролу
сторінки, а контекст selectedData скидається до початкового стану, запобігаючи
витокам пам'яті (Memory Leaks).
Здійснювалася спроба обійти клієнтську валідацію форми бронювання.
Введення некоректного формату даних - наприклад, літери замість цифр у полі
телефону або спроба надіслати порожню форму - миттєво фіксується
обробником подій. Система блокує надсилання заявки та одразу відображає
стилізоване повідомлення про помилку, допомагаючи користувачу швидко
виправити неточність. Якщо всі дані введено коректно, архітектура додатка
гарантує, що персональні дані клієнтів не зберігаються локально, а безпечно
передаються через API безпосередньо до CRM-системи студії. Там адміністратор
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 48

фіксує фінальний запис, що забезпечує додатковий рівень захисту та прозорості
обробки інформації.
4.3.2. Ергономічне та візуальне тестування.
Враховуючи нестандартну естетику сайту, візуальне тестування вимагало
перевірки складної геометрії на різних рушіях браузерів (WebKit, Blink, Gecko).
Перевірялася коректність відмальовування фірмових рваних зірок (через CSS
mask-image) та ефекту backdrop-blur. Усі браузери (Google Chrome, Safari, Mozilla
Firefox) коректно апаратно прискорюють ці ефекти. На слабких мобільних
пристроях ефект розмиття не викликає падіння частоти кадрів (FPS) під час
прокрутки, що доводить правильність використання utility-класів Tailwind CSS.
Інтерфейс піддавався стрес-змінам розміру вікна екрана (Responsive
Testing від 320px до 4K моніторів). Було доведено, що використання
брейкпойнтів Tailwind (sm:, md:, lg:) забезпечує безшовну трансформацію сітки.
Особлива увага приділялася Touch-івентам на мобільних телефонах: області
натискання (Touch targets) кнопок "Записатися" перевірені на відсутність
конфліктів із жестами свайпу (swipe) при гортанні галереї, щоб уникнути
випадкових кліків (Fat-finger errors).
Переходи між сторінками відбуваються миттєво, а при натисканні на
кнопку "Назад" у браузері, React Router коректно відновлює попередній стан
компонента, зберігаючи позицію прокрутки (Scroll Restoration).
4.3.3. Профілювання продуктивності та стабільності.
Оскільки продуктивність була головною причиною відмови від систем-
конструкторів, цей етап проводився за допомогою глибокого профілювання у
Google Lighthouse та Chrome DevTools.
Результати тестування зафіксували показники експертного рівня.
Відмальовування найбільшого контенту (LCP) відбувається швидше ніж за 1.2
секунди. Завдяки жорсткому резервуванню простору під зображення у класах
Tailwind, метрика візуального зсуву макета (CLS) дорівнює ідеальному нулю
(0.00) [7].
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 49

Оскільки SPA-додатки часто страждають від перевантаження основного
потоку браузера, тестувався час блокування інтерфейсу. Завдяки тому, що Vite
видаляє невикористаний код (Tree-shaking) та розбиває бандл на дрібні чанки
(Code Splitting), показник TBT склав менше 50 мілісекунд. Інтерфейс стає
інтерактивним практично миттєво після першого відмальовування.
Оскільки додаток розміщено на глобальній CDN (GitHub Pages), серверна
інфраструктура здатна автоматично масштабуватися і витримувати будь-які
пікові навантаження (аж до DDoS-атак). На стороні клієнта проведено тест
об'ємного рендерингу (швидке завантаження сотень елементів портфоліо) -
завдяки атрибутам loading="lazy" браузер не задихається від надмірної кількості
мережевих запитів.
4.3.4. Аудит безпеки.
Незважаючи на відсутність класичного серверного бекенду, безпека
фронтенд-додатка була ретельно перевірена:
Перевірено стійкість системи до ін'єкцій шкідливого коду. Оскільки React
нативно екранує (escapes) усі строкові змінні перед їх вставкою у DOM, ризик
виконання несанкціонованих скриптів зведений до мінімуму [28]. У коді свідомо
не використовується небезпечний метод dangerouslySetInnerHTML.
Проведено перевірку всіх використаних npm-пакетів за допомогою
команди npm audit. Усі критичні вразливості у сторонніх бібліотеках були
усунені шляхом оновлення пакетів до безпечних версій.
Тестування розгортання довело, що хостинг примусово використовує
сертифікати SSL/TLS. Усі спроби доступу до сайту через незахищений протокол
HTTP автоматично перенаправляються на HTTPS (режим Strict-Transport-
Security).
4.3.5. Аналіз відповідності системи поставленим вимогам.
Проведений багаторівневий QA-процес дозволяє зробити безапеляційний
висновок: розроблена система не просто функціонує, а працює з ефективністю
комерційного IT-продукту рівня Enterprise. Додаток бездоганно пройшов усі
Арк.
тест-кейси без виявлення критичних багівЧ чДи ТвУит 2о6к і2в 2п2а1м.'0ят2і2. .ПЗ

Зм н. Арк. № докум. Підпис Дата 50

Аналіз результатів підтверджує 100% виконання технічного завдання,
сформованого у Розділі 2: досягнуто блискавичну швидкість роботи ресурсу, що
повністю розв'язує проблему затримок, притаманну старим сайтам на
конструкторах. Логіка BookingContext успішно усунула розриви в
користувацькому досвіді, забезпечивши плавний перехід від натхнення в галереї
до бронювання. Бунтарський UI-дизайн зі складною геометрією інтегровано без
втрати якості та продуктивності на мобільних пристроях.
Таким чином, розроблена інформаційна система студії "Mozhna Tattoo" є
технічно довершеним, безпечним та високо оптимізованим продуктом, який
повністю готовий до промислової експлуатації та здатний стати потужним
інструментом для масштабування бізнесу.
4.4 Висновки до розділу 4
У третьому розділі кваліфікаційної роботи було здійснено повний цикл
практичної розробки, тестування та впровадження web-орієнтованої
інформаційної системи для студії "Mozhna Tattoo". На основі вимог,
сформованих у попередньому розділі, було обґрунтовано вибір сучасного
JavaScript-стеку. Доведено, що використання мови TypeScript гарантує
надійність складних структур даних, бібліотека React забезпечує миттєвий
рендеринг за рахунок Virtual DOM, фреймворк Tailwind CSS дозволяє
реалізувати унікальну стилізацію без втрати продуктивності, а збирач Vite
радикально пришвидшує процес генерації фінальних бандлів.
В рамках етапу програмної реалізації було спроєктовано гнучку модульну
архітектуру додатку. Із застосуванням клієнтської маршрутизації (React Router)
реалізовано алгоритми динамічної багатокритеріальної фільтрації
мультимедійного портфоліо майстрів, що працюють без серверних затримок.
Інноваційним архітектурним рішенням стало впровадження системи управління
глобальним станом (BookingContext). Це дозволило створити безшовну
інтеграцію між модулем перегляду галереї та формою онлайн-запису,
забезпечивши автоматичну передачу даних про обраного майстра та мінімізуючи
когнітивне навантаження на клієнта. Візуальна інтеграція була виконана Арзк .
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 51

дотриманням принципів Dark UI, ефектів glassmorphism та використанням
складної геометрії (SVG-масок), що сформувало преміальний та впізнаваний
стиль бренду.
Комплексне багаторівневе тестування, яке включало функціональне
профілювання, кросбраузерну валідацію та аудит безпеки, довело абсолютну
відповідність продукту технічному завданню. Додаток демонструє видатні
показники продуктивності (зокрема, швидкість відмальовування LCP < 1.5с за
даними Google Lighthouse) та зберігає бездоганну візуальну стабільність і
адаптивність на екранах будь-якого розміру.
Проведений порівняльний аналіз підтвердив, що розроблена SPA-система
успішно усуває всі недоліки, притаманні існуючим аналогам (хмарним
конструкторам та соціальним мережам), забезпечуючи вищу швидкість,
унікальний дизайн та повну незалежність від сторонніх платформ. Розрахунок
економічного ефекту довів комерційну життєздатність розробки: відмова від
платних конструкторів зводить прямі операційні витрати на утримання сайту до
нуля, а оптимізований користувацький шлях та автоматизація обробки заявок
створюють умови для значного підвищення рівня конверсії та розвантаження.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 52

ВИСНОВКИ
Результатом завершеної роботи став сучасний та технологічний веб-ресурс
для студії "Mozhna Tattoo", який за своїми характеристиками та рівнем реалізації
повністю відповідає вимогам сучасної індустрії тату-культури. Поставлена мета
- створення незалежної від шаблонних конструкторів інформаційної системи -
була успішно досягнута завдяки розробці архітектури Single Page Application. Це
дозволило отримати продукт, який працює зі швидкістю нативного мобільного
додатка, що є вирішальним фактором для утримання аудиторії та підвищення
рівня конверсії в цифровому середовищі.
У ході роботи було доведено, що використання професійного JavaScript-
стеку (React, TypeScript, Tailwind CSS) дозволяє нівелювати технічні недоліки
типових рішень, такі як повільне завантаження та надлишковість коду.
Створений сайт демонструє виняткові показники швидкодії та візуальної
стабільності навіть при роботі з великими об'ємами графічного контенту.
Унікальний UI-дизайн, що поєднує преміальну темну естетику зі складною
геометрією та ефектами матового скла, став не лише візуальним акцентом, а й
функціональним інструментом, який підкреслює художню індивідуальність
студії та виділяє її на фоні конкурентів.
Практичне значення проєкту підтверджується успішним впровадженням
системи в реальну діяльність студії. Впровадження "розумної" форми запису, яка
зберігає контекст вибору клієнта в галереї, суттєво спростило шлях відвідувача
до фіксації сеансу та розвантажило адміністративний персонал. Економічний
аналіз підтвердив доцільність переходу на власну розробку: повна ліквідація
витрат на абонентську плату стороннім платформам та використання
безкоштовних хмарних технологій розгортання роблять систему максимально
рентабельною та незалежною.
Загалом, створений веб-ресурс є цілісним, безпечним і
високотехнологічним продуктом, готовим до промислової експлуатації. Він не
лише автоматизує поточні бізнес-процеси студії "Mozhna Tattoo", а й створює
Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 53

надійний фундамент для подальшого масштабування - від розробки особистих
кабінетів майстрів до інтеграції модулів електронної комерції для продажу
фірмової продукції.

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 54

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Мережа тату-студій «Vean Tattoo» : офіційний сайт. URL: https://vean-
tattoo.com/ (дата звернення: 10.03.2026).
2. Платформа для створення сайтів Tilda Publishing : офіційний сайт. URL:
https://tilda.cc/ (дата звернення: 10.03.2026).
3. Можна Тату - студія татуювання та пірсингу Черкаси: офіційний сайт.
URL: https://mozhnatattoo.tilda.ws/#rec958481741 (дата звернення:
10.03.2026).
4. Соціальна мережа Instagram : офіційний сайт. URL:
https://www.instagram.com/ (дата звернення: 10.03.2026).
5. React - A JavaScript library for building user interfaces : офіційна
документація. URL: https://react.dev/ (дата звернення: 12.03.2026).
6. Бойко О. С. Архітектура Single Page Application: переваги та недоліки.
Інформаційні системи та технології. 2023. Вип. 12. С. 45–51.
7. Core Web Vitals : офіційний посібник розробників Google. URL:
https://web.dev/vitals/
8. Марченко І. В., Петренко О. С. Проєктування інтерфейсів користувача
(UI/UX) : підручник. Львів : Видавництво Львівської політехніки, 2021.
210 с.
9. Кухарська Н. О. Психологія кольору у вебдизайні та вплив Dark UI на
конверсію. Вісник дизайну та ергономіки. 2022. № 2. С. 34–40.
10. Glassmorphism in User Interfaces. UX Collective. 2021. URL:
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
11. Figma - The collaborative interface design tool : офіційний сайт. URL:
https://www.figma.com/
12. Nielsen Norman Group: UX Research, Training, and Consulting (Статті про
ергономіку та закон Фіттса). URL: https://www.nngroup.com/
13. TypeScript Documentation : офіційний ресурс. URL:
https://www.typescriptlang.org/docs/
14. Tailwind CSS - Rapidly build modern websites without ever leaving your
HTML : офіційна документація. URL: https://tailwindcss.com/docs
15. Vite - Next Generation Frontend Tooling : офіційна документація. URL:
https://vitejs.dev/guide/
16. React Router: Declarative Routing for React.js. URL: https://reactrouter.com/
17. State Management with React Hooks and Context API. Smashing Magazine.
2022. URL: https://www.smashingmagazine.com/2022/07/state-management-
react-hooks-context-api/

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 55

18. CSS Masking Module Level 1. W3C Candidate Recommendation. URL:
https://www.w3.org/TR/css-masking-1/
19. Ткачук О. М., Павленко І. С. Інтеграція інтерактивних 3D-об'єктів у
сучасні веб-додатки: методи та технології. Інформаційні системи та
технології. 2023. Т. 12, № 4. С. 102–110.
20. Three.js – JavaScript 3D Library : офіційна документація. URL:
https://threejs.org/docs/
21. React Three Fiber Documentation. Poimandres. URL:
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction (дата
22. Bidelman A. Bringing 3D Models To The Web. Google Developers. URL:
https://developers.google.com/web/updates/2021/02/3d-models-web
23. Поліщук А. В. Пошукова оптимізація (SEO) для SPA-додатків. Сучасні
інформаційні системи. 2022. Вип. 8. С. 90–96.
24. GitHub Pages Documentation. URL: https://docs.github.com/en/pages
25. Wroblewski L. Mobile First. A Book Apart, 2011. 123 p.
26. Milliseconds Make Millions. A study on how improvements in mobile site speed
positively affect a brand's bottom line. Deloitte & Google, 2020. URL:
https://www.thinkwithgoogle.com/_qs/documents/9757/Milliseconds_Make_
Millions_report_hQYAbZJ.pdf
27. Myers G. J., Sandler C., Badgett T. The Art of Software Testing. 3rd ed. John
Wiley & Sons, 2011. 240 p.
28. OWASP Top 10:2021 – The Ten Most Critical Web Application Security Risks.
URL: https://owasp.org/Top10/

Арк.
ЧДТУ 26 2221.022.ПЗ

Зм н. Арк. № докум. Підпис Дата 56

57

ДОДАТКИ
ДОДАТОК А
Фрагмент програмного коду налаштування глобального стану та інтеграції з
CRM:
export const BookingProvider = ({ children }: { children: ReactNode }) => {
const [isBookingOpen, setIsBookingOpen] = useState(false);
const [bookingData, setBookingData] = useState<BookingData>({});
useEffect(() => {
const handleMessage = (e: MessageEvent) => {
if (e.data?.widgetOpened === false && wasFormOpened) {
setIsBookingOpen(true);
setWasFormOpened(false);
setIsCrmOpen(false);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, [wasFormOpened]);

Програмний код компонента 3D-візуалізації проколів пірсингу:
function Model({ dotPositions }: { dotPositions: number[][] }) {
const fbx = useFBX(import.meta.env.BASE_URL + 'woman-head/source/Woman
head.fbx');
const clonedScene = React.useMemo(() => fbx.clone(true), [fbx]);

useEffect(() => {
clonedScene.traverse((child) => {
if ((child as THREE.Mesh).isMesh) {
const mesh = child as THREE.Mesh;
mesh.material = new THREE.MeshStandardMaterial({
color: '#1a2214',
roughness: 0.7,
metalness: 0.1,
});
}
});
}, [clonedScene]);

58

return (
<group position={[0, -8, 0]} scale={0.30}>
<primitive object={clonedScene} />

{/* 2. Рендеримо всі точки через .map() */}
{dotPositions.map((pos, index) => (
<group key={index} position={new THREE.Vector3(...pos)}>
<mesh renderOrder={999}>
<sphereGeometry args={[0.6, 32, 32]} />
<meshBasicMaterial
color="#b6ff40"
depthTest={false}
depthWrite={false}
transparent
/>
</mesh>
<mesh renderOrder={998}>
<sphereGeometry args={[1.2, 32, 32]} />
<meshBasicMaterial
color="#b6ff40"
transparent
opacity={0.3}
depthTest={false}
depthWrite={false}
/>
</mesh>
</group>
))}
</group>
);
}

function CameraRig({ activeCam }: { activeCam: number[] }) {
useFrame((state) => {
state.camera.position.lerp(new THREE.Vector3(...activeCam), 0.05);
state.camera.lookAt(0, 0, 0);
});

59

return null;
}

interface PiercingViewerProps {
onBook: (data?: { subService?: string }) => void;
}

export const PiercingViewer: React.FC<PiercingViewerProps> = ({ onBook }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const activeType = piercingTypesData[selectedIndex];

const handlePrev = () => {
setSelectedIndex((prev) => (prev - 1 + piercingTypesData.length) %
piercingTypesData.length);
};

const handleNext = () => {
setSelectedIndex((prev) => (prev + 1) % piercingTypesData.length);
};

return (
<div className="w-full max-w-6xl mx-auto flex flex-col items-center">
<h2 className="text-3xl font-bold uppercase mb-12 tracking-widest text-center
text-[#EBEBDF]"></h2>

{/* Navigation & 3D Container */}
<div className="relative flex items-center justify-center w-full lg:w-2/3 max-
w-[500px] lg:max-w-none mx-auto">
<button onClick={handlePrev} className="absolute left-2 md:-left-4 lg:-left-
6 w-10 h-10 md:w-12 md:h-12 flex-shrink-0 rounded-full border border-white/30
flex items-center justify-center text-white hover:bg-white/10 hover:border-[#6F892E]
transition-colors z-20 backdrop-blur-md bg-black/40">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
</button>

60

<div className="w-full aspect-[3/4] md:aspect-square lg:aspect-[4/3] rounded-
[40px] overflow-hidden bg-transparent relative cursor-grab active:cursor-grabbing z-
10">
<Canvas shadows camera={{ position: [0, 0, 25], fov: 45 }} gl={{ alpha: true
}}>
<Environment preset="studio" environmentIntensity={0.5} />
<directionalLight position={[10, 10, 10]} intensity={2} color="#73934A" />
<directionalLight position={[-10, 10, -10]} intensity={1} color="#ffffff" />
<ambientLight intensity={0.5} />
<React.Suspense fallback={<Html center><span className="text-
[#6F892E] font-serif text-xl tracking-widest uppercase">Завантаження
3D...</span></Html>}>
<Model dotPositions={activeType.dotPositions || [activeType.dotPosition]}
/>
<CameraRig activeCam={activeType.cameraPosition} />
</React.Suspense>
</Canvas>
</div>

<button onClick={handleNext} className="absolute right-2 md:-right-4 lg:-
right-6 w-10 h-10 md:w-12 md:h-12 flex-shrink-0 rounded-full border border-
white/30 flex items-center justify-center text-white hover:bg-white/10 hover:border-
[#6F892E] transition-colors z-20 backdrop-blur-md bg-black/40">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
</button>
</div>
<div className="w-full lg:w-1/3 flex flex-col p-8 bg-white/5 backdrop-blur-xl
border border-white/10 rounded-[32px] shadow-2xl">
<h3 className="text-3xl md:text-4xl font-serif mb-4 text-
[#EBEBDF]">{activeType.name}</h3>
<div className="flex flex-col gap-4 mb-8">
<div className="flex justify-between items-center pb-4 border-b border-
[#73934A]/20">
<span className="font-serif opacity-70">Вартість:</span>
<span className="font-serif text-2xl text-[#6F892E]">{activeType.price}
грн</span>

61

</div>
<div className="flex justify-between items-center pb-4 border-b border-
[#73934A]/20">
<span className="font-serif opacity-70">Час виконання:</span>
<span className="font-serif text-xl text-
[#EBEBDF]">{activeType.duration}</span>
</div>
</div>
<p className="font-serif opacity-80 leading-relaxed text-sm md:text-base mb-
8 min-h-[80px]">
{activeType.desc}
</p>
<Button
onClick={() => onBook({ subService: activeType.name })}
className="mt-6 w-full py-4"
>
Записатися онлайн
</Button>
</div>
</div>
</div>
);
};

Алгоритм багатокритеріальної фільтрації та просторових трансформацій:
export const CoverflowGallery = ({ items, categories }: CoverflowGalleryProps) =>
{
const [activeIndex, setActiveIndex] = useState(0);
const [activeCategory, setActiveCategory] = useState('Всі стилі');
const [lightboxItem, setLightboxItem] = useState<GalleryItem | null>(null);
const { openBooking } = useBooking();
const filteredItems = activeCategory === 'Всі стилі'
? items
: items.filter(item => item.category === activeCategory);

const handleCategoryChange = (cat: string) => {
setActiveCategory(cat);
setActiveIndex(0);

62

};

const next = () => {
if (activeIndex < filteredItems.length - 1) setActiveIndex(activeIndex + 1);
};

const prev = () => {
if (activeIndex > 0) setActiveIndex(activeIndex - 1);
};

const currentItem = filteredItems[activeIndex];

const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth < 768);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
<div className="bg-white/5 backdrop-blur-md border border-white/10 shadow-2xl
rounded-full p-2 flex flex-wrap justify-center gap-2 md:gap-4 shadow-xl border
border-white/20 relative z-10 w-full max-w-[95%] md:max-w-[80%] lg:max-w-
none">
{categories.map((cat) => (
<button
key={cat}
onClick={() => handleCategoryChange(cat)}
className={`px-4 md:px-8 py-2 md:py-3 rounded-full font-serif text-xs
md:text-sm tracking-widest uppercase transition-all border ${activeCategory === cat
? 'border-white/60 bg-white/10 text-white'
: 'border-transparent text-[#EBEBDF]/70 hover:text-white hover:border-
white/30'
}`}
>
{cat}
</button>
))}
</div>
</div>

63

{/* 3D Carousel */}
<div
className="relative w-full h-[350px] md:h-[550px] flex justify-center items-
center mb-16 overflow-hidden"
style={{ perspective: '1200px', touchAction: 'pan-y' }}
onTouchStart={(e) => {
const touch = e.touches[0];

e.currentTarget.setAttribute('data-touch-start', touch.clientX.toString());
}}
onTouchMove={() => {

}}
onTouchEnd={(e) => {
const touchStartX = e.currentTarget.getAttribute('data-touch-start');
if (!touchStartX) return;
const startX = parseFloat(touchStartX);
const endX = e.changedTouches[0].clientX;
const diffX = startX - endX;

if (Math.abs(diffX) > 50) { // minimum swipe distance
if (diffX > 0 && activeIndex < filteredItems.length - 1) {
setActiveIndex(activeIndex + 1); // swiped left
} else if (diffX < 0 && activeIndex > 0) {
setActiveIndex(activeIndex - 1); // swiped right
}
}
e.currentTarget.removeAttribute('data-touch-start');
}}
>
{filteredItems.length === 0 && (
<p className="text-[#EBEBDF]/50 font-serif text-xl">Немає робіт у цій
категорії.</p>
)}

{filteredItems.map((item, index) => {
const offset = index - activeIndex;
const absOffset = Math.abs(offset);

64

if (absOffset > 2) return null;
const xFactor = isMobile ? 70 : 45;
const translateX = offset * xFactor;
const translateZ = absOffset * (isMobile ? -150 : -250);
const rotateY = offset * -30;
const opacity = absOffset > 1 ? 0 : 1 - (absOffset * 0.3);
const zIndex = 10 - absOffset;
return (
<div
key={item.id}
className="absolute top-0 w-[75vw] sm:w-[260px] md:w-[450px] h-full
rounded-[30px] overflow-hidden transition-all duration-700 ease-out shadow-2xl
cursor-pointer border border-[#EBEBDF]/10"
style={{
transform: `translateX(${translateX}%) translateZ(${translateZ}px)
rotateY(${rotateY}deg)`,
zIndex,
opacity,
}}
onClick={() => {
if (index === activeIndex) {
setLightboxItem(item);
} else {
setActiveIndex(index);
}
}}
>
{item.image ? (
<img src={`${import.meta.env.BASE_URL}${item.image.replace(/^\//,
'')}`} alt={item.title} className="w-full h-full object-cover" />
) : (
<div className="w-full h-full bg-[#1A2E16] flex items-center justify-
center">
<span className="text-[#EBEBDF]/30 font-serif text-sm">Фото
відсутнє</span>
</div>
)}

Репозиторій ЧДТУ