ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/9689| Title: | Система управління контентом односторінкових веб-застосунків |
| Authors: | Данченко, Олена Борисівна Середа, Артур Олександрович |
| Keywords: | WEB-ЗАСТОСУНОК;ПАНЕЛЬ АДМІНІСТРУВАННЯ;ЛЕНДИНГ-СТОРІНКА;БАЗА ДАНИХ;WEB-РОЗРОБКА;VIRTUAL STAGING HOME;СТАН;РЕАЛІЗАЦІЯ. |
| Issue Date: | 10-Jun-2026 |
| Abstract: | У сучасних умовах цифровізації ринку нерухомості рівень конкурентоспроможності сервісів віртуального стейджингу визначається не лише якістю візуалізації, а й ефективністю представлення послуг у вебпросторі та швидкістю управління контентом. Виникає гостра потреба у впровадженні високоефективних вебзастосунків, які здатні забезпечити високу конверсію відвідувачів у клієнтів. Використання сучасних фронтенд-технологій для створення лендинг-сторінок та спеціалізованих систем їх адміністрування є актуальною проблемою, оскільки це дозволяє автоматизувати процеси оновлення інформації, оптимізувати взаємодію з користувачем та забезпечити стабільну роботу системи при високих навантаженнях. Застосування компонентного підходу та централізованого управління станом у межах односторінкових застосунків (SPA) значно спрощує підтримку та масштабування маркетингових інструментів ІТ-продуктів. Метою роботи є розробка та впровадження адаптивної лендинг-сторінки та інтегрованої системи її адміністрування для вебзастосунку «Virtual Staging Home», що забезпечить автоматизацію управління медіаконтентом та ефективну взаємодію користувачів із сервісами віртуального стейджингу. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9689 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Середа Артур_КН-2201_2025-2026.pdf Restricted Access | 1.86 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Система управління контентом односторінкових веб-застосунків»
Виконав: студент 4 курсу, групи КН-2201
Спеціальності 122 (F3) «Комп’ютерні науки»
(шифр і назва спеціальності)
Освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Артур СЕРЕДА
Керівник Олена ДАНЧЕНКО
(ім’я та прізвище)
Рецензент Бедрій Д.І
(ім’я та прізвище)
Черкаси 2026 року
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 (F3) – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2026 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Середі Артуру Олександровичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Система управління контентом односторінкових веб-застосунків
Керівник роботи Данченко О.Б., д.т.н., професор
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «12» березня 2026 р. №56/03-03.
2. Строк подання студентом роботи « 08 » червня 2026 року
3. Вихідні дані до роботи:
Практичні навички роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Аналіз предметної області.
4.2. Проєктування інформаційної системи.
4.3. Прогрмана реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482. ЧДТУ. 62287-01.
5.2. Додаток Б. Лістинг коду програми.
5.5 Презентація
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 12.01.2026 р.
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
12.01.2026 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 08.02.2026 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 23.03.2026 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту
до 06.04.2026 Виконано
й предмету дослідження).
5 Написання практичних розділів й висновків по
до 15.05.2026 Виконано
роботі.
6 Передзахист кваліфікаційної роботи бакалавра
26.05.2026 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2026 Виконано
8 Захист кваліфікаційної роботи бакалавра. 10.06.2026 Виконано
Студент Артур СЕРЕДА
(підпис)
Керівник роботи Олена ДАНЧЕНКО
(підпис)
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 89 с., 11 рис., 15 використаних
джерел, 2 додатки.
Актуальність теми. У сучасних умовах цифровізації ринку нерухомості рівень
конкурентоспроможності сервісів віртуального стейджингу визначається не лише
якістю візуалізації, а й ефективністю представлення послуг у вебпросторі та
швидкістю управління контентом. Виникає гостра потреба у впровадженні
високоефективних вебзастосунків, які здатні забезпечити високу конверсію
відвідувачів у клієнтів. Використання сучасних фронтенд-технологій для створення
лендинг-сторінок та спеціалізованих систем їх адміністрування є актуальною
проблемою, оскільки це дозволяє автоматизувати процеси оновлення інформації,
оптимізувати взаємодію з користувачем та забезпечити стабільну роботу системи при
високих навантаженнях. Застосування компонентного підходу та централізованого
управління станом у межах односторінкових застосунків (SPA) значно спрощує
підтримку та масштабування маркетингових інструментів ІТ-продуктів.
Метою роботи є розробка та впровадження адаптивної лендинг-сторінки та
інтегрованої системи її адміністрування для вебзастосунку «Virtual Staging Home», що
забезпечить автоматизацію управління медіаконтентом та ефективну взаємодію
користувачів із сервісами віртуального стейджингу.
Завдання кваліфікаційної роботи бакалавра:
проаналізувати особливості предметної області віртуального стейджингу та
сформувати вимоги до сучасних систем управління контентом лендинг-
сторінок;
обґрунтувати вибір технологічного стеку, зокрема фреймворку Angular 18 та
бібліотек управління станом застосунку, для реалізації клієнтської частини
системи;
спроєктувати архітектуру фронтенд-частини, базуючись на принципах
розділення відповідальностей та односпрямованого потоку даних;
5
розробити модуль адміністрування для управління життєвим циклом замовлень
та медіафайлами за допомогою інтеграції з мікросервісною структурою
бекенду;
реалізувати механізми асинхронної взаємодії та моніторингу станів тривалих
операцій обробки зображень у реальному часі;
провести тестування розробленої системи та оцінити її ефективність у межах
загального workflow проєкту.
Об'єкт дослідження: процес представлення послуг віртуального стейджингу та
дистанційного управління контентом у вебсередовищі за допомогою сучасних
фронтенд-технологій.
Предмет дослідження: архітектурні патерни, методи реактивного
програмування та технології створення користувацьких інтерфейсів вебзастосунку
Методи дослідження. аналіз сучасних архітектурних шаблонів побудови
вебзастосунків (SPA, мікросервіси); методи проектування інтерфейсів користувача
(UI/UX); принципи реактивного програмування та управління станом (State
Management); аналіз методів асинхронного обміну даними через REST API;
методології автоматизованого тестування та безперервної інтеграції (CI/CD)
Ключові слова: WEB-ЗАСТОСУНОК, ПАНЕЛЬ АДМІНІСТРУВАННЯ,
ЛЕНДИНГ-СТОРІНКА, БАЗА ДАНИХ, WEB-РОЗРОБКА, СТАН, VIRTUAL
STAGING HOME, РЕАЛІЗАЦІЯ.
ABSTRACT
The bachelor’s qualification thesis consists of: 90 pages, 26 illustrations, 1 table, 6
references, and 4 attachments.
Relevance of the topic. Topic relevance. In today's digital real estate market, the level
of competitiveness of virtual staging services is determined not only by the quality of
visualization, but also by the efficiency of presenting services in the web space and the speed
of content management. There is an urgent need to implement highly effective web
applications that can ensure high conversion of visitors into customers. The use of modern
front-end technologies to create landing pages and specialized systems for their
administration is a relevant problem, as it allows you to automate information update
6
processes, optimize user interaction and ensure stable system operation under high loads.
The use of a component approach and centralized state management within single-page
applications (SPA) significantly simplifies the support and scaling of marketing tools for IT
products.
The purpose of the work is to develop and implement an adaptive landing page and
an integrated administration system for the "Virtual Staging Home" web application, which
will ensure automation of media content management and effective user interaction with
virtual staging services.
The tasks of the bachelor's qualification work:
analyze the features of the subject area of virtual staging and formulate requirements
for modern landing page content management systems;
justify the choice of a technological stack, in particular the Angular 18 framework
and application state management libraries, for implementing the client part of the
system;
design the architecture of the front-end part, based on the principles of separation of
responsibilities and unidirectional data flow;
develop an administration module for managing the life cycle of orders and media
files through integration with the microservice structure of the backend;
implement mechanisms for asynchronous interaction and monitoring the states of
long-running image processing operations in real time;
test the developed system and evaluate its effectiveness within the overall workflow
of the project.
Object of research: the process of presenting virtual staging and remote content
management services in a web environment using modern front-end technologies.
Subject of research: architectural patterns, reactive programming methods and
technologies for creating web application user interfaces
Research methods: analysis of modern architectural patterns for building web
applications (SPA, microservices); user interface design methods (UI/UX); principles of
reactive programming and state management (State Management); analysis of methods for
7
asynchronous data exchange via REST API; methodologies for automated testing and
continuous integration (CI/CD)
Keywords: WEB-ЗАСТОСУНОК, PANEL, ADMINISTRATION, LANDING
PAGE, DATABASE, WEB-РОЗРОБКА, STATE, VIRTUAL STAGING HOME,
REALIZATION.
8
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 9
ВСТУП ................................................................................................................................ 11
1 АНАЛІІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................................. 15
1.1 Дослідження концепціїї Virtual Staging та ринку нерухомості .......................... 15
1.2 Роль лендинг-сторінки як інструмента конверсії в SaaS-системах ................... 16
1.3 Порівняльний аналіз систем адміністрування контенту ..................................... 17
1.3.1 Характеристика системи управління контентом WordPress ..................... 19
1.3.2 Характеристика системи управління контентом Strapi.............................. 21
1.3.3 Характеристика системи управління контентом Contentful ...................... 19
1.4 Результати аналізу систем адміністрування контенту ........................................ 24
1.5 Постановка задачі....................................................................................................22
Висновки до розділу 1 .................................................................................................. 25
2 ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ .................................................. 26
2.1 Визначення вимог до розробки панелі адміністрування .................................... 26
2.2 Компонентна структура та архітектурні особливості лендинг-сторінки .......... 27
2.2.1 Використання спільних компонентів та їхні переваги ............................... 28
2.3 Проєктування панелі адміністрування та підсистем управління контенотом...27
Висновки до розділу 2 .................................................................................................. 30
3 ПРОГРАМНА РЕАЛІЗАЦІЯ СИСТЕМИ .................................................................... 32
3.1 Програмна реалізація інтерфейсу лендинг-сторінки ........................................... 32
3.2 Розробка контекстних блоків та загального макета сторінки ............................ 33
3.3 Інтеграція та використання бібліотеки Angular Material .................................... 35
3.4 Стилізація компонентів із застосуванням SCSS-міксинів .................................. 36
3.5 Реалізація та використання спільних компонентів .............................................. 38
3.6 Програмна реалізація панелі адміністрування та управління станом ............... 40
3.6.1 Реалізація інтерфейсу панелі адміністрування ........................................... 41
3.6.2 Управління станом контенту.........................................................................42
3.6.3 Асинхронна взаємодія та моніторинг тривалих процесів...........................43
9
Висновки до розділу 3 .................................................................................................. 44
ВИСНОВКИ ....................................................................................................................... 47
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 49
ДОДАТОК А. Cпецифікація 482.ЧДТУ.62287-01 .......................................................... 50
ДОДАТОК Б. Лістинг коду програми ............................................................................. 52
10
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
Framework – програмна заготовка, що дає доступ до набору готових інструментів
State management – процес контролю та синхронізації данних
CMS – програмне збезпечення для редагування та управління сайтом
UI – User Interface (інтерфейс користувача);
UX – User Experience (досвід користувача);
Web – веб, пов’язаний із технологіями мережі Інтернет;
Frontend – клієнтська частина web-застосунку;
Backend – серверна частина web-застосунку;
CRUD – Create, Read, Update, Delete (основні операції роботи з даними);
JSON – JavaScript Object Notation (формат обміну даними);
11
ВСТУП
Епоха цифровізації диктує нові правила ведення бізнесу, де вебтехнології
виступають головним драйвером економічного зростання. Сучасні інтерактивні
вебзастосунки трансформувалися з простих інформаційних ресурсів у потужні
інструменти автоматизації, що оптимізують операційну діяльність компаній,
забезпечують безперервну комунікацію з цільовою аудиторією та формують надійну
базу для надання послуг у цифровому середовищі [8, 13].
Одним із найбільш інноваційних векторів впровадження таких рішень є сфера
нерухомості, зокрема технологія віртуального стейджингу [12]. Вона передбачає
цифрове меблювання та покращення візуальних характеристик порожніх приміщень
за допомогою комп'ютерної графіки. Це перетворює стандартні фотографії на
привабливі маркетингові активи, що суттєво підвищує зацікавленість клієнтів та
прискорює процеси продажу чи оренди об'єктів нерухомості.
Актуальність теми. Актуальність теми бакалаврської кваліфікаційної роботи
зумовлена стрімкою еволюцією сучасних фронтенд-архітектур, появою нових
реактивних патернів програмування та постійно зростаючим попитом на
високопродуктивні онлайн-сервіси, що працюють за моделлю SaaS. Більшість
існуючих на ринку програмних рішень у сфері Virtual Staging побудовані за
застарілим монолітним принципом, де користувацькі інтерфейси та логіка управління
контентом є жорстко пов'язаними. Це створює серйозні проблеми: такі системи
характеризуються низькою швидкодією, великим обсягом надлишкового коду, що
негативно впливає на мобільну конверсію, та відсутністю гнучких інструментів
адміністрування, що ускладнює підтримку актуальності маркетингових даних. У
зв'язку з цим виникає потреба в проєктуванні та розробці децентралізованих,
архітектурно чистих односторінкових вебзастосунків із чітким розділенням зон
відповідальності між публічним інтерфейсом презентації та закритим ізольованим
модулем адміністрування.
На сьогоднішньому етапі глобальні напрямки розвитку вебтехнологій
зосереджені на впровадженні концепції Single Page Application, переході від
12
класичного відстеження змін до реактивності за допомогою сучасних методів
управління станом, інтеграції хмарних мікросервісів та забезпеченні бездоганного
користувацького досвіду. Специфіка SaaS-платформ у галузі Virtual Staging вимагає
розробки асинхронних клієнтських інтерфейсів, здатних обробляти тривалі процеси
обробки зображень у фоновому режимі та надавати контент-менеджерам автономні
інструменти управління без необхідності прямої зміни вихідного програмного коду
сайту. Впровадження реактивного підходу дозволяє реалізувати механізми
попереднього перегляду, автоматизувати моніторинг станів замовлень та
організувати прозору, гнучку взаємодію між користувачем, адміністратором і
серверною частиною системи, повністю виключаючи ризики виникнення стану гонки
чи затримок у рендерингу інтерфейсу.
З економічної точки зору, впровадження високопродуктивних клієнтських
рішень є не просто технологічним трендом, а валивим фактором виживання бізнесу в
конкурентному цифровому середовищі. Затримки у завантаженні сторінок або
неінтуїтивна навігація призводять до різкого зниження конверсії та втрати
потенційних клієнтів. Відповідно, розробка реактивної лендинг-сторінки, здатної
миттєво відтворювати мультимедійний контент та забезпечувати безшовний перехід
користувача до етапу створення замовлення, є ключовим моментом монетизації
платформ віртуального стейджингу. Водночас, наявність власної оптимізованої
панелі адміністрування дозволяє компаніям скоротити операційні витрати на
контент-менеджмент та уникнути залежності від дорогих сторонніх CMS-систем, які
часто обмежують гнучкість бізнес-логіки.
Крім того, актуальність дослідження підкріплюється необхідністю
стандартизації процесів фронтенд-розробки через впровадження компонентно-
орієнтованих архітектур та модульних дизайн-систем. Створення ізольованих,
перевикористовуваних елементів у поєднанні з надійними UI-бібліотеками та
препроцесорами дозволяє уникнути дублювання коду та архітектурної деградації
програмного продукту при його подальшому масштабуванні. Такий підхід не лише
гарантує візуальну консистентність усіх інтерфейсів платформи на будь-яких
пристроях, але й значно спрощує процес їхнього тестування, підтримки та
13
розширення функціоналу, що є неодмінною умовою життєздатності сучасних SaaS-
рішень
Глобальні тренди веброзробки сьогодні спрямовані на впровадження концепції
Single Page Application, використання реактивних патернів управління станом,
інтеграцію хмарних мікросервісів та забезпечення бездоганного UX/UI. У контексті
платформ віртуального стейджингу це означає створення швидких, асинхронних
інтерфейсів, що здатні миттєво реагувати на дії користувача та надавати
адміністраторам гнучкі інструменти контролю над вмістом без залучення
програмістів.
Відповідно, обрана тема кваліфікаційної роботи лежить у площині передових
тенденцій програмування, повністю відповідає запитам сучасного бізнесу та має
високу практичну цінність для створення конкурентоспроможного цифрового
продукту у сфері дизайну нерухомості.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є
проєктування та програмна реалізація публічного інтерфейсу (лендинг-сторінки) та
модуля адміністрування контентом вебзастосунку «Virtual Staging Home» із
забезпеченням високої продуктивності, реактивності та зручності використання.
Для виконання завдання були поставлені завдання:
проаналізувати специфіку предметної області та виконати огляд існуючих
платформ-аналогів;
сформувати комплекс функціональних та архітектурних вимог до
інформаційного та адміністративного інтерфейсів системи;
спроєктувати компонентну архітектуру клієнтської частини та потоки даних;
програмно реалізувати адаптивний дизайн та візуальні елементи
вебзастосунку «Virtual Staging Home»;
створити модуль адміністрування із впровадженням реактивної системи
управління станом;
Об’єкт дослідження: процеси проєктування, розробки та функціонування
клієнтської частини (публічного інтерфейсу та панелі адміністрування)
вебзастосунку «Virtual Staging Home».
14
Предмет дослідження: архітектурні шаблони побудови односторінкових
застосунків, методи реактивного програмування, управління станом та технології
створення високоефективних користувацьких інтерфейсів вебзастосунку.
Методи дослідження. У процесі виконання роботи застосовано методи
системного аналізу для вивчення предметної області; методи порівняльного аналізу
для оцінки існуючих рішень та вибору технологічного стека; методи структурного
проєктування для побудови архітектури застосунку. Програмну реалізацію здійснено
з використанням методів об'єктно-орієнтованого та реактивного програмування. Для
перевірки працездатності, коректності відображення та надійності системи
застосовано методи емпіричного тестування.
15
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Дослідження концепції Virtual Staging та ринку нерухомості
Концепція віртуального стейджингу є сучасним технологічним варіантом
традиційного хоум-стейджингу, що передбачає підготовку об'єкта нерухомості до
продажу або оренди шляхом візуального облаштування інтер'єру за допомогою
засобів комп'ютерної графіки. Віртуальний стейджинг не потребує фізичного
переміщення меблів, на відміну від традиційного підходу, чи проведення ремонтних
робіт, що дозволяє скоротити витрати на підготовку об'єкта.
З погляду розробника інформаційної системи, віртуальний стейджинг - це
складний технологічний процес, який потребує чіткої координації між усіма
частинами сервісу: клієнтом, адміністратором та обчислювальними потужностями.
Сьогодні ринок нерухомості майже повністю перейшов у онлайн: перше враження
про приміщення формується за кілька секунд перегляду оголошення в інтернеті, що
створює попит на спеціалізовані платформи, які здатні забезпечити:
Автоматизацію передачі даних: Клієнту потрібно лише завантажити фото, а
система зобов’язана взяти на себе всю логіку збереження та обробки файлів
через спеціалізовані сервіси.
Прозорість процесу: Оскільки обробка зображень є тривалою операцією,
користувачу та адміністратору важливо в реальному часі спостерігати поточний
стан замовлення: від завантаження до фінальної готовності.
Гнучке управління контентом: Адміністратор системи повинен мати зручний
інструмент для модерації замовлень, оновлення прикладів робіт та керування
ціновими пропозиціями без втручання в програмний код.
Раніше, подібні задачі можна було вирішити через пряму переписку в
месенджерах або електронну пошту, але це могло призвести до втрати файлів та
плутанини в статусах. Розробка вебзастосунку «Virtual Staging Home» здатна
замінити хаотичний процес на структуровану роботу. Система базується на
16
мікросервісній архітектурі, де кожен етап - від авторизації користувача до отримання
результату контролюється детермінованим кінцевим автоматом (state machine).
1.2 Роль лендинг-сторінки як інструмента конверсії в SaaS-системах
Для сервісів, що працюють за моделлю SaaS (Software as a Service), таких як
«Virtual Staging Home», лендинг-сторінка є важливою частиною системи. Це не лише
інформаційний ресурс, який допомогає користувачу ознайомитись з послугами, а ще
й основний інструмент конверсії, що дає змогу перетворення звичайного відвідувача
на активного користувача сервісу. У контексті розробки на базі Angular, лендинг
виступає фронт-офісом, який забезпечує перший контакт із бізнес-логікою бекенду.
У розробці на Angular лендинг виконує роль користувацького інтерфейсу, саме через
який користувач уперше взаємодіє з бізнес-логікою бекенду.
З технічного та бізнесового погляду роль лендингу в системі визначається
наступними аспектами:
Швидкість та інтерактивність (SPA підхід): Через те, що фронтенд
розроблений як односторінковий застосунок (SPA), користувач отримує
миттєвий відгук на свої дії без перезавантаження сторінок. Це важливо для
конверсії - будь-яка затримка у завантаженні галереї чи форми замовлення
призводить до втрати потенційного клієнта.
Візуальна демонстрація результату: Основна задача фронтенду -
відображення результатів обробки зображень та метаданих. Лендинг дозволяє
ефективно інтегрувати інтерактивні елементи, що наочно демонструє цінність
продукту ще до моменту реєстрації користувача.
Спрощення процесу входу: Лендинг забезпечує прямий доступ до функцій
автентифікації та створення замовлень. Завдяки інтеграції з сервісом безпеки,
процес переходу від перегляду сторінки до авторизації через JWT-токени
відбувається нативно.
Таким чином лендинг-сторінка є не просто як статичним макетом, а є
динамічний інтерфейсом, що інтегровано у загальний робочий процес системи. Він
виконує роль сполучника між маркетинговою стратегією та складною
17
мікросервісною архітектурою бекенду, забезпечуючи стабільний приток
користувачів та зручність взаємодії з платформою.
1.3 Порівняльний аналіз систем адміністрування контенту.
Важливим етапом проектування веб-орієнтованої системи є вибір способу
управління контентом та адміністрування контенту. У сучасній веб-розробці можна
виділити два основних підходи: використання готових систем управління вмістом
ресурсу (CMS) та розробка власної панелі адміністрування (Custom Admin Panel). Для
проекту «Virtual Staging Home» вибір між цими підходами визначає не лише
швидкість розробки, а й здатність системи до масштабування та інтеграції з
мікросервісною архітектурою.
Для прийняття архітектурного рішення необхідно провести детальний аналіз
існуючих популярних платформ управління контентом, оцінити їхні переваги та
недоліки.
1.3.1 Характеристика системи управління контентом WordPress
WordPress є найвідомішою та найпоширенішою у світі системою управління
вмістом (CMS) з відкритим вихідним кодом і створена як платформа для блогів [4].
На сьогодні WordPress забезпечує роботу значної частини вебсайтів в інтернеті.
Рисунок 1.1 - Інтерфейс панелі адміністрування WordPress
Серед переваг WordPress можна виділити:
18
Екосистема та розширюваність: Платформа має велику базу готових плагінів
та тем оформлення. Це дозволяє додавати базовий функціонал без необхідності
написання коду з нуля.
Зручність для кінцевого користувача: Простий та зрозумілий інтерфейс
адміністративної панелі та наявність сучасних блочних редакторів, що
дозволяють контент-менеджерам легко редагувати тексти та медіа файли без
залучення розробників.
Економічна ефективність на старті: Завдяки великій кількості готових
рішень, розгортання стандартного сайту або лендингу потребує мінімальних
часових та фінансових витрат.
Велика спільнота: Наявність детальної документації та мільйонів розробників
по всьому світу спрощує пошук відповідей на технічні питання та розв'язання
стандартних проблем.
Не дивлячись на велику кількість переваг, WordPress має низку недоліків, які
можуть змусити обрати інший варіант в якості інструменту адміністрування ресурсу.
Серед цих недоліків:
Монолітна архітектура: Тісна інтеграція фронтенду та бекенду ускладнює
поділ системи на незалежні модулі, що прямо суперечить сучасним стандартам
побудови мікросервісних систем та концепції розділення відповідальностей.
Проблеми безпеки: Популярність CMS робить її головною мішенню для
кібератак. Більшість вразливостей виникає через використання сторонніх
плагінів та тем, які не проходять належної перевірки безпеки, що може бути
критичним для веб-ресурсу.
Низька продуктивність при масштабуванні: Велика кількість встановлених
плагінів генерує надлишкову кількість запитів до бази даних та завантажує
важкі скрипти. Це призводить до уповільнення роботи SPA-інтерфейсів, що є
важливим для швидкої взаємодії користувача з лендингом.
Жорстка структура даних: Стандартна схема бази даних WordPress
оптимізована під статичні статті, тому її важко адаптувати під динамічні бізнес-
процеси та детерміновані стани, реалізованого в системі «Virtual Staging Home»
19
WordPress є ефективним та перевіреним часом рішенням для створення
інформаційних порталів, корпоративних сайтів, блогів або стандартних інтернет-
магазинів, де бізнес-логика є здебільшого стандартною. Проте, для
високотехнологічних вебзастосунків із розподіленою архітектурою, тривалими
асинхронними процесами обробки зображень та підвищеними вимогами до безпеки,
використання WordPress не є лптимальним рішенням через її архітектурну
обмеженість та надлишковість у порівнянні з гнучкою мікросервісною структурою.
1.3.2 Характеристика системи управління контентом Strapi.
Strapi - однин з найпопулярніших сучасних систем управління вмістом із
відкритим вихідним кодом, що відноситься до класу Headless CMS (безголових CMS)
[5]. На відміну від традиційних монолітних платформ, Strapi повністю відокремлює
адміністративну панель та рівень збереження даних від фронтенд-частини. Система
базується на сучасному технологічному стеку Node.js і підтримує роботу як з
JavaScript, так і з TypeScript. Контент, що створюється та редагується в адмін-панелі
Strapi, передається на клієнтську сторону (наприклад, до SPA-застосунку) у форматі
JSON за допомогою автоматично згенерованого REST API або GraphQL. Це робить її
надзвичайно гнучким інструментом для інтеграції з сучасними фронтенд-
фреймворками.
20
Рисунок 1.2 – Інтерфейс панелі адміністрування Strapi
Переваги використання Strapi:
API-first архітектура: Завдяки повній ізоляції від фронтенду, система ідеально
підходить для архітектурного шаблону SPA (Single Page Application),
дозволяючи застосунку отримувати дані через стандартні асинхронні HTTP-
запити.
Гнучке моделювання даних: Розробник може самостійно проектувати
структури даних (Content-Type Builder) будь-якої складності, створюючи
динамічні зони, компоненти та зв'язки між таблицями безпосередньо через
графічний інтерфейс користувача.
Сучасний стек та підтримка TypeScript: Нативне використання TypeScript
полегшує розробку та дозволяє синхронізувати типи даних між бекендом CMS
та клієнтською частиною на фронтеді.
Вбудована система безпеки та ролей: Надає готові інструменти для
автентифікації користувачів, генерації JWT-токенів та гнучкого налаштування
прав доступу до різних ендпоінтів API.
Недоліки використання Strapi в межах проекту:
Дублювання функціоналу роботи з файлами: Strapi має власну медіа-
бібліотеку для завантаження файлів. У системі «Virtual Staging Home» за цей
процес уже відповідає спеціалізований Asset Manager Service. Використання
Strapi призвело б до архітектурної надлишковості та конфліктів при управлінні
файлами.
Складність інтеграції з існуючими сервісами: Головна бізнес-логіка системи
створена у кастомному сервісі оркестрації. Інтеграція Strapi вимагала б
побудови складних шлюзів для синхронізації даних між базою даних CMS та
основною базою даних PostgreSQL.
Додаткове інфраструктурне навантаження: Розгортання Strapi, як окремого
мікросервісу вимагає виділення додаткових серверних ресурсів (Node.js
21
рантайм, окрема БД), що ускладнює загальну архітектуру системи та процеси
CI/CD без отримання суттєвих переваг для логіки віртуального стейджингу.
Підсумовуючи, Strapi - ефективние рішення для контент-орієнтованих проектів
(блогів, новинних порталів, корпоративних сайтів), де фронтенд потребує гнучкої
доставки даних із хмари. Проте для специфічних SaaS-платформ, архітектура яких
зав'язана на складних асинхронних процесах фонової обробки та кастомних
мікросервісах, Strapi є надлишковим і створює додаткові труднощі при спробі
інтегрувати його в єдиний детермінований робочий процес системи.
1.3.3 Характеристика системи управління контентом Contentful.
На відміну від WordPress та Strapi, Contentful повністю позбавляє розробника
необхідності розгортання, підтримки та масштабування серверної інфраструктури
для адмін-панелі, оскільки вся логіка та бази даних розміщені у хмарі провайдера [6].
Платформа базується на концепції, де дані розглядаються як структуровані об'єкти,
доступні для будь-яких клієнтських застосунків (веб, мобільні додатки, тощо)
виключно через високопродуктивне REST API або GraphQL. Доставка контенту
кінцевому користувачу оптимізована завдяки глибокій інтеграції з глобальними
мережами доставки контенту.
Рисунок 1.3 - Інтерфейс панелі адміністрування Contentful
Переваги використання Contentful:
22
Відсутність витрат на серверне обслуговування: Оскільки система
функціонує як хмарний сервіс, відпадає потреба в адмініструванні баз даних,
оновленні безпеки CMS та налаштуванні хостингу для панелі керування.
Глобальна швидкість доставки даних: Весь текстовий та медіаконтент
автоматично кешується на серверах по всьому світу, що забезпечує
мінімальний час відгуку та миттєве завантаження маркетингових блоків
лендингу.
Максимальна незалежність фронтенду: фронтенд частина застосуноку може
асинхронно отримувати чисті дані у форматі JSON, що повністю відповідає
архітектурній концепції SPA та принципам реактивного програмування.
Зручний інтерфейс для кросплатформеного контенту: Дозволяє один раз
створити модель даних і транслювати її на декілька різних інтерфейсів без
необхідності дублювання інформації.
Недоліки використання Contentful в межах проекту:
Фінансова обмеженість: Повна залежність від стороннього хмарного
провайдера та його цінової політики. Безкоштовний тарифний план має жорсткі
обмеження на кількість запитів до API та обсяг даних, що є критичним
фактором для студентських та некомерційних проектів.
Конфлікт із локальною інфраструктурою зберігання файлів: Contentful
нав'язує власну модель збереження медіафайлів у своїй хмарі. Оскільки в
системі «Virtual Staging Home» вже реалізовано кастомний Asset Manager
Service, який безпосередньо взаємодіє з об'єктним сховищем та базою даних
PostgreSQL, інтеграція Contentful призвела б до подвійного збереження файлів
та архітектурного хаосу.
Складність авторизації в мікросервісному середовищі: Система безпеки
проекту базується на централізованому Security Service, який генерує JWT-
токени для внутрішніх сервісів. Інтеграція зовнішнього SaaS-рішення вимагала
б створення додаткових проксі-серверів для валідації прав доступу
адміністратора.
23
Підсумовуючи, Contentful є актуальним інструментом для великих
корпоративних проектів, де контент має транслюватися на безліч різних платформ
одночасно, а бюджети дозволяють оплачувати дорогі хмарні тарифи. Процес
розробки спеціалізованого вебзастосунку «Virtual Staging Home» вимагає повного
контролю над кодом, консистентністю даних та процесами асинхронної обробки
зображень. Тому використання закритої SaaS-системи, яка не піддається глибокій
кастомізації, не є технічно виправдано.
1.4 Результати аналізу систем адміністрування контенту
Проведений аналіз трьох різних готових рішень до управління контентом:
WordPress, Strapi та Contentful дозволяє зробити об'єктивні висновки щодо їх
актуальності для вебзастосунку «Virtual Staging Home». Незважаючи на те, що готові
рішення значно пришвидшують розробку типових інформаційних вебсайтів, їх
інтеграція у спеціалізований SaaS-продукт стикається з низкою архітектурних
перешкод.
Основною проблемою є архітектурна несумісність готових платформ із
закладеною бізнес-логікою системою. Жодна з розглянутих систем не підтримує
нативної роботи з детермінованими станами кінцевого автомата. Для розроблюваного
проекту важливо керувати переходами замовлень між специфічними станами, такими
як створення, завантаження файлів, безпосередня обробка та готовність результату.
Усі готові CMS пропонують власні модулі для роботи з медіафайлами, що суперечить
архітектурі розроблюваної системи, де за абстракцію файлового сховища та
генерацію унікальних ідентифікаторів відповідає спеціалізований мікросервіс.
Впровадження сторонньої панелі адміністрування також вимагало б створення
додаткових механізмів синхронізації авторизації, тоді як система вже використовує
централізований сервіс для генерації та валідації JWT-токенів.
Ще одним вагомим недоліком готових систем є відсутність механізмів
реактивного моніторингу. Процес віртуального стейджингу передбачає тривалу
асинхронну обробку зображень фоновими процесами, а стандартні CMS не мають
вбудованих інструментів для відстеження статусу таких операцій у реальному часі
24
без постійного перезавантаження сторінки. Враховуючи всі ці фактори, найбільш
раціональним рішенням є розробка власної панелі адміністрування як невід'ємної
частини клієнтського застосунку.
Створення кастомного модуля дозволяє забезпечити безшовну інтеграцію з
усіма мікросервісами бекенду через єдиний REST API та реалізувати ефективне
управління складними станами застосунку. Такий підхід дає змогу використати єдину
екосистему для користувацького лендингу та зони адміністратора, уникаючи
проблеми залежності від одного постачальника та архітектурної надлишковості.
Отже, відмова від готових CMS на користь розробки власної панелі є обґрунтованою
архітектурною необхідністю, що гарантує високу продуктивність, масштабованість
та повну відповідність інтерфейсу складній внутрішній логіці розроблюваної
платформи.
1.5 Постановка задачі
У результаті проведеного аналізу предметної області та існуючих підходів до
управління веб-ресурсами у сфері Virtual Staging було встановлено, що сучасні
рішення справді забезпечують базові можливості для публікації контенту, проте
мають ряд суттєвих недоліків, пов’язаних із використанням громіздких систем
управління та недостатньо ефективною інтеграцією з мікросервісною архітектурою.
Зокрема, в більшості розглянутих систем адміністрування відсутня пряма
підтримка складних бізнес-логік, не реалізовано реактивне відстеження станів
тривалих процесів та ускладнено безпечне управління медіафайлами. Крім того,
стандартні посадкові сторінки часто не відповідають сучасним вимогам до швидкодії
через надлишковість коду готових платформ, що негативно впливає на конверсію та
загальний досвід користувачів.
Отже, справді існує потреба в розробці кастомної лендінг-сторінки та власного
модуля її адміністрування, які будуть невід'ємною частиною єдиного клієнтського
web-застосунку. Нове рішення має поєднати високу швидкість роботи, зручний
інтерфейс для контент-менеджера та надійну асинхронну взаємодію з бекенд-
сервісами.
25
Метою даної роботи є розробка лендінг-сторінки та системи її адміністрування
для web-застосунку «Virtual Staging Home», що забезпечить високу конверсію
потенційних клієнтів, ефективне управління мультимедійним контентом та
покращений адміністративний досвід.
Висновки до розділу 1
У першому розділі проведено аналіз предметної області віртуального
стейджингу та визначено роль лендинг-сторінки як основного інструменту конверсії
для SaaS-застосунку «Virtual Staging Home». Встановлено, що використання SPA-
архітектури забезпечує необхідну швидкість відгуку інтерфейсу та безшовний
перехід користувача до взаємодії з платформою.
Порівняльний аналіз популярних систем управління контентом (WordPress,
Strapi, Contentful) довів недоцільність їх використання у межах розроблюваного
проекту. Готові CMS складно інтегруються з мікросервісною архітектурою,
дублюють функції існуючих сервісів.
Це технічно обґрунтовує необхідність розробки кастомної панелі
адміністрування як невід'ємної частини клієнтського застосунку. Такий підхід
гарантує повний контроль над даними, дозволяє реалізувати централізоване
управління станом, забезпечити надійну автентифікацію через JWT-токени та
організувати реактивний моніторинг тривалих асинхронних операцій обробки
зображень у реальному часі.
26
2 ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ
2.1 Визначення вимог до розробки панелі адміністрування
На етапі проєктування веб-застосунку «Virtual Staging Home» необхідно чітко
визначити коло завдань, які вирішуватимуть його ключові компоненти. Оскільки
система поєднує в собі відкриту інформаційну частину та закритий модуль керування,
формування вимог до них дозволяє створити цілісну архітектуру та забезпечити
правильну взаємодію між користувачем, адміністратором і сервером.
Головна роль публічної сторінки (лендингу) полягає в ознайомленні
відвідувачів із можливостями сервісу віртуального стейджингу та перетворенні їх на
клієнтів платформи. Для цього інтерфейс повинен коректно та швидко відображати
актуальні маркетингові дані, детальний опис доступних послуг і діючі тарифні плани.
Важливою умовою є наявність інтерактивних елементів, які дозволяють наочно
оцінити якість обробки приміщень, наприклад, через зручні інструменти порівняння
зображень кімнат до та після цифрового меблювання [7, 14]. Окрім цього, сторінка
має бути оптимізованою для швидкого завантаження на будь-яких пристроях і
забезпечувати простий, інтуїтивно зрозумілий перехід до модулів реєстрації та входу
в систему.
З іншого боку, для підтримки працездатності та актуальності платформи
необхідна кастомна панель адміністрування. Її першочергове завдання - надати
зручний інструмент для редагування вмісту сайту без необхідності прямої зміни
програмного коду. Від цього модуля вимагається забезпечення можливості
динамічного оновлення текстових блоків, коригування вартості послуг у тарифах та
управління медіа-архівом, включаючи завантаження нових прикладів робіт у
портфоліо та видалення застарілих графічних файлів.
Крім управління контентом, адміністративна частина має виконувати функцію
моніторингу бізнес-процесів платформи. Система повинна надавати адміністратору
повний доступ до списку поточних замовлень із можливістю відстеження етапів їх
27
виконання. Оскільки процеси комп'ютерної обробки зображень є тривалими,
інтерфейс панелі керування має автоматично, без постійного перезавантаження
сторінки, оновлювати статуси завдань у реальному часі, сигналізуючи про хід роботи
або виникнення помилок.
Загальні вимоги до надійності обох інтерфейсів передбачають високу
швидкість відгуку на дії користувача, асинхронний обмін даними із сервером для
уникнення затримок та суворе обмеження доступу до адміністративних функцій.
Взаємодія між клієнтським інтерфейсом та серверною частиною має базуватися на
сучасних принципах безпеки та захисту даних, що гарантує стабільну роботу всього
веб-застосунку та створює умови для його подальшого масштабування.
2.2 Компонентна структура та архітектурні особливості головної сторінки
При проєктуванні інтерфейсу головної сторінки вебзастосунку «Virtual Staging
Home» ключовим архітектурним рішенням стало застосування принципу
декомпозиції. Замість створення монолітної та перевантаженої кодом сторінки, весь
інтерфейс було розділено на ізольовані, логічно завершені модулі - компоненти.
Такий підхід повністю відповідає сучасним принципам веброзробки та дозволяє
ефективно організувати структуру клієнтської частини застосунку.
Рисунок 2.1 – структура MainPageComponent
Головна сторінка є ієрархічним деревом компонентів, де кожен окремий блок
відповідає за візуалізацію конкретного смислового розділу. Центральним елементом
виступає батьківський компонент сторінки (MainPageComponent), який виконує роль
28
каркаса та координує відображення вкладених елементів. До основних логічних
компонентів, що формують структуру сторінки, відносяться:
HeaderComponent: компонент верхньої панелі сайту, який відповідає за
навігацію по розділах лендингу, відображення логотипу платформи та містить
елементи керування для швидкого переходу до модулів авторизації та
реєстрації.
HeroSectionComponent: вітальний екран, призначений для первинної взаємодії
з користувачем. Він відповідає за відображення головного заголовка, унікальної
торгової пропозиції сервісу віртуального стейджингу та інтеграцію елементів
приклику до дії.
HowItWorksComponent: інформаційний блок, який наочно та покроково
демонструє користувачу алгоритм роботи платформи - від завантаження
вихідного фото приміщення до отримання готового дизайну інтер'єру.
OurProjectsComponent: інтерактивна галерея виконаних робіт, яка слугує
основним інструментом демонстрації якості сервісу та дозволяє порівнювати
вихідні та оброблені зображення.
AboutUsComponent: компонент, що візуалізує ключові текстові блоки з
описом місії проєкту та відображає динамічні блоки зі статистичними
показниками ефективності платформи.
ServicesComponent: блок презентації послуг та різних пакетів обробки
нерухомості та їхні функціональні можливості.
FooterComponent: компонент нижньої панелі сторінки, де зосереджена
контактна інформація, посилання на соціальні мережі, правила використання
сервісу та дані про авторські права.
2.2.1 Використання спільних компонентів та їхні переваги
Окремим важливим аспектом проєктування архітектури є винесення
повторюваних елементів інтерфейсу в категорію спільних компонентів - Shared
Components. До цієї групи належать дрібні елементи UI (наприклад, кастомні кнопки,
картки проєктів, поля вводу або специфічні інтерактивні інструменти, такі як слайдер
29
порівняння зображень «до/після»), які не прив'язані до конкретного бізнес-контексту
та можуть використовуватися у різних частинах застосунку.
Впровадження концепції Shared-компонентів у проекті «Virtual Staging Home»
забезпечує ряд переваг:
Повторне використання коду: Замість дублювання верстки та логіки
(наприклад, механізму перетягування лінійки у слайдері порівняння фото)
створюється один універсальний компонент. Надалі він безмежно тиражується
як на публічному лендингу в модулі OurProjectsComponent, так і всередині
закритої панелі адміністрування для попереднього перегляду результатів
обробки.
Візуальна та функціональна консистентність: Використання спільних
компонентів гарантує, що всі елементи управління (кнопки, форми, повзунки)
виглядатимуть та поводитимуться абсолютно однаково по всьому застосунку.
Це позитивно впливає на користувацький досвід, оскільки інтерфейс стає
передбачуваним.
Централізоване обслуговування та легкість модифікації: Якщо виникає
потреба змінити дизайн або логіку поведінки елемента (наприклад, додати нову
анімацію наведення для кнопки), розробнику достатньо внести зміни лише в
один файл у директорії shared. Зміни автоматично застосуються у всіх модулях
системи, де цей елемент задіяний, що мінімізує ризик виникнення помилок при
оновленні продукту.
Спрощення процесу тестування: Оскільки shared-компоненти є ізольованими
та приймають дані виключно через вхідні параметри, їх набагато простіше
покрити модульними тестами. Перевірена один раз кнопка чи слайдер
гарантовано працюватимуть у будь-якому новому оточенні.
Зменшення обсягу фінальної збірки: Сучасні інструменти збірки дозволяють
оптимізувати використання коду спільних елементів, уникаючи дублювання
скриптів у підсумкових файлах програми, що пришвидшує завантаження
сторінок у браузері користувача.
30
Таким чином, комбінація чіткої декомпозиції сторінки на великі логічні блоки
та виділення базових елементів у Shared-модулі дозволяє створити гнучку, стійку до
помилок та легку в підтримці архітектуру вебзастосунку.
2.3 Проектування панелі адміністрування та підсистеми управління
контентом.
Для забезпечення гнучкості web-застосунку «Virtual Staging Home» та
можливості оперативного оновлення маркетингової інформації було спроєктовано
власну панель адміністрування. Головним завданням цього модуля є надання
адміністратору зручного інструментарію для динамічного редагування контенту
головної сторінки без необхідності втручання у вихідний код чи залучення
розробників.
Організація структури даних
Весь контент лендинг-сторінки суворо типізований, що мінімізує кількість
помилок під час передачі даних між компонентами. Загальний стан сторінки
описується комплексним інтерфейсом MainPageContent, який об'єднує вкладені
структури для кожної окремої секції:
HeroSectionContent - дані для головного презентаційного екрана (заголовки,
описи, текст заклику до дії, шляхи до зображень);
AboutUsSectionContent - контент секції «Про нас», включаючи статистичні дані
(кількість виконаних проєктів, кількість клієнтів тощо).
Для забезпечення відмовостійкості системи розроблено глобальну константу
INITIAL_MAIN_PAGE_CONTENT, яка містить набір значень за замовчуванням. Ця
константа використовується при першому запуску застосунку або у випадку
примусового скидання налаштувань адміністратором.
31
Рисунок 2.2 – організація та структура інтерфейсів HeroSection та
AboutUsSection
Архітектура управління станом
Ядром підсистеми управління контентом є спеціалізований сервіс
MainPageService. Для досягнення максимальної продуктивності та реактивності
інтерфейсу використано сучасний механізм управління станом фреймворку Angular -
Signals.
32
Рис 2.3 – Взаємодія фронтенд та бекенд частин застосунку
Сервіс функціонує за таким алгоритмом:
Ініціалізація: Під час завантаження застосунку сервіс перевіряє наявність
збережених даних у локальному сховищі браузера (LocalStorage). Якщо дані
існують, вони десеріалізуються та встановлюються у сигнал; якщо ні -
застосовуються базові значення. Використання LocalStorage дозволяє зберігати
зміни контенту безпосередньо на клієнтській стороні, що позбавляє
необхідності створювати окрему базу даних для статичної інформації на
бекенді.
33
Реактивність: Сервіс експортує контент сторінки як readonly signal. Будь-яка
зміна цього сигналу автоматично ініціює оновлення всіх UI-компонентів, які на
нього підписані.
Оновлення: Метод updateContent() оновлює значення сигналу та синхронно
перезаписує дані у LocalStorage.
Реалізація інтерфейсу панелі адміністратора Інтерфейс панелі адміністратора
побудований на базі реактивних форм (Reactive Forms). Використання об'єкта
FormGroup із вкладеними групами дозволяє точно відтворити ієрархію даних
лендингу у вигляді полів вводу. До ключових функціональних можливостей
адміністративного модуля відносяться:
Редагування форм: кожна секція лендингу має відповідну групу полів у формі
для швидкого редагування текстів.
Попередній перегляд (Live Preview): завдяки використанню локальних змінних
шаблону в Angular, реалізовано миттєве відображення зображень при введенні
шляху до файлу з директорії assets, що дозволяє адміністратору перевірити
коректність медіафайлу ще до збереження змін.
Збереження та скидання: при натисканні кнопки збереження дані передаються
у сервіс, а функція скидання (Reset) дозволяє миттєво відкотити всі маніпуляції
до стану INITIAL_MAIN_PAGE_CONTENT.
Потік даних
Спроєктована архітектура гарантує односпрямований потік даних
(Unidirectional Data Flow) [8]. Завдяки застосуванню стратегії виявлення змін
ChangeDetectionStrategy.OnPush у компонентах головної сторінки, фреймворк реагує
виключно на фактичні зміни сигналів. Це унеможливлює зайві перемальовування
інтерфейсу та забезпечує високу швидкодію застосунку.
Загальну логіку взаємодії компонентів під час оновлення контенту зображено
на рисунку 2.1 у вигляді схеми потоку даних.
34
Рисунок 2.4 - Схема потоку даних підсистеми управління контентом
Отже, розроблена панель адміністрування базується на сучасних реактивних
підходах, що гарантує надійність, високу швидкість обробки даних та незалежність
фронтенд-контенту від навантаження на серверну частину системи.
Представлена схема демонструє взаємодію між користувачем, клієнтською
частиною, backend сервісами та системами зберігання даних. Центральним
компонентом архітектури виступає Orchestrator Service, який координує виконання
35
бізнес-процесів та взаємодію між іншими сервісами [15]. Такий підхід називається
асинхронним патерном і є стандартним рішенням для тривалих операцій у web-
системах.
Висновки до розділу 2
Підсумком етапу архітектурного проєктування є формування комплексної
фронтенд-моделі вебзастосунку «Virtual Staging Home», що базується на принципах
глибокої реактивності та ізоляції бізнес-логіки. На відміну від традиційних підходів,
які передбачають використання громіздких CMS-систем, для проєкту було обрано
стратегію розробки децентралізованої компонентної екосистеми. Такий підхід
дозволив чітко розмежувати відповідальність між публічним маркетинговим
інтерфейсом та закритою зоною адміністрування.
Розподіл сторінки на спеціалізовані модулі та виділення універсальних UI-
елементів (інтерактивних слайдерів, кнопок) у незалежний Shared-простір вирішило
одразу кілька завдань: забезпечило високий рівень повторного використання коду,
гарантувало візуальну консистентність платформи та значно спростило подальше
масштабування інтерфейсу.
Ключовим досягненням на етапі проектування стала розробка автономної
підсистеми управління контентом. Відмова від постійних мережевих запитів до бази
даних для завантаження статичної текстової інформації на користь гібридного
механізму (Angular Signals у поєднанні з LocalStorage) дозволила створити
безвідмовний інструмент адміністрування. Впровадження суворого
односпрямованого потоку даних Unidirectional Data Flow гарантує миттєву та
передбачувану синхронізацію між діями адміністратора у панелі керування та
відображенням змін на клієнтському лендингу.
36
3 ПРОГРАМНА РЕАЛІЗАЦІЯ СИСТЕМИ
3.1 Програмна реалізація інтерфейсу лендинг-сторінки
Реалізація клієнтської частини вебзастосунку «Virtual Staging Home» вимагає
використання інструментів, що забезпечують високу швидкість рендерингу
графічного контенту, стабільність управління станом програми та можливість
безшовної інтеграції з мікросервісною архітектурою бекенду. Оптимальним
технологічним рішенням для виконання цих завдань є використання фреймворку
Angular від компанії Google, який є повнофункціональною платформою для
створення високонавантажених односторінкових застосунків (Single Page
Applications - SPA) [2, 9].
Angular відрізняється від інших фронтенд-бібліотек своєю архітектурною
цілісністю. Це означає, що фреймворк нав'язує розробнику сувору, перевірену часом
структуру проєкту, що є важливим для забезпечення масштабованості та
довгострокової підтримки кодової бази. В основі платформи лежить компонентно-
орієнтований підхід, де кожен елемент інтерфейсу розглядається як ізольована
інкапсульована сутність, що поєднує в собі три складові: шаблон розмітки (HTML),
стилі оформлення (SCSS) та логіку поведінки, описану мовою TypeScript.
Однією з ключових переваг Angular є його нативна і глибока інтеграція із мовою
програмування TypeScript [14]. На відміну від класичного JavaScript, сувора типізація
TypeScript дозволяє виявляти потенційні помилки (наприклад, невідповідність
структур даних при отриманні відповідей від сервера) ще на етапі компіляції
програми, до моменту її запуску в браузері користувача. Це забезпечує високу
надійність клієнтського застосунку, полегшує процес рефакторингу коду та дозволяє
автоматизувати створення документації інтерфейсів взаємодії.
Важливою особливістю архітектури фреймворку є потужна екосистема для
оптимізації продуктивності фінального продукту. Завдяки вбудованим механізмам,
таким як Ahead-of-Time (AOT) компіляція та технологія видалення
невикористовуваного коду (Tree-shaking), інтенсивні обчислювальні процеси
відбуваються на етапі збірки проєкту, а не на пристрої кінцевого користувача. Як
37
результат, браузер отримує максимально оптимізовані, легкі статичні файли, що
мінімізує час первинного завантаження сторінки та покращує користувацький досвід.
Крім того, Angular надає розробнику розвинені інструменти для реалізації
реактивного програмування. Завдяки інтеграції з бібліотекою RxJS та використанню
сучасних реактивних примітивів управління станом, фреймворк дозволяє
організувати ефективний, асинхронний обмін даними між різними рівнями
застосунку [10, 11]. Це робить Angular високоефективним інструментом для розробки
інтерфейсів складних SaaS-систем, де публічна частина (лендинг) має працювати
максимально швидко та плавно, а закрита частина (панель адміністрування) - надійно
оперувати великими обсягами структурованих даних.
3.2 Розробка контекстних блоків та загального макета сторінки
Програмна реалізація графічного інтерфейсу головної сторінки платформи
«Virtual Staging Home» базується на принципах модульності та компонентної
декомпозиції. Основний макет сторінки визначається кореневим компонентом
LandingPageComponent, який виконує роль каркаса та керує послідовним
позиціонуванням дочірніх елементів у DOM-дереві. Такий підхід дозволяє ізолювати
логіку окремих розділів сайту та абстрагувати управління загальним відображенням.
38
Рисунок 3.1 – гловна лендинг-сторінка
Відповідно до спроєктованої інформаційної структури, інтерфейс лендингу
розділено на послідовні контекстні блоки. Кожен блок реалізовано у вигляді
самостійного Angular-компонента зі своєю ізольованою розміткою та стилями.
Особливу увагу під час програмної реалізації загального макета було приділено
проєктуванню навігаційного вузла, інтегрованого в HeaderComponent. Для
забезпечення архітектурної чистоти проєкту та виключення надлишкового
дублювання логіки управління станом меню, у системі не використовується класичне
розділення коду на ізольовані компоненти десктопної (desktop-nav) та мобільної
(mobile-nav) навігації. Натомість усю навігаційну структуру спроєктовано як єдиний
наскрізний модуль, що функціонує за принципом сайдбара.
Використання єдиної кодової бази панелі для всіх типів роздільної здатності
екрана дозволяє керувати логікою відображення посилань з одного контролера. За
допомогою адаптивних CSS-правил та директив фреймворку панель динамічно
трансформується залежно від пристрою користувача. Це архітектурне рішення
гарантує повну синхронізацію станів меню, виключає появу помилок
39
розсинхронізації активних розділів під час зміни розмірів вікна браузера та суттєво
оптимізує підсумковий обсяг виконуваного скрипта.
Застосування такої структури гарантує сувору послідовність рендерингу
елементів інтерфейсу. Оскільки кожен дочірній компонент повністю інкапсулює
свою внутрішню розмітку, загальний макет сторінки зберігає високу гнучкість,
дозволяючи оперативно проводити модернізацію окремих контентних зон без ризику
порушити стабільність роботи суміжних вузлів вебзастосунку.
3.3 Інтеграція та використання бібліотеки Angular Material
Створення сучасного вебзастосунку вимагає реалізації великої кількості
базових інтерактивних елементів інтерфейсу, таких як кнопки, картки, поля вводу та
навігаційні іконки. Проєктування, верстка та стилізація кожного такого елемента з
нуля є доволі довгим процесом, що збільшує час розробки та створює ризики
порушення візуальної консистентності системи. Для оптимізації процесу створення
UI-компонентів та забезпечення високих стандартів користувацького досвіду (UX) у
проєкт було інтегровано офіційну бібліотеку компонентів - Angular Material [3].
Angular Material базується на принципах Material Design та надає розробникам
набір готових, ретельно протестованих і кросбраузерних візуальних елементів.
Використання цієї бібліотеки відповідає найкращим індустріальним практикам
фронтенд-розробки, оскільки вона гарантує високу продуктивність рендерингу, має
вбудовану підтримку стандартів доступності та забезпечує безшовну сумісність із
загальною екосистемою фреймворку Angular.
Таким чином, впровадження Angular Material дозволило делегувати
відповідальність за базову поведінку інтерфейсу надійному та стандартизованому
інструменту, що звільнило час для реалізації складної бізнес-логіки системи.
3.4 Стилізація компонентів із застосуванням SCSS-міксинів
У процесі розробки графічного інтерфейсу важливим завданням є не лише
візуальне оформлення елементів, але й правильна організація архітектури каскадних
40
таблиць стилів. Оскільки проєкт побудовано за компонентною моделлю Angular, де
кожен елемент має власний інкапсульований файл стилів, виникає високий ризик
багаторазового дублювання CSS-правил. Для уникнення архітектурної
надлишковості та суворого дотримання принципу розробки DRY (Don't Repeat
Yourself) у системі було використано можливості препроцесора SCSS, зокрема
механізм кастомних міксинів [15].
Міксини в SCSS - це спеціальні блоки коду, які дозволяють групувати набори
стильових правил та багаторазово використовувати їх у будь-якому компоненті
застосунку, маючи при цьому змогу передавати динамічні параметри. Це забезпечує
централізоване управління зовнішнім виглядом платформи та суттєво зменшує
загальний обсяг кодової бази.
Використання кастомних SCSS-міксинів кардинально покращило показники
підтримуваності проекту. Завдяки такому підходу, у разі необхідності глобального
оновлення дизайну (наприклад, зміни радіуса розмиття тіней для всіх карток
платформи), розробнику достатньо внести зміни лише в один базовий файл міксину.
Під час компіляції проєкту ці зміни автоматично каскадуються та застосовуються до
всіх відповідних компонентів системи.
3.5 Реалізація та використання спільних компонентів
Важливим принципом побудови масштабованої фронтенд-архітектури у
фреймворку Angular є розділення компонентів на дві категорії: «розумні» компоненти
(Smart Components), які відповідають за роботу з даними, сервісами та бізнес-логікою,
спільні компоненти (Shared Components). Останні проєктуються як повністю
ізольовані елементи інтерфейсу, які не мають прямого доступу до глобального стану
програми чи серверних сервісів, а функціонують виключно на основі даних, що
передаються їм ззовні.
У межах програмної реалізації вебзастосунку «Virtual Staging Home» створення
спільного модуля (SharedModule або архітектура Standalone-компонентів із тегом
shared) дозволило уніфікувати інтерфейс публічного лендингу та закритої панелі
адміністрування. Головна перевага такого підходу полягає в тому, що розроблені UI-
41
елементи можна безмежно тиражувати в різних частинах системи, суворо
дотримуючись єдиного візуального стилю.
Основними технічними інструментами для організації взаємодії всередині
спільних компонентів є декоратори @Input() та @Output(). Через механізм вхідних
параметрів (@Input) батьківський компонент передає у спільний елемент необхідні
дані для рендерингу, а через механізм вихідних подій (@Output) та клас EventEmitter
спільний компонент сигналізує наверх про дії користувача (наприклад, кліки,
введення тексту чи завершення анімації).
Для більш детального розуміння архітектури спільних компонентів доцільно
розглянути програмну реалізацію базового елемента взаємодії - універсальної кнопки
(ButtonComponent). Оскільки кнопки використовуються на кожній сторінці
вебзастосунку (від заклику до дії на лендингу до підтвердження видалення в адмін-
панелі), їхня реалізація вимагає суворої типізації та інкапсуляції стилів.
Клас спільного компонента кнопки проєктується як проста функція: він не має
залежностей від зовнішніх сервісів, а його стан повністю визначається вхідними
параметрами (@Input).
Рисунок 3.2 – реалізація шару з shared-компонентів
Переваги такої реалізації:
Єдине джерело правди (Single Source of Truth) для UI: Якщо в майбутньому
виникне вимога змінити радіус заокруглення всіх кнопок у системі з 8px на 4px,
розробнику достатньо змінити один рядок у файлі button.component.scss. Усі
кнопки на публічному лендингу та в адміністративній панелі оновляться
автоматично.
42
Делегування бізнес-логіки: Компонент лише сповіщає батьківський елемент
про факт кліку через buttonClick.emit(event). Він не визначає, чи потрібно після
кліку відправляти форму на сервер, чи відкривати модальне вікно. Це робить
його абсолютно універсальним.
Оптимізація продуктивності: Завдяки використанню стратегії
ChangeDetectionStrategy.OnPush, фреймворк Angular перевіряє цей компонент
на необхідність перемальовування лише тоді, коли змінюється одне з @Input
значень (наприклад, кнопка переходить у стан isDisabled). Це суттєво
економить ресурси браузера.
3.6 Програмна реалізація панелі адміністрування та управління станом
Якщо публічна лендинг-сторінка відповідає за візуальну презентацію та
взаємодію з клієнтами, то закрита панель адміністрування (Admin Panel) є
інструментом прямого контролю над контентом та бізнес-процесами платформи.
Програмна реалізація цього модуля вимагає підвищеної уваги до надійності
архітектури: інтерфейс має бути захищений від несанкціонованого доступу,
підтримувати роботу зі складною вкладеною структурою даних та забезпечувати
миттєвий зворотний зв'язок на дії адміністратора. Для вирішення цих завдань в
екосистемі Angular було застосовано підхід реактивного програмування.
3.6.1. Реалізація інтерфейсу панелі адміністрування
Для організації складних форм вводу та редагування контенту в панелі
адміністратора було обрано технологію Reactive Forms (Реактивні форми). На відміну
від підходу, керованого шаблонами (Template-driven forms), реактивні форми
створюються та керуються безпосередньо в класі компонента. Це забезпечує
синхронний доступ до даних, незмінність стану (immutability), потужні механізми
валідації та значно спрощує покриття коду модульними тестами.
Структура даних головної сторінки (MainPageContent) є комплексним об'єктом,
що містить вкладені сутності для кожної секції екрана. Для точного відтворення цієї
43
ієрархії в інтерфейсі адміністрування використано клас FormGroup, який об'єднує
інші групи та окремі елементи керування (FormControl).
Рисунок 3.3 – інтерфейс панелі адміністрування
Архітектура компонента також містить механізми управління життєвим циклом
даних:
Збереження (saveChanges): При валідному стані форми, метод збирає дані
через виклик this.contentForm.getRawValue() та передає їх у сервіс для
подальшого оновлення системи.
Скидання налаштувань (resetToDefaults): Дозволяє адміністратору миттєво
відкотити всі маніпуляції до заводських налаштувань. Метод викликає
this.contentForm.reset(INITIAL_MAIN_PAGE_CONTENT), що гарантує
44
відновлення працездатності застосунку у разі введення критично некоректних
даних.
Таким чином, використання Reactive Forms забезпечило створення надійного,
масштабованого та зручного інструменту для контент-менеджера, який повністю
контролює процес введення, валідації та попереднього перегляду інформації перед її
збереженням у стан застосунку.
3.6.2. Управління станом контенту
У сучасній веброзробці концепція управління станом (State Management)
відіграє ключову роль у побудові масштабованих та передбачуваних клієнтських
застосунків. Стан (state) - це сукупність усіх динамічних даних, які визначають
поведінку та відображення інтерфейсу в конкретний момент часу. Зі зростанням
складності програми передача даних між компонентами виключно через базові
механізми вхідних та вихідних параметрів призводить до проблеми прокидання
властивостей. У цьому випадку проміжні компоненти змушені пропускати через себе
дані, які їм самим не потрібні, що сильно зв'язує архітектуру. Системи управління
станом вирішують цю проблему, створюючи «єдине джерело правди» (Single Source
of Truth) - централізоване сховище даних, повністю ізольоване від візуальних
компонентів. Це дозволяє синхронізувати відображення інформації в різних частинах
застосунку, спрощує відстеження мутацій даних та робить бізнес-логіку незалежною
від UI-шару.
Для платформи «Virtual Staging Home» головне завдання підсистеми управління
станом полягало в забезпеченні миттєвої синхронізації даних між закритою панеллю
адміністрування та публічною лендинг-сторінкою без затримок на мережеві запити.
Ядром цієї системи виступає сервіс управління контентом MainPageService.
45
Рисунок 3.4 – управління станом контенту
Для забезпечення максимальної реактивності інтерфейсу у сервісі використано
сучасний механізм управління станом - Сигнали (Signals). Сервіс експонує контент
сторінки як readonly signal. Це архітектурно правильний підхід, який гарантує захист
даних від несанкціонованої зміни безпосередньо з компонентів. Будь-який UI-
компонент, що звертається до цього сигналу, автоматично підписується на його
оновлення та перемальовує свій інтерфейс лише тоді, коли дані реально змінюються.
46
З метою збереження зміненого контенту між сесіями користувача та уникнення
надлишкового навантаження на серверну частину, логіка сервісу глибоко інтегрована
з локальним сховищем браузера (LocalStorage). Під час первинної ініціалізації
застосунку сервіс перевіряє наявність збережених даних за специфічним ключем.
Якщо збережений об'єкт існує, він десеріалізується та встановлюється як початкове
значення сигналу; якщо сховище порожнє - система використовує константу
INITIAL_MAIN_PAGE_CONTENT із базовими значеннями за замовчуванням.
Процес мутації стану (наприклад, редагування тексту адміністратором)
відбувається виключно через виклик публічного методу updateContent(newContent).
Під час виконання цього методу сервіс одночасно оновлює значення сигналу в
оперативній пам'яті та синхронізує його з LocalStorage. Завдяки реактивній природі
сигналів, це запускає автоматичний ланцюжок подій: сигнал самостійно сповіщає всі
підписані на нього компоненти лендинг-сторінки про зміну стану, а фреймворк
точково оновлює DOM-дерево, миттєво відображаючи нові дані для користувача.
3.6.3. Асинхронна взаємодія та моніторинг тривалих процесів
Повноцінна робота панелі адміністрування та клієнтського застосунку
неможлива без стабільного зв'язку з бекенд-інфраструктурою (зокрема, з
мікросервісами Orchestrator Service та Asset Manager Service). Програмна реалізація
мережевої взаємодії у фреймворку Angular базується на використанні вбудованого
модуля HttpClient, який працює з асинхронними потоками даних на основі бібліотеки
RxJS.
Для забезпечення безпеки передачі даних та авторизації адміністративних
запитів у систему було інтегровано механізм HTTP-перехоплювачів (HTTP
Interceptors). Перехоплювач AuthInterceptor автоматично додає JWT-токен доступу у
заголовки кожного вихідного запиту. Таке архітектурне рішення усуває необхідність
ручного додавання токенів у кожному сервісі, забезпечуючи централізований
контроль автентифікації.
Окрім базових CRUD-операцій (створення, читання, оновлення, видалення
контенту), критично важливим завданням клієнтської частини є взаємодія з
підсистемою комп'ютерної обробки зображень (віртуального стейджингу). Оскільки
47
процеси рендерингу та генерації графіки пулом Async Workers вимагають значного
часу, використання стандартної синхронної моделі «запит-відповідь» призвело б до
блокування інтерфейсу (timeout error).
Для вирішення цієї проблеми на стороні фронтенду було реалізовано механізм
реактивного поллінгу - періодичного фонового опитування сервера щодо поточного
статусу замовлення у машині станів (State Machine). Механізм побудовано з
використанням операторів бібліотеки RxJS, що дозволяє декларативно описати
складний асинхронний процес.
Переваги такого підходу:
Оптимізація ресурсів: Оператор timer запускає запити із суворо заданим
інтервалом, не перевантажуючи сервер.
Запобігання стану гонки (Race Condition): Оператор switchMap гарантує, що
якщо попередня відповідь від сервера затрималася, а таймер ініціював новий
запит, старий запит буде автоматично скасовано. Це унеможливлює обробку
застарілих даних.
Автоматичне завершення (Unsubscription): Оператор takeWhile автоматично
закриває потік та припиняє відправку мережевих запитів, щойно сервер поверне
фінальний статус (READY або FAILED), запобігаючи витокам пам'яті (memory
leaks) у браузері.
Таким чином, розроблена підсистема асинхронної взаємодії забезпечує
надійний та захищений обмін даними між клієнтом та сервером, а впровадження
реактивного поллінгу гарантує плавний користувацький досвід без блокування
інтерфейсу навіть під час виконання тривалих обчислювальних операцій на бекенді.
Висновки до розділу 3
Третій розділ присвячено безпосередній програмній реалізації клієнтської
інфраструктури платформи «Virtual Staging Home». Підсумком виконаної роботи
стала трансформація теоретичних архітектурних моделей у функціональний,
48
високопродуктивний Single Page Application (SPA), побудований на базі екосистеми
фреймворку Angular.
Завдяки застосуванню принципів жорсткої компонентної декомпозиції та
виділенню базових UI-елементів у незалежний модуль спільних компонентів (Shared
Components), вдалося сформувати масштабовану кодову базу, стійку до архітектурної
деградації. Інтеграція спеціалізованих абстракцій, таких як кастомні SCSS-міксини та
оптимізовані модулі бібліотеки Angular Material, дозволила не лише забезпечити
візуальну консистентність інтерфейсу, але й суттєво скоротити обсяг дубльованого
коду (відповідно до парадигми DRY), гарантуючи при цьому кросбраузерну
адаптивність системи без втрати продуктивності.
Критично важливим інженерним досягненням стала розробка закритого модуля
адміністрування. Використання технології Reactive Forms у поєднанні з механізмами
динамічного зв'язування даних забезпечило створення надійного інструменту для
суворої валідації контенту та його попереднього перегляду (Live Preview) в режимі
реального часу. Для синхронізації інформаційних потоків між панеллю керування та
публічним лендингом було успішно імплементовано реактивну підсистему
управління станом на базі Angular Signals та локального сховища браузера
(LocalStorage). Це архітектурне рішення повністю усунуло проблему надлишкових
мережевих запитів для завантаження статичного контенту, забезпечивши миттєвий
відгук інтерфейсу.
Окрему увагу під час програмної реалізації було приділено організації
безпечної та стійкої взаємодії з бекенд-мікросервісами. Впровадження HTTP-
перехоплювачів гарантувало централізовану обробку JWT-токенів для захисту
адміністративних маршрутів. Крім того, для моніторингу ресурсомістких процесів
комп'ютерної обробки зображень (генерації віртуального стейджингу) було
розроблено оптимізований механізм реактивного поллінгу за допомогою операторів
бібліотеки RxJS. Це дозволило ефективно відстежувати зміни станів замовлень без
ризику блокування головного потоку браузера, виникнення витоків пам'яті або стану
гонки (race condition).
49
Таким чином, розроблений клієнтський програмний комплекс повністю
задовольняє висунуті на етапі проєктування вимоги. Створена фронтенд-архітектура
відзначається високою швидкодією, надійністю обробки асинхронних операцій та
готовністю до подальшого масштабування і розгортання у виробничому (production)
середовищі.
50
ВИСНОВКИ
У результаті виконання бакалаврської кваліфікаційної роботи було успішно
вирішено актуальне завдання - спроєктовано та програмно реалізовано клієнтську
частину сучасного вебзастосунку «Virtual Staging Home», призначеного для
презентації послуг цифрового меблювання нерухомості та управління контентом. Під
час виконання проєкту було проведено глибокий системний аналіз вимог та
обґрунтовано доцільність створення Single Page Application (SPA) на базі екосистеми
фреймворку Angular. Спроєктована архітектура забезпечила чітке розмежування між
публічною зоною лендингу та закритою панеллю адміністрування, що гарантує
високий рівень безпеки та незалежності бізнес-процесів платформи.
В основу програмного продукту покладено масштабовану компонентну
інфраструктуру, де інтерфейс суворо декомпозировано на ізольовані логічні блоки.
Відмова від штучного розділення коду на десктопну та мобільну навігацію на користь
єдиного адаптивного сайдбара дозволила суттєво оптимізувати загальну кодову базу.
Разом із цим, створення бібліотеки спільних (Shared) компонентів, зокрема
універсальних кнопок та інтерактивного слайдера порівняння зображень, забезпечило
високий показник повторного використання коду. Для реалізації сучасного
графічного інтерфейсу було успішно інтегровано оптимізовані модулі бібліотеки
Angular Material, які в поєднанні з розробленою системою кастомних SCSS-міксинів
дозволили створити візуально консистентний та кросбраузерний продукт, що плавно
адаптується до будь-яких пристроїв без втрати продуктивності.
Окремим вагомим інженерним досягненням стала розробка захищеного модуля
адміністрування контентом. За допомогою технології Reactive Forms було створено
надійний інструмент для введення та валідації даних. Для ефективної синхронізації
інформаційних потоків між цією панеллю та публічним сайтом розроблено реактивну
систему управління станом. Вона базується на механізмі Angular Signals та
локальному сховищі браузера, що в комбінації зі стратегією рендерингу OnPush та
принципом односпрямованого потоку даних повністю усунуло проблему
51
надлишкових мережевих запитів і звело до мінімуму споживання апаратних ресурсів
користувача.
Повноцінне функціонування системи також підкріплюється налаштованою
асинхронною взаємодією з мікросервісами бекенду. Інтеграція HTTP-перехоплювачів
гарантувала централізовану та безпечну передачу JWT-токенів для захисту
адміністративних маршрутів. Водночас для моніторингу ресурсомістких процесів
генерації віртуального стейджингу було розроблено оптимізований механізм
реактивного поллінгу. Використання операторів бібліотеки RxJS для опитування
сервера ефективно запобігає виникненню стану гонки (race condition) та
унеможливлює витоки пам'яті в браузері.
Практичне значення отриманих результатів полягає у тому, що створений
програмний продукт не є простою абстрактною моделлю, а являє собою повноцінну,
стійку до навантажень клієнтську платформу. Гнучка архітектура застосунку
дозволяє легко масштабувати його в майбутньому, розширюючи функціонал без
руйнування існуючої бізнес-логіки. Розроблений вебзастосунок повністю відповідає
сучасним індустріальним стандартам, успішно пройшов етап проєктування та
програмної реалізації і цілком готовий до розгортання у виробничому середовищі
(production) для подальшої комерційної експлуатації.
52
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Методичні рекомендації для підготовки кваліфікаційної роботи бакалавра
здобувачів освітнього ступеня «бакалавр» зі спеціальності 122 (F3) –
«Комп’ютерні науки» усіх форм навчання [Електронний ресурс] / [упоряд.
Триус Ю.В., Оксамитна Л.П., Підгорний М.В.]; М-во освіти і науки України,
Черкас. держ. технол. ун-т. Черкаси: ЧДТУ, 2026. 53 с.
2. Офіційна документація Angular URL: https://angular.dev/overview
3. Офіційна документація Angular Material URL: https://material.angular.dev
4. Платформа WordPress URL: https://wordpress.com
5. Платформа Strapi URL: https://strapi.io
6. Платформа Contentful URL: https://www.contentful.com
7. Норман Д. Дизайн звичайних речей, 2023. - 320 с.
8. Фаулер М. Архітектура корпоративних програмних додатків, 2006. - 541 с.
9. Freeman B. Pro Angular 18: Build Powerful and Dynamic Web Apps, 2022. - 880 p.
10. Mansilla N. Reactive Programming with RxJS 5, 2018. - 146 p.
11. Офіційна документація бібліотеки асинхронного програмування RxJS URL:
https://rxjs.dev
12. Olayiwola O. PropTech and Real Estate Innovations: A Guide to Digital Technologies
and Solutions in the Built Environment, 2024 – 360 p.
13. Kleppmann M. Designing Data-Intensive Applications, 2026 – 611 p.
14. Офіційна документація мови програмування TypeScript URL:
https://www.typescriptlang.org/docs/
15. Офіційна документація Sass (SCSS) URL: https://sass-lang.com/documentation/
53
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2026 р.
СИСТЕМА УПРАВЛІННЯ КОНТЕНТОМ ОДНОСТОРІНКОВИХ
ВЕБ-ЗАСТОСУНКІВ
Специфікація
482.ЧДТУ. 62302-01
Листів 2
Розробник ____________________ Артур СЕРЕДА
Керівник ____________________ Олена ДАНЧЕНКО
Черкаси – 2026
54
482.ЧДТУ. 62287-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 62302-01 12 01 Лістинг коду програми
55
ДОДАТОК Б
СИСТЕМА УПРАВЛІННЯ КОНТЕНТОМ ОДНОСТОРІНКОВИХ
ВЕБ-ЗАСТОСУНКІВ
Лістинг коду програми
482.ЧДТУ. 62302-01 12 01
Листів 33
Розробник _____________ Артур СЕРЕДА
Черкаси – 2026
main-page.component.html
56
<div class="main-wrapper">
<vhs-header class="desktop-header"></vhs-header>
<div class="mobile-header">
<div class="mobile-header__container">
<div class="mobile-header__left">
<vhs-burger-button
class="burger-toggle"
[class.burger-hidden]="sidebarState.isOpen()"
></vhs-burger-button>
<vhs-logo class="logo" variant="black"></vhs-logo>
</div>
@if (!isAuthenticated()) {
<vhs-link class="link" variant="primary" route="/login">
<span class="material-icons">login</span>
</vhs-link>
}
</div>
</div>
<sidebar-menu
class="sidebar-dash"
[class.sidebar-open]="sidebarState.isOpen()"
></sidebar-menu>
<div class="body">
<vhs-hero-section></vhs-hero-section>
<vhs-how-section></vhs-how-section>
<vhs-projects-section></vhs-projects-section>
<vhs-text-line></vhs-text-line>
<vhs-about-us-section></vhs-about-us-section>
<vhs-services-section></vhs-services-section>
57
</div>
<vhs-footer></vhs-footer>
</div>
main-page.component.scss
@use '../../../styles/theme' as *;
.main-wrapper {
display: flex;
flex-direction: column;
gap: clamp(2rem, 2vw, 5rem);
}
.body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: clamp(2rem, 8vw, 6rem);
@media (max-width: 768px) {
padding-top: 90px;
align-items: stretch;
}
}
.sidebar-dash {
display: none;
@media (max-width: 768px) {
display: block;
58
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
&.sidebar-open {
transform: translateX(0);
}
}
}
.desktop-header {
display: block;
@media (max-width: 768px) {
display: none;
}
}
.mobile-header {
display: none;
@media (max-width: 768px) {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
59
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
align-items: center;
padding: 0 1rem;
z-index: 999;
}
&__container {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
width: 100%;
max-height: 100%;
height: 100%;
}
&__left {
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.burger-toggle {
@media (max-width: 768px) {
z-index: 1001;
}
&.burger-hidden {
display: none !important;
}
60
}
.link {
::ng-deep {
.link-primary {
height: 2rem;
padding: 1.3rem 0.8rem;
background-color: #ffffff;
}
}
}
.logo {
width: 160px;
}
.material-icons {
color: $primary;
}
about-us-section.component.html
<section class="about-us">
<div class="about-us__tiles">
<div class="about-us__img">
<img class="about-us__img-pic" alt="Picture About Us" src="assets/about.png" />
</div>
<div class="about-us__stats-wrapper">
<div class="about-us__stats">
<div class="about-us__stat">
<h2 class="about-us__stat-value">
61
The <br />
500+
</h2>
<p class="about-us__stat-label">projects staged</p>
</div>
<div class="about-us__stat about-us__stat--bordered">
<h2 class="about-us__stat-value">98%</h2>
<p class="about-us__stat-label">satisfied clients</p>
</div>
<div class="about-us__stat about-us__stat--bordered">
<h2 class="about-us__stat-value">20+</h2>
<p class="about-us__stat-label">skilled designers</p>
</div>
</div>
</div>
<div class="about-us__cta-wrapper">
<div class="about-us__cta">
<div class="about-us__cta-inner">
<h2 class="about-us__cta-title">Homee</h2>
<img class="about-us__cta-img" alt="Images Group" src="assets/imagesgroup.png" />
</div>
<button class="about-us__cta-btn">Start now</button>
</div>
</div>
</div>
</section>
about-us-section.component.scss
@use '../../../../../styles/mixins' as *;
@use '../../../../../styles/theme' as *;
62
:host {
display: block;
width: 100%;
}
.about-us {
width: 100%;
max-width: 1280px;
margin: 0 auto;
&__tiles {
max-width: 1280px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: clamp(1rem, 3vw, 3rem);
min-height: 19rem;
@media (max-width: 1024px) {
align-items: center;
justify-content: center;
height: auto;
min-height: auto;
flex-direction: row;
flex-wrap: nowrap;
}
@media (max-width: 600px) {
flex-direction: column;
63
}
@media (max-width: 1280px) {
padding: 0 1rem;
}
}
&__img {
flex: 0 1 auto;
@media (max-width: 1024px) {
display: none;
}
}
&__img-pic {
max-width: 100%;
height: auto;
max-height: 19rem;
object-fit: contain;
}
&__stats-wrapper {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
&__stats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
64
justify-content: center;
gap: clamp(0.5rem, 2vw, 1rem);
}
&__stat {
padding-left: clamp(0.5rem, 2vw, 2rem);
padding-right: clamp(0.5rem, 2vw, 2rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
&--bordered {
border-left: solid 1px black;
}
}
&__stat-value {
font-family: $font-family-heading-bold;
font-size: clamp(1.5rem, 2vw, $font-size-xl);
margin: 0 0 0.5rem;
line-height: 1.2;
}
&__stat-label {
font-family: $font-family-main;
font-size: clamp(0.875rem, 1.5vw, 1rem);
}
&__cta-wrapper {
flex: 0 0 auto;
65
@media (max-width: 1024px) {
max-width: 100%;
display: flex;
justify-content: center;
}
}
&__cta {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
height: 100%;
min-height: 19rem;
@media (max-width: 1024px) {
align-items: center;
min-height: auto;
gap: 2rem;
}
}
&__cta-inner {
display: flex;
flex-direction: column;
gap: clamp(1rem, 3vw, 1.8rem);
}
&__cta-title {
font-family: $font-family-heading-bold;
font-size: clamp(1.5rem, 2vw, $font-size-xl);
margin: 0;
66
}
&__cta-img {
align-self: flex-end;
max-width: 100%;
height: 100%;
@media (max-width: 1024px) {
width: 80%;
}
}
&__cta-btn {
@include buttonStarter;
@media (max-width: 1024px) {
width: 80%;
}
}
@media (max-width: 1024px) {
padding: 0 1rem;
}
}
hero-section.component.html
<div class="hero">
<section class="hero__section">
<div class="hero__left">
<div class="hero__left-content">
<h1 class="hero__title">Virtual Staging Home</h1>
<p class="hero__description">
67
<span>Professional virtual staging made simple.</span>
<span class="hero__description-secondary">
Just upload a photo and get stunning interiors.</span
>
</p>
<button class="hero__cta">
Get Started <mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
<div class="hero__preview">
<img
alt="Home preview"
src="assets/imgs/image.png"
class="hero__preview-img"
/>
</div>
</div>
<div class="hero__right">
<img alt="Interior Hero" src="assets/hero.png" class="hero__right-img" />
</div>
</section>
</div>
hero-section.component.scss
@use '../../../../../styles/mixins' as *;
@use '../../../../../styles/theme' as *;
.hero {
width: 100%;
max-width: 1280px;
68
@media (max-width: 1280px) {
padding: 0 1rem;
}
@media (max-width: 768px) {
margin: 0.25rem auto;
}
&__section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
@media (max-width: 900px) {
gap: 1.5rem;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
}
&__left {
flex: 1 1 370px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: clamp(2rem, 4vw, 4rem);
69
@media (max-width: 768px) {
display: contents;
}
}
&__left-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(1rem, 2vw, 2rem);
@media (max-width: 768px) {
align-items: center;
order: 1;
width: 100%;
}
}
&__title {
font-family: $font-family-heading-bold;
font-size: clamp(2rem, 5vw, $font-size-xxxl);
line-height: 1.15;
@media (max-width: 768px) {
text-align: center;
}
}
&__description {
font-family: $font-family-main;
font-size: clamp(1rem, 2vw, $font-size-md);
margin: 0;
70
max-width: 450px;
@media (max-width: 768px) {
text-align: center;
max-width: 90%;
}
}
&__cta {
@include buttonStarter;
margin-top: 1.5rem;
gap: 0.5rem;
font-family: $font-satoshi-bold;
@media (max-width: 768px) {
order: 3;
width: 90%;
margin-top: 0;
justify-content: center;
}
}
&__preview {
@media (max-width: 768px) {
display: none;
}
}
&__preview-img {
max-width: 100%;
height: auto;
}
71
&__right {
flex: 1 1 500px;
display: flex;
justify-content: flex-end;
@media (max-width: 900px) {
justify-content: center;
flex: 1 1 auto;
}
@media (max-width: 768px) {
order: 2;
max-width: 90%;
justify-content: center;
}
}
&__right-img {
width: 100%;
height: auto;
object-fit: contain;
max-width: 702px;
}
}
how-section.component.html
<section class="how">
<h1 class="how__title">How it Works</h1>
<div class="how__grid">
<div class="how__item">
72
<div class="how__card">
<h4 class="how__card-heading">Step 1</h4>
<p class="how__card-text">
Create account, upload your photos, and select the staging options you
need.
</p>
</div>
</div>
<div class="how__item how__item--span-2">
<div class="how__video">
<video class="how__video-bg" autoplay loop [muted]="true" playsinline>
<source src="assets/videoLoop1.mp4" type="video/mp4" />
</video>
</div>
</div>
<div class="how__item">
<div class="how__card">
<h4 class="how__card-heading">Step 2</h4>
<p class="how__card-text">
Our manager contacts you to clarify preferences, then team of pro
designers start working on your project.
</p>
</div>
</div>
<div class="how__item">
<div class="how__card how__card--white">
<div class="how__divider">✦</div>
<p class="how__card-text">
You will get your first test image order for free
73
</p>
<div class="how__divider">✦</div>
</div>
</div>
<div class="how__item">
<div class="how__card">
<h4 class="how__card-heading">Step 3</h4>
<p class="how__card-text">
Once ready, having passed quality control by experts, high-quality
images appear in your personal dashboard.
</p>
</div>
</div>
<div class="how__item how__item--span-2">
<img class="how__image" alt="Sofa" src="assets/sofa.png" />
</div>
</div>
</section>
how-section.component.scss
@use '../../../../../styles/mixins' as *;
@use '../../../../../styles/theme' as *;
.how {
display: flex;
flex-direction: column;
gap: clamp(1rem, 3vw, 3rem);
width: 100%;
max-width: 1280px;
74
&__title {
font-family: $font-family-heading-regular;
text-align: center;
@media (min-width: 769px) {
text-align: left;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.5rem, 2vw, 1.5rem);
@media (max-width: 900px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
}
&__item {
min-height: 20rem;
display: flex;
flex-direction: column;
&--span-2 {
grid-column: span 2;
75
@media (max-width: 900px) {
display: none;
}
}
@media (max-width: 900px) {
min-height: 16rem;
}
@media (max-width: 600px) {
min-height: auto;
padding: 0;
}
}
&__card {
background-color: $primary;
border-radius: 24px;
height: 100%;
min-height: 19rem;
color: #e8e8e8;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: clamp(1rem, 2vw, 2rem);
&--white {
background-color: #fafafa;
border: 2px solid $primary;
color: $primary;
align-items: center;
76
justify-content: center;
text-align: center;
gap: clamp(1rem, 2vw, 2rem);
@media (max-width: 600px) {
padding: 0 1rem;
}
}
@media (max-width: 900px) {
min-height: 15rem;
}
@media (max-width: 600px) {
min-height: auto;
padding: 1.25rem;
}
}
&__card-heading {
font-family: $font-family-heading-bold;
}
&__card-text {
font-family: $font-family-main;
line-height: 1.5;
}
&__video {
width: 100%;
height: 100%;
display: flex;
77
border-radius: 24px;
overflow: hidden;
min-height: 19rem;
}
&__video-bg {
width: 100%;
height: 100%;
object-fit: cover;
}
&__image {
width: 100%;
height: 100%;
min-height: 19rem;
object-fit: cover;
border-radius: 24px;
display: block;
}
&__divider {
text-align: center;
font-size: 2rem;
margin: 0.75rem 0;
}
@media (max-width: 1280px) {
padding: 0 1rem;
}
}
projects-section.component.html
78
<section class="projects">
<div class="projects__left">
<h1 class="projects__title">Our Projects</h1>
<div class="projects__filter">
<h4 class="projects__filter-title">Choose room type:</h4>
<mat-chip-listbox
class="projects__chips"
[value]="roomType()"
(change)="onRoomTypeChange($event)"
aria-orientation="horizontal"
>
<mat-chip-option value="Kitchen">Kitchen</mat-chip-option>
<mat-chip-option value="Bedroom">Bedroom</mat-chip-option>
<mat-chip-option value="Bathroom">Bathroom</mat-chip-option>
<mat-chip-option value="Living room">Living room</mat-chip-option>
<mat-chip-option value="Home office">Home office</mat-chip-option>
</mat-chip-listbox>
</div>
<div class="projects__divider">✦</div>
<div class="projects__filter">
<h4 class="projects__filter-title">Choose design style:</h4>
<mat-chip-listbox
class="projects__chips"
[value]="designStyle()"
(change)="onDesignStyleChange($event)"
>
<mat-chip-option value="Original">Original</mat-chip-option>
<mat-chip-option value="Modern">Modern</mat-chip-option>
<mat-chip-option value="Minimalism">Minimalism</mat-chip-option>
79
<mat-chip-option value="Loft">Loft</mat-chip-option>
<mat-chip-option value="Classic">Classic</mat-chip-option>
<mat-chip-option value="Scandinavian">Scandinavian</mat-chip-option>
</mat-chip-listbox>
</div>
</div>
<div class="projects__right">
<mat-card class="projects__card">
<img
mat-card-image
class="projects__card-img"
[src]="currentImage()"
alt="Project preview"
/>
<a href="/catalog" class="projects__catalog-btn">
View Catalog <mat-icon>call_made</mat-icon>
</a>
</mat-card>
</div>
</section>
projects-section.component.scss
@use '../../../../../styles/mixins' as *;
@use '../../../../../styles/theme' as *;
.projects {
width: 100%;
max-width: 1280px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
80
gap: clamp(2rem, 5vw, 4rem);
@media (max-width: 1280px) {
padding: 0 1rem;
}
&__left {
flex: 1 1 320px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 3rem);
}
&__title {
font-family: $font-family-heading-bold;
@media (max-width: 900px) {
text-align: center;
}
}
&__filter {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
&__filter-title {
font-family: $font-family-heading-regular;
@media (max-width: 900px) {
text-align: center;
81
}
}
&__chips {
::ng-deep .mdc-evolution-chip-set__chips {
display: flex;
flex-wrap: wrap;
@media (max-width: 900px) {
justify-content: center;
}
}
mat-chip-option {
height: 3rem;
padding: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
mat-chip-option.mat-mdc-chip-selected {
background-color: black;
color: white;
--mat-chip-elevated-container-color: black;
--mat-chip-label-text-color: white;
}
}
&__divider {
text-align: center;
82
font-size: 2.5rem;
}
&__right {
flex: 2 1 600px;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
&__card {
width: 100%;
height: 660px;
min-height: 500px;
background-color: $secondary;
box-shadow: none;
overflow: hidden;
border-radius: 24px;
position: relative;
@media (max-width: 600px) {
height: 350px;
min-height: 350px;
}
}
&__card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
83
&__catalog-btn {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: $primary;
color: #ffffff;
padding: $spacing-xs $spacing-lg;
border-radius: 20px;
font-family: $font-family-main;
font-size: $font-size-sm;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
&:hover {
border-radius: $spacing-sm;
text-decoration: none;
}
@media (max-width: 400px) {
bottom: 1rem;
right: 1rem;
font-size: 0.9em;
}
}
}
services-section.component.html
84
<section class="services">
<h1 class="services__title">Services</h1>
<div class="services__blocks">
<div class="services__block">
<div class="services__card services__card--fixed">
<div class="services__card-content">
<h5 class="services__card-num">01</h5>
<h1 class="services__card-title">
Virtual <br />
Staging <br />
Home
</h1>
</div>
<vhs-link route="#" variant="services"
><mat-icon>call_made</mat-icon></vhs-link
>
</div>
<div class="services__img">
<img
class="services__img-pic"
alt="Virtual Staging Home"
src="assets/SimageOne.png"
/>
</div>
</div>
<div class="services__block">
<div class="services__video-wrapper">
<video class="services__video" autoplay loop [muted]="true" playsinline>
<source src="assets/videoServices.mp4" type="video/mp4" />
</video>
</div>
85
<div class="services__card">
<div class="services__card-content">
<h5 class="services__card-num">02</h5>
<h1 class="services__card-title">
360° <br />
virtual <br />
tours
</h1>
</div>
<vhs-link route="#" variant="services"
><mat-icon>call_made</mat-icon></vhs-link
>
</div>
</div>
<div class="services__block">
<div class="services__card services__card--fixed">
<div class="services__card-content">
<h5 class="services__card-num">03</h5>
<h1 class="services__card-title">
Virtual <br />
renovation
</h1>
</div>
<vhs-link route="#" variant="services"
><mat-icon>call_made</mat-icon></vhs-link
>
</div>
<div class="services__img">
<img
class="services__img-pic"
alt="Virtual Renovation"
86
src="assets/SimageTwo.png"
/>
</div>
</div>
</div>
</section>
services.component.scss
@use '../../../../../styles/mixins' as *;
@use '../../../../../styles/theme' as *;
:host {
display: block;
width: 100%;
}
.services {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 3rem);
max-width: 1280px;
width: 100%;
margin: 0 auto;
@media (max-width: 1280px) {
padding: 0 1rem;
}
&__title {
font-family: $font-family-heading-regular;
@media (max-width: 768px) {
87
text-align: center;
}
}
&__blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: clamp(0.75rem, 2vw, 1.25rem);
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
&__block {
display: flex;
flex-direction: column;
gap: clamp(0.75rem, 2vw, 1rem);
height: 100%;
}
&__card {
color: white;
background-color: $primary;
border-radius: 2rem;
min-height: 15rem;
padding: clamp(1.25rem, 3vw, 2rem);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
88
flex-grow: 1;
vhs-link {
margin-top: auto;
}
&--fixed {
height: 284px;
@media (max-width: 900px) {
height: auto;
}
@media (max-width: 768px) {
min-height: 11rem;
}
}
@media (max-width: 768px) {
min-height: 11rem;
border-radius: 1.25rem;
padding: 1.25rem;
}
}
&__card-num {
font-family: $font-family-heading-medium;
}
&__card-title {
font-family: $font-family-heading-bold;
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
89
line-height: 1.1;
}
&__video-wrapper,
&__img {
width: 100%;
height: clamp(14rem, 30vw, 45rem);
border-radius: 2rem;
overflow: hidden;
@media (max-width: 900px) {
display: none;
}
@media (max-width: 768px) {
height: 12rem;
border-radius: 1.25rem;
}
}
&__video,
&__img-pic {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
@media (max-width: 1028px) {
padding: 0 1rem;
}