1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Бакалавр
  4. 126 Інформаційні системи та технології (Web-технології, web-дизайн)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9882
Title: Сайт-портфоліо фотографа
Authors: Ланських , Євген Володимирович
Завалко, Антон Миколайович
Keywords: сайт-портфоліо;тестування;фотограф;React;Node.js;Express.js;PostgreSQL;REST API;галерея;адаптивний дизайн
Issue Date: 10-Jun-2026
Abstract: Кваліфікаційна робота присвячена розробці сучасного сайту-портфоліо для професійного фотографа. Робота є актуальною, оскільки більшість фотографів використовують соціальні мережі, як основний канал презентації, що не забезпечує належного рівня професіоналізму та не має інструментів для автоматизації замовлень, а існуючі готові рішення мають високу вартість підписки та обмежену гнучкість. Метою роботи є розробка та реалізація сучасного сайту-портфоліо для фотографа, який забезпечує ефективну презентацію творчих робіт через галерею, зручну систему замовлення фотосесій, адаптивний дизайн та інтеграцію з зовнішніми сервісами. Об’єкт дослідження – процес створення сайту-портфоліо для фотографа з використанням сучасних технологій. Предмет дослідження – технології та методи розробки інтерактивного сайту-портфоліо на базі фреймворку React. Було використано основні методи: аналіз предметної області та аналогів, компонентний підхід до розробки (React), методологію Mobile-first дизайну, методи функціонального та візуального тестування. Практична значущість отриманих результатів полягає в тому, що розроблений сайт-портфоліо може бути використаний професійними фотографами, як готовий інструмент для презентації своїх робіт, залучення клієнтів та продажу послуг. У першому розділі проведено аналіз предметної області, розглянуто аналоги обґрунтовано вибір технологій розробки та сформульовано постановку задачі. У другому розділі обґрунтовується технічне завдання: визначено призначення та основні функції системи, сформовано функціональні та нефункціональні вимоги, вимоги до дизайну, інтерфейсу та навігації, описано структуру сервера та архітектуру системи. Третій розділ присвячений практичній реалізації сайту: описано розробку фронтенд-частини, бекенд-частини, бази даних PostgreSQL, інтеграцію зовнішніх сервісів, розгортання на хостингу Vercel та тестування.
URI: https://er.chdtu.edu.ua/handle/ChSTU/9882
Appears in Collections:126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:
File Description SizeFormat 
РЕП_БАК_Завалко _WEB-2211.pdf
  Restricted Access		4.23 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ 
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ 
 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи бакалавра 
 
на тему: «Сайт-портфоліо фотографа» 
 
 
 
 
Виконав: здобувач першого 
(бакалаврського) рівня вищої освіти 
4 курсу, групи Web-2211  
Спеціальності 126 Інформаційні системи та 
технології 
ОП «Web-технології, Web-дизайн» 
Завалко Антон Миколайович 
Керівник: к.т.н., професор Ланських Є.В. 
Рецензент: директор ТОВ "АНДЕРСЕНЛАБ"  
Алесін Олег Вікторович 
 
 
 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2026 року 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет  інформаційних технологій і систем  
(повна назва) 
Кафедра інформаційних технологій проектування  
(повна назва) 
Освітньо-кваліфікаційний рівень бакалаврський  
(назва) 
Спеціальність  126 «Інформаційні системи та технології»  
(шифр і назва) 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри ІТП 
 Тетяна ПРОКОПЕНКО 
« »  20 року 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА 
Завалко Антон Миколайович 
(прізвище, ім’я, по батькові) 
1. Тема роботи  Сайт-портфоліо фотографа  
 
 
Керівник роботи  Ланських Євген Володимирович, кандидат технічних наук, професор  
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
Затверджено наказом Черкаського державного технологічного університету від 
12.03.2026 № 56/03-03 
2. Строк подання здобувачем роботи   
3. Вихідні дані до роботи  Методичні рекомендації до підготовки кваліфікаційної роботи  
для здобувачів освітнього ступеня «бакалавр» зі спеціальності 126 Інформаційні системи та  
технології ОП «Web-технології, Web-дизайн»; Офіційна документація React, Node.js,  
Express.js, PostgreSQL; Аналіз існуючих аналогів сайтів-портфоліо фотографів;  
наукові статті; Публікації щодо сучасних тенденцій веб-розробки;  
 
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити) 
Вступ; Розділ 1. Постановка задачі. Огляд існуючих рішень, аналогів; Розділ 2. Обґрунтування 
технічного завдання; Розділ 3. Розробка та тестування сайту; Висновок; Список використаних  
джерел.  
 
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів) 
Скріншоти головної сторінки сайту, скріншоти сторінки портфоліо з фільтрацією, Скріншоти 
сторінки послуг з кошиком замовлень, скріншоти сторінки контактів, скріншоти мобільної версії 
сайту, результати тестування продуктивності, результати тестування API та бази даних, таблиці, 
формули. 
 
6. Консультанти розділів роботи 
Розділ Прізвище, ініціали та посада Підпис, дата 
консультанта 
  завдання видав завдання прийняв 
    
    
    
    
 
7. Дата видачі завдання   
 
КАЛЕНДАРНИЙ ПЛАН 
 
№ Назва етапів Строк виконання 
з/п кваліфікаційної роботи етапів роботи Примітка 
1 Вибір та затвердження теми кваліфікаційної роботи 20.02.2026 Виконано 
2 Формування завдання на кваліфікаційну роботу 27.02.2026 Виконано 
3 Підбір та аналіз літературних джерел за темою 09.03.2026 Виконано 
роботи 
4 Формування вступу 23.03.2026 Виконано 
5 Постановка задачі та огляд існуючих рішень, 13.04.2026 Виконано 
аналогів 
6 Обґрунтування технічного завдання 27.04.2026 Виконано 
7 Розробка та тестування сайту 11.05.2026 Виконано 
8 Аналіз зробленої роботи 13.05.2026 Виконано 
9 Оформлення пояснювальної записки та списка 15.05.2026 Виконано 
використаних джерел 
10 Підготовка презентації та доповіді до захисту 01.06.2026 Виконано 
11 Захист кваліфікаційної роботи 10.06.2026 Виконано 
 
Здобувач вищої освіти     
(підпис) (прізвище та ініціали) 
Керівник роботи     
(підпис) (прізвище та ініціали) 
 
 
 
 
 
 
 
 
 
 
АНОТАЦІЯ 
 
Структура та обсяг роботи. Пояснювальна записка складається зі вступу, 
трьох розділів, висновків, викладена на 65 сторінках, містить 37 рисунків, 5 
таблиць, 30 джерел використаної літератури. 
Кваліфікаційна робота присвячена розробці сучасного сайту-портфоліо 
для професійного фотографа. Робота є актуальною, оскільки більшість 
фотографів використовують соціальні мережі, як основний канал презентації, 
що не забезпечує належного рівня професіоналізму та не має інструментів для 
автоматизації замовлень, а існуючі готові рішення мають високу вартість 
підписки та обмежену гнучкість. 
Метою роботи є розробка та реалізація сучасного сайту-портфоліо для 
фотографа, який забезпечує ефективну презентацію творчих робіт через 
галерею, зручну систему замовлення фотосесій, адаптивний дизайн та 
інтеграцію з зовнішніми сервісами. Об’єкт дослідження – процес створення 
сайту-портфоліо для фотографа з використанням сучасних технологій. Предмет 
дослідження – технології та методи розробки інтерактивного сайту-портфоліо 
на базі фреймворку React. Було використано основні методи: аналіз предметної 
області та аналогів, компонентний підхід до розробки (React), методологію 
Mobile-first дизайну, методи функціонального та візуального тестування. 
Практична значущість отриманих результатів полягає в тому, що 
розроблений сайт-портфоліо може бути використаний професійними 
фотографами, як готовий інструмент для презентації своїх робіт, залучення 
клієнтів та продажу послуг.  
У першому розділі проведено аналіз предметної області, розглянуто 
аналоги обґрунтовано вибір технологій розробки та сформульовано постановку 
задачі.  
У другому розділі обґрунтовується технічне завдання: визначено 
призначення та основні функції системи, сформовано функціональні та 
нефункціональні вимоги, вимоги до дизайну, інтерфейсу та навігації, описано 
структуру сервера та архітектуру системи. 
Третій розділ присвячений практичній реалізації сайту: описано розробку 
фронтенд-частини, бекенд-частини, бази даних PostgreSQL, інтеграцію 
зовнішніх сервісів, розгортання на хостингу Vercel та тестування. 
Ключові слова: сайт-портфоліо, фотограф, React, Node.js, Express.js, 
PostgreSQL, REST API, галерея, адаптивний дизайн, тестування. 
 
 
 
SUMMARY 
 
The structure and volume of the work. The thesis consists of an introduction, 
three chapters, conclusions, set out on 65 pages, contains 37 figures, 5 tables, 30 
references. 
The qualification work is dedicated to the development of a modern 
photographer’s portfolio website. The work is relevant because most photographers 
use social networks as their main presentation channel, which does not provide an 
adequate level of professionalism and lacks tools for order automation, while existing 
ready-made solutions have high subscription costs and limited flexibility. 
The aim of the study is to develop and implement a modern photographer's 
portfolio website that ensures effective presentation of creative works through a 
gallery, a convenient photo session ordering system, adaptive design, and integration 
with external services. The object of the study is the process of creating a portfolio 
website for a photographer using modern technologies. The subject of the study is the 
technologies and methods of developing an interactive portfolio website based on the 
React framework. The basic methods used include: analysis of the subject area and 
analogues, a component-based development approach (React), Mobile-first design 
methodology, functional and visual testing methods. 
The practical value of the obtained results lies in the fact that the developed 
portfolio website can be used by professional photographers as a ready-made tool for 
presenting their works, attracting clients, and selling services. 
The first chapter analyzes the subject area, examines analogues, justifies the 
choice of development technologies, and formulates the problem statement.  
The second chapter substantiates the technical specification: the purpose and 
main functions of the system are defined, functional and non-functional requirements, 
design, interface and navigation requirements are formed, the server structure and 
system architecture are described. 
The third chapter is devoted to the practical implementation of the website: the 
development of the frontend part, the backend part, the PostgreSQL database, 
integration of external services, deployment on Vercel hosting, and testing. 
Keywords: portfolio website, photographer, React, Node.js, Express.js, 
PostgreSQL, REST API, gallery, adaptive design, testing. 
 
 
 
ЗМІСТ 
ВСТУП .................................................................................................................... 4 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ ............................................................................................................. 6 
1.1 Опис предметної області та актуальності сайту-портфоліо фотографа ..... 6 
1.2 Огляд та аналіз аналогів................................................................................ 7 
1.3 Аналіз сайтів-портфоліо фотографів .......................................................... 12 
1.4 Вибір технологій розробки ......................................................................... 15 
1.5 Постановка задачі ........................................................................................ 17 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ........................... 19 
2.1 Призначення та основні функції системи .................................................. 19 
2.1.1 Мета та завдання сайту-портфоліо ....................................................... 19 
2.1.2 Цільова аудиторія .................................................................................. 19 
2.1.3 Основні функції системи ...................................................................... 20 
2.2 Вимоги до системи ...................................................................................... 20 
2.3 Вимоги до дизайну, інтерфейсу та навігації .............................................. 22 
2.3.1 Єдиний фірмовий стиль ........................................................................ 22 
2.3.2 Адаптивний дизайн ............................................................................... 22 
2.3.3 Вимоги до навігації ............................................................................... 23 
2.4 Структура сервера, сторінок та архітектура системи ................................ 23 
2.4.1 Логічна структура сайту ....................................................................... 23 
2.4.2 Фізична структура проекту ................................................................... 24 
2.4.3 Архітектура системи ............................................................................. 26 
2.5 Вимоги до контенту та адміністрування .................................................... 26 
2.5.1 Типи контенту та вимоги до якості ...................................................... 26 
2.5.2 Наповнення сторінок ............................................................................. 26 
2.5.3 Вимоги до адміністрування .................................................................. 27 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № докум. Підпис Дата  
 Розроб. Завалко А.М.  Літ. Арк. Аркушів 
 Перевір. Ланських Є.В. Сайт-портфоліо фотографа.  2 65 
 Рецензент Алесін О.В.. Пояснювальна записка 
ФІТІС, 
 Н. контр. Ланських Є.В. кафедра ІТП, WEB-2211 
 Затверд. Прокопенко Т.О.  
 
2.6 Вимоги до хостингу та техніко-економічне обґрунтування ..................... 27 
2.7 Структура сайту, UI/UX, навігація та діаграма прецедентів .................... 27 
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ САЙТУ.......................................... 31 
3.1 Обґрунтування вибору засобів реалізації .................................................. 31 
3.1.1 Середовище розробки та фреймворк для frontend-частини ................ 31 
3.1.2 Технології для backend та база даних. .................................................. 31 
3.1.3 Хостинг та деплой. ................................................................................ 32 
3.2 Архітектура та структура проекту.............................................................. 32 
3.2.1 Фізична структура проекту та робота з API......................................... 33 
3.3 Реалізація фронтенд-частини ...................................................................... 33 
3.3.1 Реалізація маршрутизації та навігації .................................................. 34 
3.3.2 Розробка компонентів інтерфейсу ........................................................ 35 
3.3.3. Розробка сторінок ................................................................................. 38 
3.3.4 Стилізація та адаптивний дизайн ......................................................... 47 
3.4. Реалізація бекенду та бази даних .............................................................. 49 
3.4.1. Створення сервера на Node.js + Express .............................................. 49 
3.4.2. Налаштування підключення до PostgreSQL (Neon) ........................... 50 
3.4.3. Розробка схеми бази даних .................................................................. 51 
3.4.4. Реалізація API маршрутів .................................................................... 52 
3.4.5. Інтеграція зовнішніх сервісів ............................................................... 53 
3.5. Інтеграція фронтенду та бекенду .............................................................. 54 
3.6. Розгортання проекту (Deploy) ................................................................... 55 
3.7 Тестування системи ..................................................................................... 56 
ВИСНОВКИ ......................................................................................................... 62 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ............................................................. 64 
ДОДАТОК А ........................................................................................................ 66 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  3 
 
ВСТУП 
 
У сучасному світі професійна діяльність фотографа тісно пов’язана з 
сучасними інтернет технологіями. Без якісного онлайн-представництва важко 
стати впізнаваним серед потенційних клієнтів.  За даними досліджень, 
більшість людей знайомляться з роботами фотографа через інтернет, перш ніж 
звернутися до них за послугами [1]. Однак більшість фотографів 
використовують соціальні мережі, як основний інструмент презентації своїх 
робіт, що не забезпечує функціональності портфоліо та створення професійного 
іміджу, необхідного для ефективного залучення клієнтів і розвитку особистого 
бренду. Існуючі готові рішення мають суттєві недоліки, зокрема високу 
вартість підписки. Тому наявність якісного веб-представництва стає критично 
важливою для успішної кар’єри. 
Актуальність даної роботи полягає у створенні сучасного, 
функціонального сайту-портфоліо, який не лише демонструє творчі роботи 
фотографа, але й забезпечує зручний інструмент для комунікації з 
потенційними клієнтами та можливістю приймати замовлення від клієнтів. 
Метою даної роботи є розробити та реалізувати сучасний сайт-портфоліо 
фотографа з використанням фреймворку React, який забезпечує ефективну 
презентацію творчих робіт через галерею, зручну систему замовлення 
фотосесій, адаптивний дизайн та інтеграцію з соціальними мережами. 
Об’єкт дослідження – створення веб-сайту-портфоліо для професійного 
фотографа з використанням сучасних технологій. 
Завдання дослідження: 
1. Виконати аналіз існуючих рішень для портфоліо фотографів та 
визначити їх переваги та недоліки. 
2. Обґрунтувати вибір технологій для розробки. 
3. Спроектувати структуру та інтерфейс сайту. 
А рк. 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № Документа Підпис Дата  4 
 
4. Реалізувати основні компоненти сайту: галерею з модальним вікном, 
форму зворотного зв’язку з валідацією, замовлення фотосесій/послуг 
слайдер відгуків, сторінка з інформацією про фотографа. 
5. Інтегрувати зовнішні сервіси. 
6. Провести тестування розробленого сайту (функціональне, кросбраузерне, 
адаптивне, тощо). 
 
Предмет дослідження - технології та методи розробки інтерактивного 
сайту-портфоліо на базі фреймворку React з інтеграцією реляційної бази даних 
та зовнішніх сервісів (API). 
Під час виконання роботи були використані різні методи дослідження. 
Зокрема, застосовано аналіз і узагальнення наукових та інтернет-джерел для 
вивчення сучасних підходів до створення веб-сайтів і онлайн-портфоліо 
фотографів. Для реалізації функціоналу сайту були використані сучасні методи 
веб-програмування (фреймворк React, CSS, Node.js, реляційна база даних 
PostgeSQL та інші). Також була застосована [2] методологія Mobile-first 
дизайну для забезпечення адаптивності, а також методи функціонального та 
візуального тестування для перевірки працездатності сайту. 
Практичне значення - розроблений сайт-портфоліо може бути 
використаний професійними фотографами, як інструмент для презентації своїх 
робіт, залучення клієнтів та продаж своїх послуг. Також він може зацікавити 
фотостудії для демонстрації послуг потенційним клієнтам. Сайт має 
адаптивний дизайн, що забезпечує коректне відображення на всіх типах 
пристроїв, що забезпечує зручного ознайомлення з роботами фотографа. 
Особистим внеском автора є самостійно проведений аналіз предметної 
області та існуючих аналогів, розроблено архітектуру та дизайн сайту, 
реалізовано всі компоненти та сторінки додатка, виконано тестування та 
оптимізацію. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  5 
 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ 
 
1.1 Опис предметної області та актуальності сайту-портфоліо 
фотографа 
Сайт-портфоліо фотографа - це сучасний веб-додаток, призначений для 
якісної презентації найкращих світлин фотографа, які зроблені за певний час з 
певної тематики [3]. Головною метою будь-якого портфоліо є захопити увагу 
відвідувача з першого погляду і зацікавити його. Воно є візитною карткою 
через, яке замовники ознайомлюються зі стилем, досвідом, відгуками та 
вартістю послуг фотографа [5]. 
Тому предметну область можна структурувати так: 
• Демонстрація портфоліо через галерею з фільтрацією за категоріями 
(весілля, портрети, природа, події, тощо); 
• Інформаційні послуги (список послуг, опис форматів, тривалості, 
обмежень, вартості за категоріями); 
• Інструменти зв’язку та замовлення (форма зворотного зв’язку, 
замовлення фотосесії з вибором послуг, часовим діапазоном, 
додатковими послугами); 
• Додаткові сервіси (відгуки клієнтів, портфоліо відгуків, інтеграція з 
соціальними мережами, віджет погоди та інше). 
 
Актуальність розробки 
За даними досліджень, більшість клієнтів обирають фотографа за 
результатами, які бачать у пошукових системах, соціальних мережах та 
веб-портфоліо, що робить наявність власного сайту критично важливою для 
конкурентоспроможності [4]. При цьому лише небагато професійних 
фотографів мають власні веб-сайти, а решта використовують соціальні мережі, 
як основний інструмент для презентації робіт. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  6 
 
Створення власного сайту-портфоліо є актуальним завданням, що 
дозволяє: 
• Представити роботи та самого фотографа в найкращому вигляді; 
• Забезпечити зручну комунікацію з клієнтами; 
• Залучити нових клієнтів через SEO-оптимізацію; 
• Спростити та покращити процес прийому замовлень на фотосесію від 
клієнта; 
• Підвищити довіру до фотографа та його професійний імідж. 
 
1.2 Огляд та аналіз аналогів 
Для визначення оптимального підходу до розробки було проаналізовано 
4 популярні платформи та сервіси для створення та розміщення портфоліо 
фотографів: Wix, Squarespace, Zenfolio та Instagram. 
 
Wix 
Wix - це візуальний хмарний конструктор веб-сайтів, заснований у 2006 
році в Ізраїлі. Платформа дозволяє користувачам створювати сайти за 
допомогою технології перетягування елементів, не маючи навичок 
програмування [6]. Wix налічує понад 200 мільйонів користувачів у 190 країнах 
світу. Зображення цього візуальний конструктора наведено в рис. 1.1. 
 
 
Рис. 1.1 – Конструктор веб-сайтів Wix 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  7 
 
Переваги Wix: 
• Інтуїтивно зрозумілий редактор, що не потребує знання коду; 
• Велика кількість готових шаблонів (понад 800), у тому числі 
спеціалізовані для фотографів; 
• Велика бібліотека додатків та плагінів для розширення функціоналу; 
• Безкоштовний тарифний план з можливістю публікації сайту; 
• Вбудовані інструменти SEO-оптимізації та аналітики. 
Недоліки Wix: 
• Незважаючи на велику кількість налаштувань, Wix не дозволяє повністю 
контролювати код і реалізовувати складні або нестандартні функції. 
• Низька швидкість завантаження сторінок через надмірність коду; 
• На безкоштовному тарифі відображається вбудована реклама Wix; 
• Після вибору шаблону неможливо змінити його на інший без створення 
нового сайту; 
• Обмежені можливості експорту даних при переході на іншу платформу. 
 
Squarespace 
Squarespace - це веб-платформа, відома своїми дизайнерськими 
шаблонами, які добре підходять фотографам для демонстрації портфоліо з 
великою колекцією зображень, заснована у 2003 році [7]. Приклад роботи з цією 
веб-платформою наведено на рис. 1.2. 
 
 
Рис. 1.2 – Веб-платформа Squarespace 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  8 
 
Переваги Squarespace: 
• Високоякісні, професійні та дизайнерські шаблони; 
• Вбудована галерея з підтримкою високої роздільної здатності зображень; 
• Інтеграція з соціальними мережами; 
• Вбудовані інструменти для продажу цифрових та фізичних товарів; 
• Надійний хостинг з автоматичним резервним копіюванням. 
Недоліки Squarespace: 
• Висока вартість підписки; 
• Обмежені можливості дизайну; 
• Закритість вихідного коду, неможливість перенесення сайту на інший 
хостинг; 
• Складність інтеграції сторонніх сервісів. 
 
Zenfolio 
Zenfolio - це платформа, створена у 2005 році спеціально для професійних 
фотографів, що дозволяє створювати повноцінне портфоліо. Основний акцент 
Zenfolio зроблено на комерційній стороні фотографії: продаж фотографій, 
управління клієнтами та друк [8]. Зображення цієї платформи наведене на 
рисунку 1.3. 
 
 
Рис. 1.3 – Платформа Zenfolio 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  9 
 
Переваги Zenfolio: 
• Спеціалізовані інструменти для продажу фотографій (кошик, 
ціноутворення, знижки); 
• Інтеграція з професійними фотолабораторіями для друку фотографій; 
• Клієнтські галереї з парольним захистом та можливістю завантаження 
фото клієнтами; 
• Вбудований блог для публікації новин та статей; 
• SEO-оптимізація для кращого ранжування в пошукових системах. 
Недоліки Zenfolio: 
• Висока вартість підписки; 
• Складний інтерфейс для початківців; 
• Обмежені можливості дизайну порівняно з універсальними 
конструкторами; 
• Орієнтація переважно на професійних фотографів з великим портфоліо. 
 
Instagram 
Instagram – це соціальна мережа для обміну фотографіями та відео, 
заснована у 2010 році Кевіном Сістромом та Майком Крігером, придбана 
компанією Facebook (Meta) у 2012 році [9]. Незважаючи на те, що Instagram не 
є платформою для створення сайтів, багато фотографів використовують його як 
основний канал презентації своїх робіт. Приклад оформлення профіля в цій 
соціальні мережі наведений на рисунку 1.4. 
 
 
Рис. 1.4 – Профіль в соціальній мережі Instagram 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  10 
 
Переваги Instagram: 
• Безкоштовне використання; 
• Величезна аудиторія (понад 2 мільярди активних користувачів); 
• Прості інструменти для публікації та редагування фотографій; 
• Вбудовані механізми просування (хештеги, рекомендації, реклама); 
• Можливість прямого спілкування з клієнтами через коментарі та 
повідомлення. 
Недоліки Instagram: 
• Низька якість зображень через стиснення; 
• Обмеження на формат та розмір фотографій; 
• Відсутність інструментів для продажу фотографій або автоматизації 
замовлень; 
• Залежність від алгоритмів платформи (зменшення охоплення без платної 
реклами); 
• Неможливість створити професійне портфоліо з структурою та 
категоріями. 
 
Отже, універсальні конструктори (Wix, Squarespace) пропонують 
простоту використання, але мають обмежену гнучкість та високу вартість 
підписки [10]. Спеціалізована платформа Zenfolio надає професійні 
інструменти для фотографів, але також є платним та закритим для кастомізації. 
Соціальна мережа Instagram є безкоштовною, але не забезпечує належного 
рівня професіоналізму та не має інструментів для комерційної діяльності. 
Основні недоліки всіх розглянутих аналогів: 
• Закритість вихідного коду; 
• Обмежена функціональність без передплати; 
• Щомісячні платежі за використання; 
• Неможливість повного контролю над дизайном та функціоналом. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  11 
 
Оптимальним рішенням є створення власного сайту з використанням 
сучасних технологій, що дозволить: 
• Мати повний контроль над дизайном та функціоналом; 
• Уникнути щомісячних платежів за використання платформи; 
• Забезпечити високу швидкість роботи; 
• Інтегрувати необхідні сервіси без обмежень; 
• Володіти всіма правами на код та дані. 
 
1.3 Аналіз сайтів-портфоліо фотографів 
Після розгляду універсальних платформ доцільно проаналізувати сайти-
портфоліо, які вже використовуються професійними фотографами. Це 
дозволить виявити сильні сторони реальних рішень та врахувати їх при власній 
розробці. Для аналізу було обрано два сайти фотографів з Києва. 
 
Сайт Альони Перепелиці  
Сайт професійного фотографа Альони Перепелиці є прикладом 
структурованого та інформативного портфоліо (рисунок 1.5). Головна сторінка 
містить розгорнутий перелік послуг (портретна фотосесія, весільна фотосесія, 
сімейна, бізнес-фотосесії, тощо), кожна з яких має окрему сторінку з детальним 
описом [3]. Сайт також містить блог із корисними статтями.  
 
 
Рис. 1.5 – Сайт професійного фотографа з Києва 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  12 
 
Переваги сайту: 
• Чітка структура та логічна навігація; 
• Детальний опис кожної послуги на окремій сторінці; 
• Наявність блогу з корисними статтями для клієнтів; 
• Покрокове пояснення етапів роботи (8 кроків); 
• Адаптивний дизайн; 
• Наявність форми зворотного зв’язку та кількох способів зв’язку 
(месенджери, телефон, email). 
Недоліки сайту: 
• Відсутність онлайн-замовлення послуг безпосередньо на сайті (лише 
консультація); 
• Відсутня можливість перегляду портфоліо у вигляді великої галереї з 
категоріями; 
• Відсутність позначення місце розташування студії на карті; 
 
Сайт фотографа Аліни Маліни  
Цей сайт вирізняється візуальним підходом до презентації портфоліо. 
Головна сторінка містить великі якісні світлини та коротку інформацію про 
фотографа [30]. Сайт виконаний у мінімалістичному стилі, а всі роботи зібрані 
в зручній галереї з можливістю перегляду у збільшеному вигляді (рисунок 
1.6). Навігація проста та зрозуміла. 
 
 
Рис. 1.6 – Сайт професійного фотографа Аліни Маліни з Черкас 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  13 
 
Переваги сайту: 
• Сучасний мінімалістичний дизайн; 
• Якісні великі фотографії в портфоліо; 
• Проста та зрозуміла навігація; 
• Адаптивна верстка; 
• Наявність окремого розділу з відгуками клієнтів. 
Недоліки сайту: 
• Немає інтеграції з соціальними мережами у вигляді іконок або кнопок; 
• Відсутність блогу або корисних статей для клієнтів; 
• Відсутність можливості онлайн-замовлення послуг; 
Розглянуті сайти представляють два різних підходи до створення 
портфоліо фотографа. Сайт Альони Перепелиці робить акцент на 
інформативності: детальний опис послуг, покрокові інструкції, блог. Сайт 
фотографа Маліни робить акцент на візуальній складовій: великі якісні фото, 
мінімалістичний дизайн, зручна галерея. 
Спільні недоліки обох сайтів: 
• Відсутність можливості онлайн-замовлення послуг безпосередньо на 
сайті; 
• Відсутність інтерактивних елементів (карти, віджета погоди); 
• Відсутність інтеграції з платіжними системами; 
• Відсутність кошика замовлень. 
 
Отже, створення власного сайту-портфоліо з розширеним функціоналом, 
зокрема можливістю онлайн-замовлення, інтеграцією з базами даних та 
зовнішніми API, є актуальним та перспективним завданням.  
Розроблений сайт має поєднувати кращі сторони розглянутих аналогів 
(якісна галерея, детальний опис послуг, адаптивний дизайн, відгуки клієнтів) та 
усувати їх недоліки (відсутність онлайн-замовлення, інтерактивних сервісів). 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  14 
 
1.4 Вибір технологій розробки 
Для реалізації сайту-портфоліо було розглянуто три найпопулярніші 
JavaScript-фреймворки: React, Vue.js та Angular. 
React - це JavaScript-бібліотека з відкритим вихідним кодом для 
створення користувацьких інтерфейсів, розроблена компанією Facebook у 2013 
році [11]. Є найпопулярнішою бібліотекою для створення інтерфейсів.  
Переваги React: 
• Велика екосистема та спільнота; 
• Висока продуктивність завдяки Virtual DOM; 
• Компонентний підхід до розробки; 
• Можливість використання JSX. 
Vue.js - це прогресивний JavaScript-фреймворк для створення 
користувацьких інтерфейсів, створений Еваном Ю у 2014 році [12]. Vue 
поєднує переваги React та Angular, пропонуючи простий та гнучкий підхід до 
розробки. 
Переваги Vue: 
• Низький поріг входження; 
• Гнучкість та простота; 
• Зростаюча популярність. 
Angular - це платформа та фреймворк для створення клієнтських додатків, 
розроблений компанією Google у 2010 році [13]. 
Переваги Angular: 
• Є повноцінним MVC-фреймворк; 
• Використовує TypeScript, як основну мову програмування; 
• Висока надійність. 
Для даного проекту було обрано React з наступних причин: 
• Найбільша популярність серед розробників (згідно з опитуванням Stack 
Overflow 2025, React використовують 42% розробників) [14]; 
• Велика кількість готових компонентів та бібліотек; 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  15 
 
• Висока продуктивність, що є критичним показником для галереї 
зображень. 
Для реалізації бекенд частини було обрано Node.js та Express.js. 
Node.js - це програмна платформа, заснована на рушіїї V8 (який 
використовується в Google Chrome), що перетворює JavaScript з мови для 
браузера на мову загального призначення [15]. Node.js дозволяє виконувати 
JavaScript-код на сервері. 
Express.js - це мінімалістичний та гнучкий веб-фреймворк для Node.js, 
який надає широкий набір функцій для створення веб-додатків та API [16]. Він 
спрощує маршрутизацію, обробку запитів та відповідей. 
Додатково будуть використані: 
• React Router - це бібліотека для маршрутизації, яка використовується для 
навігації між сторінками без перезавантаження браузера; 
• CSS Modules - підхід до організації CSS-коду, який автоматично робить 
усі класи та анімації локальними за замовчуванням. 
• Vercel - це хмарна платформа для хостингу та розгортання веб-додатків, 
яка підтримує автоматичне розгортання з Git-репозиторіїв [17]. 
 
Вибір бази даних 
Для зберігання даних розроблюваного сайту-портфоліо (замовлень 
клієнтів, контактних форм, даних про послуги) було обрано PostgreSQL.  
PostgreSQL - це об’єктно-реляційна система управління базами даних з 
відкритим вихідним кодом, яка вийшла в 1986 році. PostgreSQL підтримує 
розширену функціональність SQL, включаючи складні запити, транзакції, 
зовнішні ключі, тригери, представлення та збережені процедури [18].  
Вибір цієї бази даних обґрунтовується наступними перевагами: 
• Висока надійність; 
• Потужна підтримка складних запитів та зв’язків між таблицями; 
• Безкоштовна ліцензія з відкритим кодом; 
• Масштабованість та висока продуктивність; 
А рк. 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № Документа Підпис Дата  16 
 
• Підтримка JSON-даних поряд з реляційними таблицями; 
• Велика спільнота та документація. 
 
1.5 Постановка задачі 
Аналіз предметної області, огляд аналогів та вибір технологій дозволили 
сформулювати наступні задачі, які необхідно вирішити. 
Основні задачі розробки сайту-портфоліо фотографа: 
1. Розробити архітектуру та структуру сайту - створити логічну та 
фізичну структуру, розробити діаграми прецедентів. 
2. Спроектувати інтерфейс користувача - створити макети всіх сторінок, 
забезпечити єдиний фірмовий стиль, адаптивну верстку для мобільних 
пристроїв та планшетів. 
3. Реалізувати фронтенд-частину - розробити компоненти: галерею з 
модальним вікном, форму зворотного зв’язку з валідацією, слайдер 
відгуків, віджет погоди, інтерактивну карту. 
4. Розробити бекенд-частину та базу даних - створити REST API з 
використаннням Node.js + Express, спроектувати схему бази даних 
PostgreSQL, реалізувати таблиці для зберігання замовлень, контактних 
форм та послуг. 
5. Інтегрувати зовнішні сервіси – підключити Google Maps API, 
OpenWeatherMap API, YouTube API та Email-сервіс для сповіщень [26]. 
6. Додати комерційний функціонал – реалізувати кошик замовлень, 
систему формування цін, каталог послуг. 
7. Провести тестування - виконати функціональне, кросбраузерне та 
адаптивне тестування. 
8. Розгорнути сайт - розмістити готовий додаток на хостингу (Vercel) та 
забезпечити доступ до нього в мережі Інтернет. 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  17 
 
Очікувані результати: 
• Повністю функціональний веб-сайт-портфоліо, доступний в мережі 
Інтернет; 
• Вихідний код проекту, розміщений у репозиторії GitHub; 
Критерії успішного виконання роботи: 
• Відповідність розробленого сайту всім функціональним та 
нефункціональним вимогам; 
• Успішне проходження тестування в актуальних браузерах та на різних 
пристроях. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  18 
 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 
 
2.1 Призначення та основні функції системи 
2.1.1 Мета та завдання сайту-портфоліо 
Розроблюваний сайт-портфоліо фотографа - призначений для презентації 
творчих робіт, залучення клієнтів та автоматизації процесу замовлення 
фотосесій. Основним завданням системи є створення сучасного, естетичного та 
функціонального веб-представництва, яке відповідає потребам професійного 
фотографа та його клієнтів. Тому сайт повинен відповідати очікуванням 
користувача з першої ж секунди - інакше він піде [19]. Також веб-сайт має не 
лише демонструвати портфоліо, але й викликати довіру, демонструвати 
професіоналізм та сприяти залученню нових замовлень. Для цього він поєднує 
естетичний дизайн із зручною навігацією та наявністю всіх необхідних для 
клієнта розділів: портфоліо, перелік послуг, інформація про фотографа, 
контакти та форма для зворотного зв’язку. 
 
2.1.2 Цільова аудиторія 
Сайт орієнтований на дві основні категорії користувачів.  
Перша категорія - це потенційні клієнти, тобто особи, які шукають 
фотографа для весілля, портретної зйомки або інших подій. Понад 76% цих 
відвідувачів насамперед шукають ціни на послуги, приклади виконаних робіт 
та хочуть дізнатися, як зв’язатись з фотографом. [20]. Для цієї аудиторії 
критично важливі якість та різноманітність фотографій у портфоліо, зрозуміла 
структура цін та простота комунікації.  
Друга категорія - це фотограф (адміністратор), тобто власник сайту, який 
керує контентом, обробляє замовлення та відповідає на повідомлення клієнтів. 
Для нього важлива можливість легкого оновлення портфоліо, отримання 
сповіщень про нові замовлення та повідомлення з контактної форми, а також 
зручне адміністрування сайту без необхідності глибоких технічних знань 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  19 
 
2.1.3 Основні функції системи 
Система забезпечує виконання наступних функцій: 
• Перегляд галереї робіт з фільтрацією за категоріями (весілля, портрети, 
події); 
• Перегляд інформації про фотографа та його послуги; 
• Заповнення контактної форми для зворотного зв’язку; 
• Оформлення замовлення через кошик послуг; 
• Інтеграція з Google Maps для відображення місця фотостудії; 
• Відображення погоди через OpenWeatherMap API; 
• Адміністрування контенту (додавання/редагування/видалення 
фотографій та послуг). 
 
2.2 Вимоги до системи 
Функціональні вимоги 
Функціональні вимоги визначають, які саме можливості повинен 
надавати сайт користувачам. Вони описують, що система повинна робити, тоді 
як нефункціональні - з якою якістю вона це робить [21]. 
Функціональні вимоги до розроблюваного сайту-портфоліо фотографа: 
• Галерея: відображення фотографій з можливістю перегляду у 
повноекранному режимі (модальне вікно), фільтрація за категоріями. 
Користувач має мати змогу швидко переглядати всі роботи або 
відфільтрувати їх  наприклад, для перегляду лише весільних фото. 
• Форма зворотного зв’язку: збір інформації від клієнтів (ім’я, email, 
телефон, повідомлення) з валідацією введених даних. Форма повинна 
перевіряти коректність email, заповненість обов’язкових полів та 
сповіщати користувача про помилки. 
• Кошик замовлень: можливість додавати послуги, змінювати кількість, 
видаляти та оформлювати замовлення. Модуль кошика має накопичувати 
вибрані послуги та коректно розраховувати загальну вартість. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  20 
 
• Інтеграція з API: підключення Google Maps для карти та 
OpenWeatherMap для віджета погоди. Карта допоможе клієнту оцінити 
місцезнаходження фотографа, а віджет погоди - спланувати зйомку на 
відкритому повітрі. 
• Адаптивність: коректне відображення на всіх типах пристроїв (мобільні 
телефони, планшети, ПК, тощо). Сайт повинен зберігати читабельність та 
зручність незалежно від розміру екрану. 
 
Нефункціональні вимоги 
Нефункціональні вимоги – це критерії якісної роботи системи: 
• Продуктивність: сторінки мають завантажуватись не довше 2 секунд. За 
даними дослідження Google та SOASTA «The Need for Mobile Speed», 
53% користувачів мобільних пристроїв залишають сайт, якщо його 
завантаження триває більше 3 секунд [21]. Швидке завантаження 
забезпечить позитивний користувацький досвід та покращить позиції 
сайту в пошукових системах. 
• Надійність: час безвідмовної роботи - не менше 99,5%. Коректна обробка 
помилок API. Система повинна бути доступною для користувачів майже 
весь час, а у випадку збою того чи іншого API (наприклад, погоди) - 
виводити інформативне повідомлення. 
• Безпека: захист даних протоколом HTTPS. Також валідація форми на 
стороні клієнта є обов’язковим мінімумом для будь-якого веб-застосунку, 
що збирає персональні дані [22]. 
• Сумісність: кросбраузерна сумісність (Chrome, Firefox, Safari, Edge, 
Opera - останні 2 версії). 
• Локалізація: інтерфейс українською мовою. 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  21 
 
2.3 Вимоги до дизайну, інтерфейсу та навігації 
2.3.1 Єдиний фірмовий стиль 
Інтерфейс сайту має бути виконаний в єдиному фірмовому стилі, що 
включає: 
• Кольорова гама: основними кольорами є білий (#FFFFFF) для фонових 
елементів, темно-синій (#2C3E50) для кнопок та основних заголовків, а 
також блакитний (#3498DB). Така гама асоціюється з чистотою, 
професіоналізмом та надійністю, що відповідає іміджу професійного 
фотографа. Адже колір у дизайні - це інструмент комунікації, що формує 
відчуття ще до прочитання тексту [23]. 
• Шрифти: для основного тексту використовується шрифт «Open Sans», 
який забезпечує легку читабельність на екранах. Для заголовків та 
акцентних написів застосовано шрифт «Playfair Display», що додає сайту 
елегантності. Обидва шрифти підключено через бібліотеку Google Fonts 
[24]. 
• Логотип: логотип у вигляді стилізованої назви або графічного символу 
розміщується у верхньому лівому куті кожної сторінки, забезпечуючи 
впізнаваність фотографа. 
 
2.3.2 Адаптивний дизайн 
Дизайн має бути реалізований за принципом Mobile-first. Тому 
опираючись, на це було сформовано вимоги до адаптивного дизайну: 
• Коректне відображення на екранах з роздільною здатністю від 320px до 
1920px; 
• flexbox/grid для адаптації розмірів елементів; 
• Медіа-запити для різних типів пристроїв. 
Також інтерфейс повинен бути інтуїтивно зрозумілим, а саме: 
• Кількість кліків для переходу з головної сторінки до будь-якого розділу - 
не більше 2; 
• Навігаційне меню доступне на всіх сторінках; 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  22 
 
• Кнопки і посилання мають візуальний зворотний зв’язок. 
 
2.3.3 Вимоги до навігації 
• Тип меню: верхнє горизонтальне меню, фіксоване при прокручуванні. Це 
дозволяє користувачеві в будь-який момент швидко перейти до іншого 
розділу без необхідності повертатися вгору сторінки. 
• Переходи між сторінками: плавні переходи без перезавантаження 
сторінки за допомогою React Router.  
• Логотип та фавіконка: наявність логотипу в шапці сайту та фавіконки 
на вкладці браузера. Фавіконка, як правило, є зменшеною копією 
логотипу або його частиною, що сприяє впізнаваності сайту серед 
багатьох відкритих вкладок. 
 
2.4 Структура сервера, сторінок та архітектура системи 
2.4.1 Логічна структура сайту 
Сайт складається з 5 основних сторінок. В таблиці 2.1. наведено дані щодо 
сторінок сайту. 
 
Таблиця 2.1 Логічна структура сайту 
Сторінка URL Призначення 
Головна / Привітання, коротка інформація, галерея, 
віджет погоди 
Портфоліо /portfolio Галерея робіт з фільтрацією за категоріями 
Послуги /services Перелік послуг з цінами, кошик замовлень 
Про автора /about Інформація про фотографа, досвід, контакти 
Контакти /contact Форма зворотного зв’язку, Google Maps 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  23 
 
2.4.2 Фізична структура проекту 
Організація файлів та папок проекту поділена на дві папки backend і 
frontend (показано на рис. 2.1 – рис. 2.4). 
 
 
Рис. 2.1 – Структура папки backend 
 
 
Рис. 2.2 – Структура папки frontend 
А рк. 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № Документа Підпис Дата  24 
 
 
Рис. 2.3 – Структура папки frontend 
 
 
Рис. 2.4 - Структура папки frontend 
 
 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  25 
 
2.4.3 Архітектура системи 
1. Frontend частина (React): формує інтерфейс застосунку, забезпечує 
навігацію між сторінками, опрацьовує дії користувача та надсилає запити 
до API серверної частини. 
2. Backend частина (Node.js + Express): обробляє запити від фронтенду, 
реалізує бізнес-логіку (створення замовлення, збереження повідомлення) 
та взаємодіє з базою даних. 
3. База даних (PostgreSQL): реляційна база даних, яка зберігає інформацію 
про замовлення, контакти та послуги. 
Взаємодія між компонентами здійснюється через REST API. Адже, REST 
– це архітектурний стиль, що забезпечує масштабованість та незалежність 
клієнта від сервера [25]. Frontend надсилає HTTP-запити (GET, POST, PUT, 
DELETE) до відповідних маршрутів бекенду. Backend виконує необхідні 
операції з базою даних та повертає відповідь у форматі JSON. 
 
2.5 Вимоги до контенту та адміністрування 
2.5.1 Типи контенту та вимоги до якості 
• Текст: вся текстова інформація (описи послуг, біографія) має бути 
написана грамотною українською мовою, без орфографічних та 
пунктуаційних помилок. 
• Зображення: для демонстрації робіт використовуються зображення 
високої якості (формати JPEG, PNG, тощо), що забезпечує баланс між 
якістю та швидкістю завантаження. 
• Відео: можливість вбудовування відео з зовнішніх хостингів (YouTube). 
 
2.5.2 Наповнення сторінок 
• Портфоліо: не менше 9 фотографій, розподілених за чотирма категоріями 
(весілля, портрети, природа, події). 
• Послуги: деталізований перелік фотопослуг, кожна з яких містить назву, 
опис, перелік характеристик та ціну. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  26 
 
• Про автора: професійна фотографія автора (аватар), розгорнута 
біографія та опис досвіду роботи. 
 
2.5.3 Вимоги до адміністрування 
• Керування галереєю: наявність інтуїтивно зрозумілого способу для 
додавання, редагування метаданих та видалення фотографій з галереї. 
• Обробка замовлень: можливість перегляду списку замовлень з 
можливістю зміни їх статусу (новий, в роботі, виконано). 
• Перегляд повідомлень: доступ до всіх повідомлень, надісланих через 
контактну форму. 
 
2.6 Вимоги до хостингу  
Вимоги до хостингу: 
• Надійність: час безвідмовної роботи - не менше 99,5%. 
• Безпека: хостинг повинен підтримувати HTTPS для захисту даних під час 
їх передачі між клієнтом і сервером. 
Для розгортання сайту обрано платформу Vercel.  
Переваги: 
• Безкоштовний план для некомерційних проектів; 
• Автоматичне розгортання з Git-репозиторію (GitHub) при кожному 
новому коміті, що спрощує процес оновлення; 
• Простота налаштування та зрозумілий інтерфейс. 
 
2.7 Структура сайту, UI/UX, навігація та діаграма прецедентів 
Розробка зручного та інтуїтивно зрозумілого інтерфейсу є ключовим 
фактором успіху веб-сайту. Для сайту-портфоліо фотографа, де головним є 
візуальний контент, UX/UI (User Experience/User Interface) відіграє особливу 
роль, оскільки безпосередньо впливає на сприйняття робіт фотографа та 
прийняття рішення клієнтом про співпрацю. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  27 
 
Загальна структура сайту 
Сайт буде мати логічну дворівневу структуру, яка дозволяє користувачеві 
швидко знайти необхідну інформацію за 1-2 кліки.  
Основними розділами є: 
• Головна сторінка – виконує роль «візитної картки», містить привітання, 
головний візуальний елемент, коротку інформацію про фотографа, 
анонси вибраних робіт та відгуків. 
• Портфоліо – основна сторінка для демонстрації робіт. Забезпечує 
відображення фотографій у вигляді сітки з можливістю фільтрації за 
категоріями (весілля, портрети, природа, події). При натисканні на 
зображення відкривається модальне вікно з повнорозмірною версією та 
описом фото. 
• Послуги – містить каталог послуг з цінами, описом та характеристиками. 
Для замовлення буде реалізований функціонал кошика. 
• Про автора – інформаційна сторінка, яка формує довіру через біографію 
та досвід роботи. 
• Контакти – містить контактну інформацію (телефон, email, адреса), 
форму зворотного зв’язку та інтерактивну карту Google Maps. 
Така структура забезпечує логічний та передбачуваний маршрут 
користувача: від першого знайомства через візуальне портфоліо до вивчення 
послуг та фінальної комунікації. 
 
Принципи UX дизайну 
При проєктуванні сайту враховувалися наступні принципи для 
забезпечення позитивного досвіду користувача: 
• Мінімізація кількості кліків – до будь-якого ключового розділу можна 
дійти з головної сторінки за один клік через головне меню. 
• Інтуїтивність – навігація є стандартною для веб-сайтів, що не вимагає 
від користувача спеціальних навичок. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  28 
 
• Зворотний зв'язок – усі інтерактивні елементи мають візуальний 
зворотний зв’язок при наведенні. При відправці форми або додаванні 
товару до кошика користувач отримує чітке повідомлення про успіх або 
помилку. 
• Адаптивність – сайт забезпечує коректне відображення та зручність 
використання на будь-яких пристроях 
 
Вимоги до UI та навігації 
Інтерфейс сайту має бути не лише зручним, але й естетичним, формуючи 
позитивне враження про фотографа. 
• Тип меню – горизонтальне, фіксоване у верхній частині сторінки. Це 
дозволяє користувачеві в будь-який момент перейти до іншого розділу, 
не прокручуючи сторінку вгору. 
• Логотип та фавіконка – логотип розміщений у верхньому лівому куті та 
є клікабельним, ведучи на головну сторінку. Фавіконка  сприяє легкому 
візуальному пошуку сайту серед багатьох відкритих вкладок. 
• Фільтрація – на сторінці портфоліо буде фільтрацію за категоріями, що 
значно полегшує пошук релевантних робіт для клієнта. 
• Модальне вікно – перегляд фотографій у збільшеному вигляді 
відбуватиметься в модальному вікні, що не вимагає переходу на окрему 
сторінку та забезпечує приємний досвід перегляду. 
• Форма зворотного зв’язку – м атиме мінімальну кількість полів, 
чіткі підписи та валідацію для запобігання помилок. Успішна відправка 
підтверджується спливаючим повідомленням. 
 
Діаграма прецедентів 
Для візуалізації взаємодії користувачів із сайтом-портфоліо розроблено 
діаграму прецедентів, яка наведена на рисунку 2.5. Вона відображає двох 
основних акторів: «Клієнт» та «Фотограф», а також прецеденти (функції), які 
кожен із них може виконувати. 
А рк. 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № Документа Підпис Дата  29 
 
 
Рис. 2.5 – Діаграма прецедентів сайту-портфоліо фотографа 
 
Така візуалізація дозволяє швидко зрозуміти структуру прав та основних 
функцій системи, що є важливою частиною опису UX/UI. 
 
Схема користувацького шляху 
Типовий шлях користувача сайтом виглядає наступним чином: 
1. Відвідувач потрапляє на Головну сторінку. 
2. Переходить у розділ Портфоліо, використовує фільтри для перегляду 
фото в бажаній категорії та відкриває окремі роботи в модальному вікні. 
3. Переходить до розділу Послуги, ознайомлюється з цінами, додає обрані 
послуги до кошика. 
4. Натискає кнопку «Оформити замовлення», заповнює форму з 
контактними даними та підтверджує замовлення. 
5. Для додаткових питань переходить на сторінку Контакти, надсилає запит 
через форму або знаходить контакти для зв’язку. 
Таким чином, структура та UI/UX-рішення сайту забезпечують 
інтуїтивно зрозумілий, швидкий та приємний процес знайомства з роботами 
фотографа та оформлення замовлення, що є ключем до чудової взаємодії з 
потенційними клієнтами. 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  30 
 
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ САЙТУ 
 
3.1 Обґрунтування вибору засобів реалізації 
Для створення сайту-портфоліо фотографа були обрані сучасні 
технології, що забезпечує високу продуктивність, зручність розробки та 
можливість подальшого масштабування. 
 
3.1.1 Середовище розробки та фреймворк для frontend-частини  
Основним інструментом для написання коду обрано Visual Studio Code 
(VS Code) - безкоштовний, легкий та функціональний редактор коду від 
компанії Microsoft. VS Code підтримує велику кількість розширень, інтеграцію 
з Git, підсвітку синтаксису, JSX та інші технології, що використовуються в 
проєкті [26]. Для контролю версій використовується система Git, а для 
віддаленого зберігання коду - платформа GitHub [27]. Це дозволяє відстежувати 
зміни, повертатися до попередніх версій та спрощує процес деплою на хостинг. 
Для розробки клієнтської частини обрано бібліотеку React. Як 
зазначалося в розділі 1, React є найпопулярнішою бібліотекою для створення 
інтерфейсів, має велику екосистему та високу продуктивність, завдяки 
використанню віртуального DOM. Для маршрутизації між сторінками 
використовується React Router - найпопулярніша бібліотека для навігації та 
маршрутизації у програмах, створених на React. 
 
3.1.2 Технології для backend та база даних  
Бекенд частина реалізована за допомогою Node.js та фреймворку 
Express.js. Node.js усуває необхідність перемикатись між мовами – JavaScript 
застосовується як на клієнті, так і на сервері. Express.js спрощує створення 
REST API, обробку маршрутів та роботу з HTTP-запитами. Такий підхід є 
стандартним для сучасних веб-додатків. 
Для зберігання інформації про замовлення та контакти обрано реляційну 
базу даних PostgreSQL. PostgreSQL – це надійна та безкоштовна СУБД з 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  31 
 
відкритим кодом, яка підтримує складні запити та транзакції. Для хостингу бази 
даних використовується сервіс Neon – хмарна база даних, що пропонує 
безкоштовний тариф та просту інтеграцію з хостинг Vercel [29]. Перевагами 
Neon є автоматичне масштабування, створення резервних копій та зручний веб-
інтерфейс для роботи з даними. 
 
3.1.3 Хостинг та деплой  
Для розгортання сайту обрано платформу Vercel. Цей хостинг пропонує 
безкоштовний план для некомерційних проектів, автоматичне розгортання з 
GitHub та вбудований CDN для швидкої доставки статичних файлів. Крім того, 
Vercel автоматично надає SSL-сертифікати, що забезпечує безпечне HTTPS-
з’єднання. 
Таким чином, обрані технології (React + Node.js + PostgreSQL + Vercel) є 
сучасними, надійними та оптимальними для реалізації поставленої задачі. 
 
3.2 Архітектура та структура проекту 
Сайт-портфоліо побудовано за архітектурою «клієнт-сервер-база даних», 
що є стандартним підходом для веб-додатків. 
Загальна архітектура системи: 
• Frontend (React) - реалізує відображення інтерфейсу, навігацію між 
сторінками, обробку користувацьких дій та комунікацію з бекендом через 
HTTP-запити. 
• Backend (Node.js + Express) - обробляє запити від фронтенду, реалізує 
бізнес-логіку (збереження повідомлень, створення замовлень) та 
взаємодіє з базою даних. 
• База даних (PostgreSQL) - зберігає інформацію про замовлення, контактні 
повідомлення та інші дані. 
Взаємодія між компонентами здійснюється через REST API. Фронтенд 
надсилає HTTP-запити до відповідних маршрутів бекенду, а бекенд виконує 
операції з базою даних та повертає відповідь у форматі JSON. 
А рк. 
ЧДТУ 262208.008 ПЗ 
Змн. Арк. № Документа Підпис Дата  32 
 
3.2.1 Фізична структура проекту та робота з API 
Проект організовано так, що фронтенд та бекенд знаходиться в одному 
репозиторії, але в окремих папках. 
Така організація дозволяє окремо розробляти та налаштовувати кожну 
частину проекту, але при цьому зберігає їх разом для зручності. 
Основні маршрути API дивитись в табл. 3.1. 
 
Таблиця 3.1 Маршрути API 
Маршрут Метод Призначення 
/api/health GET Перевірка стану сервера 
/api/contacts GET Отримання списку 
контактних повідомлень 
/api/contacts POST Збереження нового 
повідомлення з форми 
/api/orders GET Отримання списку 
замовлень 
/api/orders POST Створення нового 
замовлення 
 
Фронтенд використовує бібліотеку Axios для виконання HTTP-запитів. 
Наприклад, для відправки даних контактної форми виконується POST-запит 
на /api/contacts з тілом запиту, що містить ім’я, email, номер телефону та 
повідомлення. 
 
3.3 Реалізація фронтенд-частини 
Розробка фронтенду почалася зі створення базової структури проекту. 
Було вручну створено папки public та src, налаштовано файл package.json із 
необхідними залежностями (React, React Router, та іншими). Для збірки проекту 
використовувався стандартний інструментарій React. Такий підхід дозволив 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  33 
 
отримати повний контроль над структурою проекту та уникнути зайвих 
залежностей. 
 
3.3.1 Реалізація маршрутизації та навігації 
Для маршрутизації між сторінками використовується бібліотека React 
Router. У головному файлі App.js визначено маршрути для кожної сторінки 
сайту. Нижче буде наведено фрагмент коду файлу App.js 
 
import { Routes, Route } from 'react-router-dom'; 
import Header from './components/Header/Header'; 
import Footer from './components/Footer/Footer'; 
import Home from './pages/Home/Home'; 
import Portfolio from './pages/Portfolio/Portfolio'; 
import Services from './pages/Services/Services'; 
import Partners from './pages/Partners/Partners'; 
import About from './pages/About/About'; 
import Contact from './pages/Contact/Contact'; 
import './App.css'; 
 
function App() { 
  return ( 
    <div className="app"> 
      <Header /> 
      <main className="main-content"> 
        <Routes> 
          <Route path="/" element={<Home />} /> 
          <Route path="/portfolio" element={<Portfolio />} /> 
          <Route path="/services" element={<Services />} /> 
          <Route path="/partners" element={<Partners />} /> 
          <Route path="/about" element={<About />} /> 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  34 
 
          <Route path="/contact" element={<Contact />} /> 
        </Routes> 
      </main> 
      <Footer /> 
    </div> 
  ); 
} 
 
export default App; 
Компонент Header містить навігаційне меню з посиланнями на всі 
сторінки, реалізоване за допомогою компонента Link з React Router. Це 
забезпечує плавні переходи між сторінками без перезавантаження браузера. 
 
3.3.2 Розробка компонентів інтерфейсу 
Компонент Gallery (галерея). Галерея є ключовим компонентом для 
демонстрації робіт фотографа. Вона відображає сітку зображень та підтримує 
фільтрацію за категоріями, яка реалізована через пропс activeFilter. Якщо 
значення фільтра - all, відображаються всі світлини, інакше - лише ті, що 
належать до обраної категорії (weddings, portraits, тощо). При кліку на 
зображення відкривається модальне вікно з повнорозмірним фото, детальним 
описом та датою створення. 
Фрагмент програмного коду компонента Gallery (файл Gallery.jsx): 
 
function Gallery({ activeFilter = 'all' }) { 
  const [selectedImage, setSelectedImage] = useState(null); 
  // Фільтрування елементів галереї 
  const filteredItems = activeFilter === 'all'  
    ? galleryItems  
    : galleryItems.filter(item => item.category === activeFilter); 
  const openModal = (image) => { 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  35 
 
    setSelectedImage(image); 
    document.body.style.overflow = 'hidden'; 
  }; 
  const closeModal = () => { 
    setSelectedImage(null); 
    document.body.style.overflow = 'auto'; 
  }; 
  return ( 
    <section className="gallery-section"> 
      <h2 className="section-title">Наша Галерея</h2> 
      <div className="gallery-grid"> 
        {filteredItems.map((item) => ( 
          <div  
            key={item.id} 
            className="gallery-item" 
            onClick={() => openModal(item)} 
          > 
            <img  
              src={item.thumbnail}  
              alt={item.title}  
              loading="lazy" 
            /> 
            <div className="overlay"> 
              <h3>{item.title}</h3> 
            </div> 
          </div> 
        ))} 
      </div> 
      {selectedImage && ( 
        <div className="modal" onClick={closeModal}> 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  36 
 
          <div className="modal-content" onClick={(e) => e.stopPropagation()}> 
            <button className="close-btn" onClick={closeModal}>&times;</button> 
            <img  
              src={selectedImage.full}  
              alt={selectedImage.title}  
              className="modal-image" 
            /> 
            <div className="image-info"> 
              <h3>{selectedImage.title}</h3> 
              <p>{selectedImage.description}</p> 
              <p className="date">{selectedImage.date}</p> 
            </div> 
          </div> 
        </div> 
      )} 
    </section> 
  ); 
} 
 
Компонент ContactForm (форма зворотного зв’язку). Форма збирає 
ім’я, email, телефон та повідомлення від клієнта. Вона включає валідацію на 
стороні клієнта: перевіряється правильність заповнення обов’язкових полів та 
коректність email. Після успішної відправки форма очищується, а користувач 
бачить повідомлення про успішне надсилання. 
Компонент TestimonialSlider (слайдер відгуків). Компонент 
відображає відгуки клієнтів у вигляді каруселі. Він автоматично перемикає 
слайди кожні 5 секунд, а також підтримує ручне перемикання за допомогою 
кнопок «вперед» та «назад». 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  37 
 
Компонент WeatherWidget (віджет погоди). Віджет погоди 
інтегрується з OpenWeatherMap API для відображення поточної погоди в 
обраному місті. Компонент використовує fetch для отримання даних та 
відображає температуру, вологість, швидкість вітру та іконки погодних умов. 
 
3.3.3. Розробка сторінок 
Сайт має п’ять сторінок, кожна з яких реалізована у вигляді окремого 
компонента в папці pages. 
Головна сторінка (рис. 3.1 – рис. 3.4) - містить привітальний блок з 
закликом до дії, блок «Ласкаво просимо» з описом досвіду фотографа, блок 
«Вибрані роботи» (прев’ю галереї), слайдер відгуків клієнтів та віджет погоди.  
 
 
Рис. 3.1 - Головна сторінка сайту-портфоліо 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  38 
 
 
Рис. 3.2 - Головна сторінка сайту-портфоліо (продовження) 
 
 
Рис. 3.3 - Головна сторінка сайту-портфоліо (продовження) 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  39 
 
 
Рис. 3.4 - Головна сторінка сайту-портфоліо (продовження) 
 
Сторінка портфоліо -  відображає галерею всіх робіт з можливістю 
фільтрації за категоріями (весілля, портрети, природа, події). Фільтрація 
реалізована за допомогою стану activeFilter, який змінює масив зображень, що 
відображаються. Зовнішній вигляд сторінки портфоліо наведено на рисунках 
3.5 – 3.8. 
 
Рис. 3.5 - Сторінка портфоліо з фільтрацією 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  40 
 
 
Рис. 3.6 - Сторінка портфоліо з фільтрацією (продовження) 
 
 
Рис. 3.7 - Приклад роботи фільтрації по категоріям 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  41 
 
 
Рис. 3.8 - Відкриття модального вікна з повнорозмірним фото 
 
Сторінка послуг -  надає перелік фотопослуг з цінами, детальним описом 
та характеристиками. Користувач може додавати послуги до кошика, 
змінювати кількість та оформлювати замовлення. Стан кошика зберігається в 
localStorage, тому він не зникає після перезавантаження сторінки. Також 
інформація про оформлення замовлення з форми передається в базу даних. 
Зовнішній вигляд сторінки портфоліо наведено на рис. 3.9 – 3.12. 
 
Рис. 3.9 - Сторінка послуг 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  42 
 
 
Рис. 3.10 – Сторінка послуг (продовження) 
 
 
Рис. 3.10 – Додавання послуги в кошик замовлень 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  43 
 
 
Рис. 3.11 – Форма оформлення замовлення 
 
 
Рис. 3.12 – Результат оформлення замовлення 
 
Сторінка про автора містить інформацію про фотографа: професійну 
фотографію, біографію, досвід роботи та творчу філософію. Зовнішній вигляд 
сторінки про автора наведено на рисунках 3.13 – 3.16. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  44 
 
 
Рис. 3.13 - Сторінка про автора  
 
 
Рис. 3.14 - Сторінка про автора (продовження) 
 
А
ЧДТУ 262208.008 ПЗ  рк. 
Змн. Арк. № Документа Підпис Дата  45 
 
 
Рис. 3.15 - Сторінка про автора (продовження) 
 
 
Рис. 3.16 - Сторінка про автора (продовження) 
 
Сторінка контактів включає контактну форму, контактну інформацію, 
години роботи та інтерактивну карту Google Maps з розташуванням студії. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  46 
 
 
Рис. 3.17 - Сторінка контактів 
 
 
Рис. 3.18 - Сторінка контактів з картою 
 
 
3.3.4 Стилізація та адаптивний дизайн 
Для стилізації компонентів використовуються CSS Modules. Цей підхід 
дозволяє створювати локальні стилі для кожного компонента, уникаючи 
конфліктів назв класів. Файли стилів мають розширення .module.css та 
імпортуються безпосередньо в компонент. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  47 
 
Адаптивний дизайн реалізовано за принципом Mobile-first за допомогою 
медіа-запитів. Для мобільних пристроїв (ширина екрану менше 768px) меню 
перетворюється на гамбургер-меню, сітка галереї стає в одну колону, а шрифти 
та відступи зменшуються. Мобільна версія сайту показана на рисунках 3.19 – 
3.20.  
 
Рис. 3.19 - Мобільна версія сайту 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  48 
 
 
Рис. 3.20 - Мобільна версія сайту (продовження) 
 
3.4. Реалізація бекенду та бази даних 
Бекенд був реалізований за допомогою платформи Node.js з фреймворком 
Express.js. Він надає REST API для взаємодії з фронтендом і забезпечує 
збереження даних у PostgreSQL. 
 
3.4.1. Створення сервера на Node.js + Express 
Головний файл сервера (backend/src/index.js) створює екземпляр Express-
додатку, налаштовує middleware та визначає маршрути. Нижче буде наведено 
фрагмент програмного коду файлу index.js.  
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  49 
 
const express = require('express'); 
const cors = require('cors'); 
require('dotenv').config(); 
const app = express(); 
const PORT = process.env.PORT || 5000; 
// Middleware 
app.use(cors()); 
app.use(express.json()); 
app.get('/api/health', (req, res) => { 
  res.json({ status: 'OK', message: 'Server is running' }); 
}); 
// Імпорт маршрутів 
const contactsRoutes = require('./routes/contacts'); 
const ordersRoutes = require('./routes/orders'); 
app.use('/api/contacts', contactsRoutes); 
app.use('/api/orders', ordersRoutes); 
app.listen(PORT, () => { 
  console.log(`Server running on port ${PORT}`); 
}); 
 
3.4.2. Налаштування підключення до PostgreSQL (Neon) 
Підключення до бази даних реалізовано у файлі backend/src/db/index.js. 
Використовується бібліотека pg (node-postgres) - офіційний клієнт для 
PostgreSQL у середовищі Node.js. Далі наведено фрагмент програмного коду, 
де реалізоване підключення до бази даних. 
const { Pool } = require('pg'); 
const pool = new Pool({ 
  connectionString: process.env.DATABASE_URL, 
  ssl: { 
    rejectUnauthorized: false 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  50 
 
  } 
}); 
module.exports = pool; 
 
Змінна DATABASE_URL береться з файлу .env (для локальної розробки) 
або зі змінних оточення на Vercel. 
 
3.4.3. Розробка схеми бази даних 
Для зберігання даних створено дві основні таблиці: 
1. Таблиця contacts – для збереження повідомлень з контактної форми: 
• id - унікальний ідентифікатор 
• name – ім’я відправника 
• email - email відправника 
• phone - телефон (необов’язково) 
• message - текст повідомлення 
• created_at - дата створення 
2. orders – для збереження замовлень: 
• id - унікальний ідентифікатор 
• order_number - унікальний номер замовлення 
• client_name - ПІБ клієнта 
• client_email - email клієнта 
• client_phone - телефон клієнта 
• items  - список замовлених послуг (у форматі JSON) 
• total_amount - загальна сума замовлення 
• created_at - дата створення 
 
Далі буде наведено програмний код створення таблиць в базі даних. 
CREATE TABLE IF NOT EXISTS contacts ( 
    id SERIAL PRIMARY KEY, 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  51 
 
    name VARCHAR(255) NOT NULL, 
    email VARCHAR(255) NOT NULL, 
    phone VARCHAR(50), 
    message TEXT NOT NULL, 
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
); 
CREATE TABLE IF NOT EXISTS orders ( 
    id SERIAL PRIMARY KEY, 
    order_number VARCHAR(50) UNIQUE NOT NULL, 
    client_name VARCHAR(255) NOT NULL, 
    client_email VARCHAR(255) NOT NULL, 
    client_phone VARCHAR(50) NOT NULL, 
    items JSONB NOT NULL, 
    total_amount DECIMAL(10, 2) NOT NULL, 
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
); 
 
3.4.4. Реалізація API маршрутів 
Для кожного маршруту створено окремі файли в папці routes та відповідні 
контролери в папці controllers. 
Наприклад, маршрут для збереження контактного повідомлення (POST 
/api/contacts). Нижче буде наведено фрагмент коду файлу contacts.js. 
const express = require('express'); 
const { saveContact, getContacts } =require('../controllers/contactController'); 
const router = express.Router(); 
router.post('/', saveContact); 
router.get('/', getContacts); 
module.exports = router; 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  52 
 
Контролер saveContact отримує дані з тіла запиту, виконує SQL-запит на 
вставку та повертає відповідь клієнту. Далі буде наведено програмний код 
контролера contactController.js. 
const pool = require('../db'); 
const saveContact = async (req, res) => { 
  const { name, email, phone, message } = req.body; 
  try { 
    const result = await pool.query( 
      'INSERT INTO contacts (name, email, phone, message) VALUES ($1, $2, 
$3, $4) RETURNING id', 
      [name, email, phone, message] 
    ); 
    res.status(201).json({  
      success: true,  
      message: 'Contact saved successfully', 
      id: result.rows[0].id  
    }); 
  } catch (error) { 
    console.error('Error saving contact:', error); 
    res.status(500).json({ success: false, message: 'Server error' }); 
  } 
}; 
Аналогічно реалізовано маршрути для отримання списку контактів, а 
також для роботи із замовленнями. 
 
3.4.5. Інтеграція зовнішніх сервісів 
Для відображення інтерактивної карти на сторінці контактів 
використовується Google Maps API, вбудований через елемент <iframe>. Такий 
підхід є простим у реалізації та не потребує додаткових бібліотек. API ключ (за 
потреби) зберігається у змінних оточення. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  53 
 
Для віджета погоди використовується OpenWeatherMap API. Фронтенд 
надсилає GET-запит до API з назвою міста та отримує поточну погоду. 
 
3.5. Інтеграція фронтенду та бекенду 
Для зв’язку фронтенду з бекендом на стороні клієнта використовується 
вбудований у браузер метод fetch. Він виконує HTTP-запити та обробляє 
відповіді від сервера у форматі JSON. 
Відправка запитів з фронтенду. У ContactForm.jsx при відправленні 
форми виконується POST-запит до /api/contacts. Нижче буде наведено фрагмент 
коду з ContactForm.jsx. 
const response = await fetch(`${API_URL}/contacts`, { 
        method: 'POST', 
        headers: { 
          'Content-Type': 'application/json', 
        }, 
        body: JSON.stringify({ 
          name: formData.name, 
          email: formData.email, 
          phone: formData.phone || '', 
          message: formData.message 
        }), 
      }); 
 
URL бекенду зберігається у змінній API_URL. Для локальної розробки 
це http://localhost:5000/api, для віддаленого хостингу - реальна адреса бекенду 
на Vercel. 
Обробка помилок. Якщо запит не вдається (немає мережі, сервер 
повернув помилку), користувач бачить повідомлення про помилку. 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  54 
 
3.6. Розгортання проекту (Deploy) 
Розгортання проекту на Vercel є ключовим етапом, після якого сайт стає 
доступним в мережі Інтернет. 
Підготовка проекту до деплою. Оскільки проект має таку структуру, що 
фронтенд та бекенд в одному репозиторії. Тож необхідно створити файл 
конфігурації vercel.json. Цей файл вказує Vercel, як саме будувати та 
маршрутизувати запити для різних частин проекту. Далі буде вставлено 
програмний код файлу конфігурації vercel.json. 
{ 
  "version": 2, 
  "builds": [ 
    { "src": "frontend/**", "use": "@vercel/static-build", "config": { "distDir": 
"build" } }, 
    { "src": "backend/src/index.js", "use": "@vercel/node" } 
  ], 
  "routes": [ 
    { "src": "/api/(.*)", "dest": "backend/src/index.js" }, 
    { "src": "/(.*)", "dest": "frontend/build/$1" } 
  ] 
} 
 
Підключення репозиторію GitHub до Vercel. На сайті Vercel створено 
два окремі проекти: один для фронтенду, інший для бекенду. Це спрощує 
налаштування та дозволяє окремо контролювати розгортання кожної частини. 
Для кожного проекту вказано кореневу директорію (frontend або backend) та 
обрано відповідний фреймворк (Create React App або Node.js). 
Налаштування змінних оточення на Vercel. Для коректної роботи 
бекенду на Vercel необхідно додати змінну оточення DATABASE_URL, яка 
містить рядок підключення до бази даних Neon. Це робиться в інтерфейсі 
Vercel, що дуже зручно. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  55 
 
Автоматичне розгортання. Після налаштування Vercel автоматично 
відстежує зміни в репозиторії GitHub. При кожному новому коміті в 
гілку main запускається автоматичний деплой. Після успішного деплою сайт 
стає доступним за посиланням, наданим Vercel (https://photographsite-
anton.vercel.app). 
 
3.7 Тестування системи 
Для підтвердження працездатності та якості розробленого сайту було 
проведено комплекс тестів. 
Методи тестування 
1. Функціональне тестування: перевірка роботи всіх функцій (галерея, 
форма, кошик, тощо). Результати функціонального тестування 
представлені в табл. 3.1. 
 
Таблиця 3.1 Результати функціонального тестування 
Функція Очікуваний Фактичний результат Статус 
результат 
Відображення Відображення Відповідає очікуваному Працює 
галереї сітки зображень 
Фільтрація за Показ лише Відповідає очікуваному Працює 
категоріями обраної категорії 
Відкриття Повнорозмірне Відповідає очікуваному Працює 
модального вікна фото з описом 
Відправка форми Повідомлення Відповідає очікуваному Працює 
(валідні дані) «Дякуємо!» 
Відправка Повідомлення Відповідає очікуваному Працює 
форми про помилку 
 
(невалідний 
email) 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  56 
 
Таблиця 3.1 Результати функціонального тестування (продовження) 
Функція Очікуваний Фактичний результат Статус 
результат 
Додавання послуги Поява товару в Відповідає очікуваному Працює 
до кошика кошику 
Зміна кількості в Перерахунок Відповідає очікуваному Працює 
кошику загальної суми 
Віджет погоди Відображення Відповідає очікуваному Працює 
температури 
Google Maps API Відображення Відповідає очікуваному Працює 
карти 
 
Було перевірено роботу всіх основних функцій сайту. Усі функції 
працюють коректно, помилок виявлено не було. 
2. Кросбраузерне тестування: перевірка відображення у браузерах Chrome, 
Firefox, Safari, Edge, Opera. Результати кросбраузерного тестування 
описані в табл. 3.2. 
 
Таблиця 3.2 Результати кросбраузерного тестування 
Браузер Версія Відображення Функціональність Примітки 
Google 148.0.7778.168 Коректне Працює - 
Chrome 
Mozilla 150.0.3 Коректне Працює - 
Firefox 
Safari 26.4.2 Коректне Працює Незначні 
відмінності 
у стилях 
Microsoft 148.0.3967.70 Коректне Працює - 
Edge 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  57 
 
Таблиця 3.2 Результати кросбраузерного тестування (продовження) 
Браузер Версія Відображення Функціональність Примітки 
Opera 131.0.5877.55 Коректне Працює - 
 
Сайт було перевірено у п’яти найпопулярніших браузерах. У всіх 
браузерах сайт відображається коректно, всі інтерактивні елементи працюють 
належним чином. Незначні відмінності спостерігаються лише в стилізації 
елементів форми в браузері Safari, що не впливає на функціональність. 
3. Адаптивне тестування: перевірка відображення на пристроях з різною 
роздільною здатністю (ПК, планшет, смартфон). Результати адаптивного 
тестування наведено в табл. 3.3. 
 
Таблиця 3.3 Результати адаптивного тестування 
Пристрій Роздільна Відображення Читабельність Масштабування 
здатність меню тексту зображень 
ПК 1920x1080 Горизонтальне Добре Коректне 
ПК 1366x768 Горизонтальне Добре Коректне 
Планшет 768x1024 Горизонтальне Добре Коректне 
Планшет 800x1280 Горизонтальне Добре Коректне 
Смартфон 375x667 Гамбургер- Добре Коректне 
меню 
Смартфон 414x896 Гамбургер- Добре Коректне 
меню 
 
 Перевірка здійснювалася на пристроях з різною роздільною здатністю 
екрана. Для емуляції мобільних пристроїв використовувався режим емуляції в 
інструментах розробника Chrome (DevTools).  
На всіх роздільних здатностях сайт зберігає читабельність тексту, 
коректно масштабує зображення, а на мобільних пристроях навігаційне меню 
перетворюється в «гамбургер-меню». Зауважень до адаптивності немає. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  58 
 
4. Тестування продуктивності: оцінка швидкості завантаження за 
допомогою Google Lighthouse. На рисунку 3.21 надані результати 
тестування продуктивності. 
 
Рис. 3.21 – Результати тестування Google Lighthouse 
 
За результатами тестування, сайт отримав наступні оцінки: 
• Performance (Продуктивність): 100 
• Accessibility (Доступність): 95 
• Best Practices (Кращі практики): 77 
• SEO (Пошукова оптимізація): 100 
Отримані оцінки свідчать про високу швидкодію сайту (100 балів), 
хорошу доступність для користувачів (95 балів) та належну пошукову 
оптимізацію (100 балів).  
Показник Best Practices (77 балів) є дещо нижчим за рекомендований 
рівень 90 балів, що вказує на потенційні напрямки для подальшого покращення. 
Загалом, результати тестування підтверджують, що сайт є швидким, доступним 
та добре оптимізованим для пошукових систем. 
5. Тестування безпеки: перевірка використання HTTPS, валідації форми. 
Сайт використовує протокол HTTPS, що забезпечує шифрування даних. 
У формі зворотного зв’язку реалізовано валідацію на стороні клієнта 
(перевірка email, заповненості полів). На рисунку 3.22-3.23 показано, як працює 
валідація форми зворотного зв’язку. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  59 
 
 
Рис. 3.22 - Валідація форми зворотного зв’язку 
 
 
Рис. 3.23 – Результат заповнення форми зворотного зв’язку правильно 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  60 
 
Перевірка коректності роботи API та бази даних 
Для перевірки роботи API бекенду було використано інструмент Postman. 
Надсилання POST-запиту на /api/contacts з валідними даними призводить до 
збереження запису в таблиці contacts бази даних Neon. На рисунках 3.24 – 
 3.25 можна побачити, як перевірялася робота API та бази даних за 
допомогою Postman. 
 
Рис. 3.24 – Успішне надсилання POST-запиту в Postman 
 
 
Рис. 3.25 – Дані в таблиці contacts після відправки форми 
 
Підсумок тестування 
Отже, усі заплановані тести пройдено успішно. Сайт коректно 
відображається в усіх сучасних браузерах, має адаптивний дизайн, всі функції 
працюють відповідно до технічного завдання. База даних успішно зберігає 
інформацію. Таким чином, розроблений сайт-портфоліо фотографа є повністю 
працездатним та готовим до практичного використання.  
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  61 
 
ВИСНОВКИ 
 
Під час виконання кваліфікаційної роботи було повністю досягнуто 
поставленої мети – розроблено сучасний, функціональний сайт-портфоліо 
фотографа з використанням фреймворку React, який забезпечує ефективну 
презентацію творчих робіт через галерею, зручну систему замовлення 
фотосесій, адаптивний дизайн та інтеграцію з соціальними мережами. 
Відповідно до поставлених завдань, у роботі отримано наступні 
результати: 
1. Проаналізовано існуючі рішення для портфоліо фотографів (Wix, 
Squarespace, Zenfolio, Instagram) та визначено їх переваги та недоліки. 
Встановлено, що універсальні конструктори мають високу вартість 
підписки та обмежену гнучкість, а соціальні мережі не забезпечують 
професійного рівня презентації. Це обґрунтувало необхідність створення 
власного сайту. 
2. Обґрунтовано вибір технологій для розробки. Для фронтенду обрано 
React, для бекенду – Node.js та Express.js, для бази даних – PostgreSQL. 
Такий набір технологій забезпечує єдність мови програмування, високу 
продуктивність та масштабованість. 
3. Спроектовано структуру та інтерфейс сайту. Розроблено логічну та 
фізичну структуру, забезпечено єдиний фірмовий стиль, реалізовано 
адаптивну верстку для коректного відображення на всіх типах пристроїв. 
4. Реалізовано основні компоненти сайту: галерею з модальним вікном та 
фільтрацією за категоріями, форму зворотного зв’язку з валідацією на 
стороні клієнта, кошик замовлень з можливістю зміни кількості товарів, 
слайдер відгуків клієнтів, сторінку з інформацією про фотографа, віджет 
погоди (OpenWeatherMap API) та інтерактивну карту (Google Maps API). 
5. Інтегровано зовнішні сервіси: Google Maps API для відображення карти 
розташування студії, OpenWeatherMap API для віджета погоди, а також 
реалізовано зв’язок з базою даних PostgreSQL через REST API. 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  62 
 
6. Проведено тестування розробленого сайту. Функціональне тестування 
підтвердило коректну роботу всіх модулів (галерея, форма, кошик, віджет 
погоди). Кросбраузерне тестування в браузерах Chrome, Firefox, Safari, 
Edge та Opera показало ідентичне відображення та функціональність. 
Адаптивне тестування на різних роздільних здатностях підтвердило 
коректну роботу мобільної версії. Тестування продуктивності за 
допомогою Google Lighthouse дало високі результати: Performance – 100, 
Accessibility – 95, SEO – 100. 
Практичне значення роботи – розроблений сайт-портфоліо може 
використовуватись професійними фотографами, як готовий інструмент для 
презентації своїх робіт, залучення клієнтів та продажу послуг. Сайт має 
адаптивний дизайн, що забезпечує коректне відображення на всіх типах 
пристроїв. 
Перспективи подальшого розвитку проекту включають: додавання 
блогу для ведення статей про діяльність фотографа, інтеграцію з платіжною 
системою (наприклад, Liqpay) для онлайн-оплати замовлень, систему реєстрації 
клієнтів з особистими кабінетами, а також чат для оперативного спілкування з 
фотографом.  
Отже, мету кваліфікаційної роботи було досягнуто, всі завдання виконано 
в повному обсязі, а отриманий готовий продукт у вигляді сайту-портфоліо для 
фотографа може бути використаний для реальної комерційної діяльності. 
 
 
 
 
 
 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  63 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
 
1. Як обрати хорошого фотографа. URL: https://1plus1.ua/snidanok-z-1-
1/novyny/ak-obrati-horosogo-fotografa 
2. Mobile-first design: що це і як його правильно реалізувати. 
URL: https://brander.ua/blog/mobile-first-design-shcho-tse-i-yak-yoho-pravylno-
realizuvaty 
3. Портфоліо професійного фотографа Альони Перепелиці з Києва. 
URL: https://aperepelitsa.com.ua/ua/portfolio/ 
4. Що треба знати, щоб розробити правильний сайт для портфоліо 
фотографа. URL: https://it-rating.ua/scho-treba-znati-schob-rozrobiti-pravilniy-
sayt-u-veb-studii-dlya-portfolio-fotografa 
5. Створення портфоліо 
фотографа. URL: https://www.kingston.com/ua/blog/personal-storage/making-
photography-portfolio 
6. Wix – конструктор сайтів. URL: https://uk.wix.com/ 
7. Squarespace – платформа для створення сайтів. 
URL:https://www.squarespace.com/ 
8. Zenfolio – платформа для фотографів. URL:https://zenfolio.com/ 
9. Instagram – соціальна мережа. URL: https://www.instagram.com/ 
10. Топ 14 конструкторів сайтів. URL: https://brander.ua/blog/top-14-
konstruktoriv-saytiv 
11. React – офіційна документація. URL: https://react.dev/ 
12. Vue.js – офіційна документація. URL: https://vuejs.org/ 
13. Angular – офіційна документація. URL: https://angular.dev/ 
14. Stack Overflow Developer Survey 2025. URL: 
https://survey.stackoverflow.co/2025/ 
15. Node.js – офіційна документація. URL: https://nodejs.org/uk 
16. Express.js – офіційна документація. URL:https://expressjs.com/ 
17. Vercel – платформа для деплою. URL:https://vercel.com/ 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  64 
 
18. PostgreSQL – офіційна документація. URL: https://www.postgresql.org/ 
19. Нільсен Я., Лоренгер Г. Пріоритети веб-юзабіліті / Я. Нільсен, Г. Лоренгер. 
Берклі : New Riders Press, 2006. - 432 с. 
20. Nielsen Norman Group. Що користувачі очікують від веб-сайту. URL: 
https://www.nngroup.com/articles/web-form-design/  
21. Google / SOASTA. Find Out How You Stack Up to New Industry Benchmarks 
for Mobile Page Speed. URL:https://www.thinkwithgoogle.com/marketing-
strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/  
22. OWASP Foundation. Десять найпоширеніших загроз веб-безпеці (OWASP 
Top Ten). URL: https://owasp.org/www-project-top-ten/  
23. Луптон Е. Мислення через шрифт: критичний посібник для дизайнерів, 
письменників, редакторів та студентів / Е. Луптон. – 2-ге вид. –Нью-Йорк : 
Princeton Architectural Press, 2010. – 224 с. 
24. Google Fonts. Бібліотека веб-шрифтів. URL: https://fonts.google.com 
25. Річардсон Л., Амундсен М. RESTful веб-API / Л. Річардсон, М. Амундсен. 
Себастопол : O’Reilly Media, 2013. 
26. Visual Studio Code – офіційна документація. URL: 
https://code.visualstudio.com/docs 
27. Git – офіційна документація. URL:https://git-scm.com/docs 
28. React Router – офіційна документація. URL: https://reactrouter.com/ 
29. Neon – хмарна платформа PostgreSQL. Офіційний 
сайт. URL: https://neon.tech/ 
30. Сайт професійного фотографа Аліни Маліни з Черкас.  
URL: https://malina-photographer.com/ 
 
 
 
 
Арк. 
ЧДТУ 262208.008 ПЗ  
Змн. Арк. № Документа Підпис Дата  65 
66 
 
ДОДАТОК А 
 
Програмний код головної сторінки (Home.jsx): 
import { useEffect } from 'react'; 
import TestimonialSlider from 
'../../components/TestimonialSlider/TestimonialSlider'; 
import WeatherWidget from '../../components/WeatherWidget/WeatherWidget'; 
import Gallery from '../../components/Gallery/Gallery'; 
import './Home.css'; 
function Home() { 
  useEffect(() => { 
    document.title = "Фото Портфоліо | Головна"; 
  }, []); 
  return ( 
    <div className="home-page"> 
      <section className="hero-section"> 
        <div className="hero-content"> 
          <h1>Зупиніть Ваші Найкращі Моменти</h1> 
          <p>Професійні фото послуги для весіль, портретів та подій</p> 
          <a href="#gallery" className="btn">Переглянути Галерею</a> 
        </div> 
      </section> 
      <section className="intro-section"> 
        <div className="container"> 
          <h2>Ласкаво просимо до Мого Портфоліо</h2> 
          <p> 
            Маючи понад 10 років досвіду в професійній фотографії,  
            я спеціалізуюся на тому, щоб зберігати суть ваших найдорожчих 
моментів. 
          </p> 
        </div> 
 
67 
 
      </section> 
      <section id="gallery" className="gallery-preview"> 
        <div className="container"> 
          <h2>Вибрані Роботи</h2> 
          <Gallery /> 
        </div> 
      </section> 
      <section className="testimonials-section"> 
        <div className="container"> 
          <h2>Що кажуть клієнти</h2> 
          <TestimonialSlider /> 
        </div> 
      </section> 
      <section className="widget-section"> 
        <div className="container"> 
          <WeatherWidget /> 
        </div> 
      </section> 
    </div> 
  ); 
} 
export default Home; 
 
Програмний код файлу orderContoller.js (backend частина): 
const pool = require('../db'); 
const saveOrder = async (req, res) => { 
  const { orderNumber, client, items, totalAmount, comment } = req.body; 
  try { 
    const result = await pool.query( 
 
68 
 
      `INSERT INTO orders (order_number, client_name, client_email, 
client_phone, items, total_amount, comment)  
       VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING id`, 
      [orderNumber, client.fullName, client.email, client.phone, 
JSON.stringify(items), totalAmount, comment || null] 
    ); 
    res.status(201).json({  
      success: true,  
      message: 'Order saved successfully', 
      id: result.rows[0].id  
    }); 
  } catch (error) { 
    console.error('Error saving order:', error); 
    res.status(500).json({ success: false, message: 'Server error' }); 
  } 
}; 
const getOrders = async (req, res) => { 
  try { 
    const result = await pool.query('SELECT * FROM orders ORDER BY 
created_at DESC'); 
    res.json({ success: true, orders: result.rows }); 
  } catch (error) { 
    console.error('Error getting orders:', error); 
    res.status(500).json({ success: false, message: 'Server error' }); 
  } 
}; 
module.exports = { saveOrder, getOrders }; 
 
Програмний код файлу Gallery.jsx (галерея робіт і фільтрація): 
import { useState } from 'react'; 
import { galleryItems } from '../../assets/data/galleryItems'; 
 
69 
 
import './Gallery.css'; 
function Gallery({ activeFilter = 'all' }) { 
  const [selectedImage, setSelectedImage] = useState(null); 
  // Фільтруємо елементи галереї 
  const filteredItems = activeFilter === 'all'  
    ? galleryItems  
    : galleryItems.filter(item => item.category === activeFilter); 
  const openModal = (image) => { 
    setSelectedImage(image); 
    document.body.style.overflow = 'hidden'; 
  }; 
  const closeModal = () => { 
    setSelectedImage(null); 
    document.body.style.overflow = 'auto'; 
  }; 
  return ( 
    <section className="gallery-section"> 
      <h2 className="section-title">Наша Галерея</h2> 
      <div className="gallery-grid"> 
        {filteredItems.map((item) => ( 
          <div  
            key={item.id} 
            className="gallery-item" 
            onClick={() => openModal(item)} 
          > 
            <img  
              src={item.thumbnail}  
              alt={item.title}  
 
70 
 
              loading="lazy" 
            /> 
            <div className="overlay"> 
              <h3>{item.title}</h3> 
            </div> 
          </div> 
        ))} 
      </div> 
      {selectedImage && ( 
        <div className="modal" onClick={closeModal}> 
          <div className="modal-content" onClick={(e) => e.stopPropagation()}> 
            <button className="close-btn" onClick={closeModal}>&times;</button> 
            <img  
              src={selectedImage.full}  
              alt={selectedImage.title}  
              className="modal-image" 
            /> 
            <div className="image-info"> 
              <h3>{selectedImage.title}</h3> 
              <p>{selectedImage.description}</p> 
              <p className="date">{selectedImage.date}</p> 
            </div> 
          </div> 
        </div> 
      )} 
    </section> 
  ); 
} 
 
71 
 
export default Gallery; 
 
Програмний код файлу galleryItems.js: 
export const galleryItems = [ 
  { 
    id: 1, 
    title: "Вечірнє Весілля", 
    description: "Чарівна весільна церемонія на березі моря під час заходу 
сонця", 
    date: "Червень 2023", 
    thumbnail: require('../../assets/images/gallery/wedding.jpeg'), 
    full: require('../../assets/images/gallery/wedding.jpeg'), 
    category: "weddings" 
  }, 
  { 
    id: 2, 
    title: "Портретна Сесія", 
    description: "Професійна портретна зйомка в міському середовищі", 
    date: "Травень 2023", 
    thumbnail: "/assets/images/gallery/photocity.jpg", 
    full: "/assets/images/gallery/photocity.jpg", 
    category: "portraits" 
  } 
]; 
export default galleryItems;