Web-сайт «Книжковий Клуб», реалізований за допомогою  фреймворку React

Прокопець, Максим Михайлович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9877
Full metadata record
DC Field	Value	Language
dc.contributor.advisor	Ланських , Євген Володимирович	-
dc.contributor.author	Прокопець, Максим Михайлович	-
dc.date.accessioned	2026-07-27T08:21:29Z	-
dc.date.available	2026-07-27T08:21:29Z	-
dc.date.issued	2026-06-10	-
dc.identifier.uri	https://er.chdtu.edu.ua/handle/ChSTU/9877	-
dc.description.abstract	Кваліфікаційна робота присвячена розробці web-сайту «Книжковий клуб», призначеного для перегляду каталогу книг, пошуку та фільтрації літератури, участі користувачів в обговореннях, створення книжкових клубів, ведення особистого профілю та адміністрування контенту. Розроблений ресурс має користувацьку частину, профіль користувача й адміністративну панель для керування книгами, обговореннями, клубами та статистикою. Актуальність роботи зумовлена розвитком цифрових сервісів у сфері читання, культури та онлайн-комунікації, а також потребою користувачів у зручному доступі до книжкового контенту й читацьких спільнот. Створення такого web-сайту дозволяє об’єднати каталог книг, обговорення, клуби, персональну статистику та адміністрування в межах однієї системи. Метою роботи є розробка web-сайту «Книжковий клуб» з використанням сучасних frontend-технологій. Об’єкт дослідження – процес створення web-орієнтованих інформаційних систем книжкової тематики. Предмет дослідження – структура, функціональні можливості, інтерфейс і програмна реалізація web-сайту «Книжковий клуб». У роботі використано методи аналізу предметної області, порівняння існуючих книжкових web-ресурсів, проєктування структури сайту, розробки користувацького інтерфейсу, моделювання даних, функціонального тестування, UX-тестування та перевірки адаптивності. Практична значущість отриманих результатів полягає у створенні webсайту, який може бути використаний для популяризації читання, систематизації книжкового контенту та підтримки взаємодії між читачами. Ресурс забезпечує перегляд каталогу книг, пошук, фільтрацію, роботу з улюбленими й прочитаними книгами, участь в обговореннях, взаємодію з книжковими клубами, ведення профілю користувача та адміністративне керування контентом.	uk_UA
dc.language.iso	uk	uk_UA
dc.subject	web-сайт	uk_UA
dc.subject	frontend-розробка	uk_UA
dc.subject	книжковий клуб	uk_UA
dc.subject	каталог книг	uk_UA
dc.subject	профіль користувача	uk_UA
dc.subject	адміністративна панель	uk_UA
dc.subject	React	uk_UA
dc.subject	Vite	uk_UA
dc.subject	Vercel	uk_UA
dc.subject	web-технології	uk_UA
dc.title	Web-сайт «Книжковий Клуб», реалізований за допомогою фреймворку React	uk_UA
dc.type	Bachelor Thesis	uk_UA
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Files in This Item:
File	Description	Size	Format
РЕП_БАК_Прокопець _WEB-2211.pdf Restricted Access		3.75 MB	Adobe PDF	View/Open Request a copy
Show simple item record
Extracted text
 
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ 
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ 
         
 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи бакалавра 
 
на тему: Web-сайт «Книжковий Клуб», реалізований за допомогою 
фреймворку React 
  
 
 
 
 
 Виконав: здобувач першого 
(бакалаврського) рівня вищої освіти 
 4 курсу, групи WEB-2211 
Спеціальності 126 «Інформаційні 
системи та технології» 
  ОП «Web-технології, Web-дизайн» 
  
Прокопець Максим Михайлович 
  
Керівник: кандидат технічних наук, 
професор 
Ланських Євген Володимирович 
 
  
Рецензент: директор ТОВ 
“АНДЕРСЕНЛАБ” Алесін Олег 
Вікторович 
 
 
 
 
 
 
 
  
  
  
Черкаси – 2026 року
 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
(повна назва) 
Кафедра інформаційних технологій проектування 
(повна назва) 
Освітньо-кваліфікаційний рівень бакалавр 
(назва) 
Спеціальність 126 F6 «Інформаційні системи та технології» 
(шифр і назва) 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри ІТП 
 Тетяна ПРОКОПЕНКО 
« »  20 року 
 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА 
 
Прокопця Максима Михайловича 
(прізвище, ім’я, по батькові) 
1. Тема роботи Web-сайт «Книжковий Клуб», реалізований за допомогою фреймворку React 
 
Керівник роботи  Ланських Євген Володимирович, кандидат технічних наук, доцент 
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
Затверджено наказом Черкаського державного технологічного університету від 
«12» Березня 2026 року № 56/03-03 
 
2. Строк подання здобувачем роботи _______ 
 
3. Вихідні дані до роботи Методичні рекомендації до підготовки кваліфікаційної роботи 
бакалавра зі спеціальності 126 «Інформаційні системи та технології»; матеріали з 
проєктування web-орієнтованих інформаційних систем; офіційна документація React, Vite, 
Vercel, JavaScript, HTML, CSS, React Router, Visual Studio Code, Chrome DevTools і Lighthouse; 
інформаційні матеріали щодо книжкових web-ресурсів, читацьких спільнот, UX/UI-дизайну, 
адаптивної верстки, доступності web-контенту, безпеки та тестування web-застосунків; 
аналітичні матеріали й відкриті web-ресурси книжкової тематики, зокрема Goodreads, 
LibraryThing, Google Books і Yakaboo. 
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)  
Постановка задачі та аналіз предметної області книжкових web-ресурсів; аналіз існуючих 
аналогів web-сайту «Книжковий клуб»; обґрунтування технічного завдання; проєктування 
структури, дизайну, навігації та функціональних модулів сайту; вибір інструментальних 
засобів розробки; реалізація користувацької частини, профілю користувача та адміністративної 
панелі; організація даних і логіки можливих API-маршрутів; тестування працездатності, 
адаптивності та зручності використання web-сайту; порівняння розробленого ресурсу з 
аналогами; висновки. 
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів) 
Навігаційна структура web-сайту «Книжковий клуб»; модель наповнення та адміністрування 
web-сайту «Книжковий клуб»; схема можливих API-маршрутів web-сайту «Книжковий клуб»; 
модель даних web-сайту «Книжковий клуб»; прототип основних сторінок web-сайту; 
скріншоти головної сторінки, каталогу книг, сторінки обговорень, сторінки книжкових клубів, 
профілю користувача та адміністративної панелі; таблиця порівняння з аналогами; таблиці 
тестування; ілюстрації результатів перевірки адаптивності, продуктивності та працездатності 
web-сайту. 
  
 
 
6. Консультанти розділів роботи 
 
Розділ Прізвище, ініціали та Підпис, дата 
посада 
консультанта 
  завдання видав завдання прийняв 
    
    
    
    
7. Дата видачі завдання 10 Лютого 2026 року 
 
КАЛЕНДАРНИЙ ПЛАН 
 
№ Строк виконання 
Назва етапів кваліфікаційної роботи бакалавра 
з/п етапів роботи Примітка 
1 Видача завдання на кваліфікаційну роботу бакалавра 10.02.2026 Виконано 
2 Аналіз літературних джерел, об’єкта та предмета дослідження 15.02.2026 Виконано 
Написання теоретичного розділу кваліфікаційної роботи 
3 18.02.2026 Виконано 
бакалавра 
Написання аналітичного розділу, аналіз існуючих платформ 
4 02.03.2026 Виконано 
онлайн-навчання програмуванню 
5 Проєктування структури та функціоналу web-сайту 15.03.2026 Виконано 
6 Практична реалізація web-сайту 19.03.2026 Виконано 
7 Тестування web-сайту та підготовка висновків 25.03.2026 Виконано 
Передзахист кваліфікаційної роботи бакалавра на засіданні 
8 22.04.2026 Виконано 
кафедри 
9 Подання роботи завідувачу кафедри 26.05.2026 Виконано 
10 Захист кваліфікаційної роботи бакалавра 10.06.2026 Виконано 
 
Здобувач вищої освіти     
(підпис) (прізвище та ініціали) 
Керівник роботи     
(підпис) (прізвище та ініціали) 
АНОТАЦІЯ 
 
Структура та обсяг роботи. Пояснювальна записка складається з трьох 
розділів, викладена на 73 сторінках, містить 18 рисунків, 1 таблицю, 30 джерел 
використаної літератури, 2 додатки. 
Кваліфікаційна робота присвячена розробці web-сайту «Книжковий 
клуб», призначеного для перегляду каталогу книг, пошуку та фільтрації 
літератури, участі користувачів в обговореннях, створення книжкових клубів, 
ведення особистого профілю та адміністрування контенту. Розроблений 
ресурс має користувацьку частину, профіль користувача й адміністративну 
панель для керування книгами, обговореннями, клубами та статистикою. 
Актуальність роботи зумовлена розвитком цифрових сервісів у сфері 
читання, культури та онлайн-комунікації, а також потребою користувачів у 
зручному доступі до книжкового контенту й читацьких спільнот. Створення 
такого web-сайту дозволяє об’єднати каталог книг, обговорення, клуби, 
персональну статистику та адміністрування в межах однієї системи. 
Метою роботи є розробка web-сайту «Книжковий клуб» з 
використанням сучасних frontend-технологій. Об’єкт дослідження – процес 
створення web-орієнтованих інформаційних систем книжкової тематики. 
Предмет дослідження – структура, функціональні можливості, інтерфейс і 
програмна реалізація web-сайту «Книжковий клуб». 
У роботі використано методи аналізу предметної області, порівняння 
існуючих книжкових web-ресурсів, проєктування структури сайту, розробки 
користувацького інтерфейсу, моделювання даних, функціонального 
тестування, UX-тестування та перевірки адаптивності. 
Практична значущість отриманих результатів полягає у створенні web-
сайту, який може бути використаний для популяризації читання, 
систематизації книжкового контенту та підтримки взаємодії між читачами. 
Ресурс забезпечує перегляд каталогу книг, пошук, фільтрацію, роботу з 
улюбленими й прочитаними книгами, участь в обговореннях, взаємодію з 
книжковими клубами, ведення профілю користувача та адміністративне 
керування контентом. 
Ключові слова: web-сайт, Книжковий клуб, каталог книг, обговорення, 
книжкові клуби, профіль користувача, адміністративна панель, React, Vite, 
Vercel, frontend-розробка, web-технології. 
 
SUMMARY 
 
Structure and scope of the work. The explanatory note consists of three 
chapters, presented on 73 pages, contains 18 figures, 1 table, 30 references, and 2 
appendices. 
The qualification work is devoted to the development of the “Book Club” 
website, designed for browsing a book catalog, searching and filtering literature, 
participating in discussions, creating book clubs, managing a personal user profile, 
and administering content. The developed resource includes a user section, a user 
profile, and an administrative panel for managing books, discussions, clubs, and 
statistics. 
The relevance of the work is determined by the development of digital 
services in the field of reading, culture, and online communication, as well as by 
users’ need for convenient access to book content and reading communities. The 
creation of such a website makes it possible to combine a book catalog, discussions, 
clubs, personal statistics, and administration within a single system. 
The purpose of the work is to develop the “Book Club” website using modern 
frontend technologies. The object of the research is the process of creating web-
oriented information systems related to book topics. The subject of the research is 
the structure, functionality, interface, and software implementation of the “Book 
Club” website. 
The work uses methods of subject area analysis, comparison of existing book-
related web resources, website structure design, user interface development, data 
modeling, functional testing, UX testing, and adaptive layout testing. 
The practical significance of the obtained results lies in the creation of a 
website that can be used to popularize reading, systematize book content, and 
support interaction between readers. The resource provides browsing of the book 
catalog, search, filtering, work with favorite and completed books, participation in 
discussions, interaction with book clubs, user profile management, and 
administrative content management. 
Keywords: website, Book Club, book catalog, discussions, book clubs, user 
profile, administrative panel, React, Vite, Vercel, frontend development, web 
technologies. 
 
 
 
 
ЗМІСТ 
 
ВСТУП ......................................................................................................................... 3 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ ..................................................................... 9 
1.1. Опис предметної області ............................................................................. 9 
1.2. Доцільність розробки web-сайту «Книжковий клуб» ............................ 11 
1.3. Чинники, які впливають на розробку книжкового web-ресурсу ........... 13 
1.4. Аналітичний огляд існуючих книжкових web-ресурсів ........................ 15 
Висновки до розділу 1 ...................................................................................... 25 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ........................ 27 
2.1. Призначення web-сайту «Книжковий клуб» ........................................... 27 
2.2. Вимоги до дизайну web-сайту «Книжковий клуб» ................................ 29 
2.3. Структура сторінок web-сайту «Книжковий клуб» ................................ 31 
2.4. Навігація web-сайту «Книжковий клуб» ................................................. 33 
2.5. Наповнення сторінок web-сайту «Книжковий клуб» ............................. 35 
2.6. Адміністрування web-сайту «Книжковий клуб» .................................... 38 
2.7. Вимоги до прототипу web-сайту «Книжковий клуб» ............................ 40 
2.8. Техніко-економічне обґрунтування доцільності розробки web-сайту 
«Книжковий клуб» ................................................................................................ 42 
Висновки до розділу 2 ...................................................................................... 47 
РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ ................................................................. 49 
3.1. Обґрунтування вибору інструментальних засобів розробки ................. 49 
3.2. Опис програмної реалізації web-сайту «Книжковий клуб» .................. 52 
3.3. Організація даних web-сайту «Книжковий клуб» .................................. 58 
3.4. Логіка API-маршрутів і обміну даними ................................................... 61 
3.5. Тестування web-сайту «Книжковий клуб» .............................................. 63 
3.6. Порівняння розробленого web-сайту з аналогами .................................. 65 
Висновки до розділу 3 ...................................................................................... 67 
ВИСНОВКИ ............................................................................................................. 69 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................. 73 
ДОДАТОК А ............................................................................................................. 75 
ДОДАТОК Б ............................................................................................................. 79 
 
 
 – 
ЧДТУ 262219.01 ПЗ 
Змн. Арк. № докум. Підпис Дата  
 Розроб. Прокопець М. М...  Літ. Арк. Аркушів 
 Перевір. Ланських Є. В.. Web-сайт «Книжковий Клуб»,  73 
реалізований за допомогою 
 Рецензент Алесін О. В. 
фреймворку React  ФІТІС, 
 Н. контр. Ланських Є. В. 
Пояснювальна записка кафедра ІТП, WEB-2211 
 Затверд. Прокопенко Т.О.  
 
ВСТУП 
 
У сучасних умовах web-технології відіграють важливу роль у розвитку 
освітнього, культурного та інформаційного середовища, оскільки 
забезпечують користувачам швидкий доступ до цифрових ресурсів, 
електронних сервісів, засобів комунікації та персоналізованого контенту. 
Особливе значення такі технології мають для популяризації читання, 
організації читацьких спільнот, обміну враженнями про книги та підтримки 
інтересу до літератури. Якщо раніше читацька взаємодія переважно 
відбувалася в бібліотеках, навчальних закладах або локальних клубах, то 
сьогодні значна частина комунікації переноситься у цифрове середовище, де 
користувач може переглядати каталог книг, залишати відгуки, брати участь в 
обговореннях, долучатися до тематичних клубів і формувати власну читацьку 
активність. 
Актуальність теми кваліфікаційної роботи зумовлена потребою у 
створенні зручних web-ресурсів, які поєднують функції електронного 
каталогу, читацької спільноти та персонального кабінету користувача. 
Розвиток цифрових сервісів змінює підхід до споживання культурного 
контенту: користувачі очікують не лише доступу до інформації про книги, а й 
можливості взаємодіяти з іншими читачами, обирати літературу за жанрами й 
рейтингом, зберігати улюблені книги, відмічати прочитані твори та брати 
участь у тематичних дискусіях. У зв’язку з цим виникає необхідність розробки 
web-систем, які сприяють популяризації читання та забезпечують просту й 
зрозумілу взаємодію користувачів із книжковим контентом. 
Важливість розвитку цифрових рішень у сфері читання підтверджується 
державною політикою України. Кабінетом Міністрів України схвалено 
Стратегію розвитку читання на період до 2032 року «Читання як життєва 
стратегія», що визначає читання як важливий чинник особистісного розвитку, 
освіти, культурної ідентичності та суспільної комунікації [1]. Також 
Український інститут книги у 2024 році проводив загальнонаціональне 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  3 
 
дослідження читання, спрямоване на вимірювання показників реалізації 
зазначеної стратегії та аналіз стану книжкового ринку й читацьких практик в 
Україні [2]. Це свідчить про актуальність створення цифрових інструментів, 
які можуть підтримувати інтерес до літератури та сприяти формуванню 
читацьких спільнот. 
Додатковим чинником актуальності є високий рівень використання 
інтернету в Україні. За даними аналітичного звіту Digital 2025: Ukraine, на 
початку 2025 року в Україні налічувалося 31,5 млн інтернет-користувачів, а 
рівень проникнення інтернету становив 82,4 % [3]. Це створює сприятливі 
умови для розвитку web-ресурсів культурного та освітнього спрямування, 
зокрема сайтів, пов’язаних із книгами, читанням, обговореннями та онлайн-
спільнотами. Крім того, міжнародні організації, зокрема UNESCO, 
наголошують на важливості бібліотек і цифрових ресурсів для поширення 
знань, розвитку грамотності та забезпечення доступу до інформації [4]. 
На сьогодні існує багато електронних бібліотек, книжкових каталогів, 
форумів і соціальних платформ, де користувачі можуть шукати книги або 
залишати власні враження. Проте не всі такі сервіси поєднують в одному 
інтерфейсі каталог книг, систему пошуку й фільтрації, обговорення, тематичні 
клуби, особистий профіль користувача, досягнення та адміністративне 
керування контентом. Частина наявних ресурсів має перевантажений 
інтерфейс, складну навігацію, обмежені можливості персоналізації або 
недостатньо зручні інструменти для взаємодії між читачами. Це зумовлює 
доцільність розробки власного web-сайту «Книжковий клуб», який поєднує 
інформаційні, комунікаційні та адміністративні функції в межах єдиної 
системи. 
Розроблюваний web-сайт «Книжковий клуб» призначений для 
об’єднання читачів, перегляду каталогу книг, участі в обговореннях, 
створення та відвідування книжкових клубів, а також керування особистою 
читацькою активністю. Сайт має головну сторінку з коротким представленням 
ресурсу, статистикою, блоком «Книга місяця» та популярними 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  4 
 
обговореннями. Каталог книг містить пошук, фільтри за жанром і рейтингом, 
картки книг із коротким описом, автором, оцінкою та кнопками для читання, 
додавання до улюбленого й позначення прочитаного. Окремо реалізовано 
сторінку обговорень із тематичними категоріями, лайками, коментарями та 
можливістю створення нової теми. Сторінка книжкових клубів дає змогу 
переглядати спільноти читачів, бачити кількість учасників, книги клубу, дату 
створення, автора та взаємодіяти з клубами. Також передбачено профіль 
користувача зі статистикою прочитаних книг, рецензій, улюблених творів, 
обговорень, досягнень, останніх прочитаних книг і списком клубів. Для 
адміністратора реалізовано панель керування книгами, обговореннями, 
клубами та статистикою. 
Метою кваліфікаційної роботи є розробка web-сайту «Книжковий 
клуб», призначеного для перегляду каталогу книг, пошуку й фільтрації 
літератури, участі користувачів в обговореннях, створення читацьких клубів, 
ведення особистого профілю та адміністрування контенту з використанням 
сучасних frontend-технологій. 
Для досягнення поставленої мети необхідно вирішити такі задачі: 
– проаналізувати предметну область web-ресурсів, пов’язаних із 
читанням, електронними каталогами книг і читацькими спільнотами; 
– дослідити існуючі аналоги книжкових web-сайтів, електронних 
бібліотек і сервісів для обговорення літератури, визначити їхні переваги 
та недоліки; 
– сформувати функціональні та нефункціональні вимоги до web-сайту 
«Книжковий клуб»; 
– спроєктувати структуру сайту, логіку навігації, основні сторінки, 
користувацькі сценарії та складові інтерфейсу; 
– обґрунтувати вибір інструментальних засобів і технологій для 
реалізації клієнтської частини web-сайту; 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  5 
 
– реалізувати головну сторінку, каталог книг, сторінку обговорень, 
сторінку книжкових клубів, профіль користувача та адміністративну 
панель; 
– реалізувати функціональні можливості пошуку, фільтрації, перегляду 
карток книг, додавання книг до улюблених, позначення прочитаних 
творів, участі в обговореннях і взаємодії з клубами; 
– виконати тестування працездатності, адаптивності, зручності 
використання, коректності навігації та функціональних можливостей 
сайту; 
– провести порівняння розробленого web-сайту з існуючими аналогами 
та визначити його практичні переваги. 
Об’єкт дослідження – процес створення web-орієнтованих 
інформаційних систем для організації читацьких спільнот і роботи з 
книжковим контентом. 
Предмет дослідження – методи, засоби та технології проєктування й 
розробки web-сайту для перегляду каталогу книг, участі в обговореннях, 
створення книжкових клубів, ведення профілю користувача та 
адміністрування контенту. 
Методи дослідження. У процесі виконання кваліфікаційної роботи 
використано методи аналізу та узагальнення інформації для дослідження 
предметної області й особливостей функціонування книжкових web-ресурсів; 
методи порівняльного аналізу для визначення переваг і недоліків існуючих 
аналогів; методи структурного та функціонального проєктування для 
формування архітектури сайту; методи моделювання користувацьких 
сценаріїв для опису взаємодії користувачів із системою; методи web-
програмування для реалізації інтерфейсу та функціональних модулів; методи 
тестування програмного забезпечення для перевірки працездатності, 
адаптивності, коректності роботи сторінок і зручності використання 
розробленого web-сайту. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  6 
 
Практичне значення одержаних результатів полягає у створенні 
функціонального web-сайту «Книжковий клуб», який може бути 
використаний для популяризації читання, об’єднання користувачів навколо 
літературних інтересів, перегляду каталогу книг, участі в тематичних 
дискусіях і формування читацьких спільнот. Розроблений сайт забезпечує 
централізоване подання інформації про книги, зручну навігацію між 
основними розділами, можливість взаємодії з контентом і ведення особистого 
профілю користувача. Наявність адміністративної панелі підвищує практичну 
цінність системи, оскільки дає змогу керувати книгами, обговореннями, 
клубами та статистичними даними. 
Розроблена система має практичну цінність завдяки поєднанню 
інформаційного каталогу, соціальної взаємодії та персоналізованого 
користувацького простору. Використання компонентного підходу до 
побудови інтерфейсу відповідає сучасним принципам frontend-розробки, 
оскільки React дає змогу створювати інтерфейс із незалежних компонентів, які 
мають власну логіку та зовнішній вигляд [5]. Для організації процесу розробки 
може застосовуватися Vite, який забезпечує швидке середовище розробки для 
сучасних web-проєктів [6]. JavaScript використовується як одна з основних мов 
web-програмування для реалізації інтерактивної поведінки сторінок, обробки 
подій і взаємодії з елементами інтерфейсу [7]. Розгортання сайту на платформі 
Vercel дає змогу забезпечити доступність web-ресурсу через мережу Інтернет 
і спростити процес публікації frontend-додатка [8]. 
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох 
розділів, висновків, списку використаних джерел та додатків. Така структура 
дозволяє послідовно розкрити тему дослідження: від аналізу предметної 
області та постановки задачі до практичної реалізації, тестування й 
оцінювання результатів розробки web-сайту «Книжковий клуб». 
У першому розділі розглянуто предметну область web-ресурсів, 
пов’язаних із читанням, книжковими каталогами та читацькими спільнотами, 
визначено актуальність створення сайту для підтримки літературної взаємодії 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  7 
 
користувачів, проаналізовано сучасні аналоги, їхні функціональні можливості, 
переваги та недоліки. На основі проведеного аналізу сформульовано 
постановку задачі та визначено основні напрями подальшої розробки. 
У другому розділі обґрунтовано технічне завдання, визначено 
функціональні та нефункціональні вимоги до web-сайту, описано загальну 
структуру ресурсу, користувацькі сценарії, вимоги до дизайну, навігації, 
контентного наповнення та адміністрування. Окрему увагу приділено 
проєктуванню основних сторінок сайту, логіці взаємодії користувача із 
системою та ролі адміністративної панелі в керуванні книжковим контентом. 
У третьому розділі описано вибір засобів реалізації, процес розробки 
web-сайту «Книжковий клуб», реалізацію основних сторінок і функціональних 
модулів. Також розглянуто роботу з каталогом книг, пошуком, фільтрами, 
обговореннями, книжковими клубами, профілем користувача та 
адміністративною панеллю. Завершальним етапом розділу є тестування 
системи, перевірка її працездатності, адаптивності, зручності використання та 
порівняння отриманого результату з існуючими аналогами. 
  
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  8 
 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ 
 
 1.1. Опис предметної області 
 
Web-ресурси для роботи з книжковим контентом є важливою складовою 
сучасного цифрового середовища, оскільки вони забезпечують користувачам 
доступ до інформації про книги, авторів, жанри, оцінки, відгуки та читацькі 
спільноти. Основне призначення таких ресурсів полягає у зручному поданні 
літературного контенту, підтримці пошуку й фільтрації книг, організації 
обговорень, формуванні персональних читацьких списків і створенні умов для 
взаємодії між користувачами. 
У сучасних умовах читання все частіше поєднується з цифровими 
сервісами. Користувачі шукають книги через web-сайти, електронні каталоги, 
онлайн-книгарні, бібліотечні системи, соціальні платформи та спеціалізовані 
книжкові сервіси. Це пояснюється зручністю доступу до інформації, 
можливістю швидкого перегляду опису книги, ознайомлення з рейтингом, 
пошуку творів за жанрами, збереження улюблених видань і перегляду думок 
інших читачів. Відповідно, сучасний книжковий web-ресурс повинен не лише 
містити перелік книг, а й забезпечувати зрозумілу навігацію, адаптивний 
інтерфейс, персоналізацію, комунікацію та інструменти адміністрування. 
Особливе значення такі web-ресурси мають для популяризації читання 
та розвитку читацьких спільнот. В Україні питання підтримки читання є 
важливим на державному рівні. У Стратегії розвитку читання на період до 2032 
року «Читання як життєва стратегія» визначено необхідність формування 
сталої читацької культури, підвищення доступності книжок і створення умов 
для розвитку читацьких практик [1]. Це підтверджує актуальність розробки 
цифрових інструментів, які можуть заохочувати користувачів до читання, 
обміну думками та участі у літературних спільнотах. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  9 
 
Предметна область книжкових web-ресурсів охоплює електронні 
каталоги, онлайн-бібліотеки, книжкові соціальні мережі, платформи для 
рецензій, сервіси для ведення персональної бібліотеки та інтернет-книгарні. 
Такі системи можуть мати різне функціональне призначення. Частина ресурсів 
орієнтована на продаж книг, інші — на пошук бібліографічної інформації, 
ведення списків прочитаного, формування рекомендацій або спілкування 
користувачів навколо літературних тем. 
Сучасний web-сайт книжкової тематики може включати такі основні 
компоненти: 
– головну сторінку з коротким описом призначення ресурсу та 
основними інформаційними блоками; 
– каталог книг із картками, які містять назву, автора, жанр, рейтинг, 
короткий опис і зображення обкладинки; 
– систему пошуку книг за назвою або автором; 
– фільтрацію книжкового контенту за жанром, рейтингом або іншими 
параметрами; 
– сторінку або розділ обговорень, де користувачі можуть створювати 
теми та відповідати на повідомлення; 
– систему лайків, коментарів або відгуків; 
– сторінку книжкових клубів для об’єднання користувачів за 
літературними інтересами; 
– особистий профіль користувача зі статистикою прочитаних книг, 
улюбленими творами, обговореннями та досягненнями; 
– адміністративну панель для керування книгами, обговореннями, 
клубами та статистикою. 
Перевагами книжкових web-ресурсів є доступність інформації з будь-
якого пристрою, можливість швидкого оновлення контенту, зручне 
структурування книг, підтримка взаємодії між користувачами та формування 
персонального читацького простору. Завдяки таким ресурсам користувач може 
швидше знайти потрібну книгу, переглянути думки інших читачів, зберегти 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  10 
 
твір до улюбленого, позначити його як прочитаний або долучитися до 
тематичного книжкового клубу. 
Водночас у цій предметній області існують певні проблеми. До них 
можна віднести перевантаженість інтерфейсу, складну навігацію, недостатню 
адаптацію до мобільних пристроїв, обмежені можливості локалізації 
українською мовою, відсутність зручного профілю користувача, недостатній 
розвиток тематичних клубів або обмежені інструменти для адміністрування 
контенту. Такі недоліки можуть знижувати ефективність використання web-
ресурсу та ускладнювати взаємодію користувача з книжковим контентом. 
Отже, web-ресурси книжкової тематики є актуальним напрямом 
розвитку web-орієнтованих інформаційних систем. Вони поєднують 
електронний каталог, пошук, фільтрацію, комунікацію, персоналізацію та 
адміністративне керування. Це створює передумови для розробки web-сайту 
«Книжковий клуб», який буде орієнтований на зручне подання книг, підтримку 
читацьких обговорень, створення книжкових клубів і ведення профілю 
користувача. 
 
1.2. Доцільність розробки web-сайту «Книжковий клуб» 
 
Розробка web-сайту «Книжковий клуб» є доцільною у зв’язку з потребою 
користувачів у зручному, зрозумілому та функціональному середовищі для 
роботи з книжковим контентом. Під час вибору книги користувачеві важливо 
швидко отримати відомості про назву, автора, жанр, рейтинг, короткий опис, а 
також мати можливість зберегти книгу до улюбленого, позначити її як 
прочитану або перейти до обговорення. 
Більшість існуючих книжкових web-ресурсів надають корисні 
можливості, проте не завжди поєднують в одному інтерфейсі каталог книг, 
обговорення, книжкові клуби, профіль користувача, досягнення та 
адміністративну панель. Наприклад, одні сервіси більше орієнтовані на 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  11 
 
продаж книг, інші — на каталогізацію особистої бібліотеки, треті — на оцінки 
та рецензії. У результаті користувачеві часто доводиться використовувати 
кілька різних платформ для пошуку книг, обговорення прочитаного, ведення 
списку улюблених творів і взаємодії з іншими читачами. 
До основних недоліків частини існуючих книжкових web-ресурсів 
можна віднести: 
– розділення функцій каталогу, обговорень і читацьких спільнот між 
різними сервісами; 
– перевантаженість інтерфейсу великою кількістю елементів; 
– недостатню локальну орієнтацію на українського користувача; 
– обмежені можливості створення тематичних книжкових клубів; 
– відсутність або недостатню деталізацію особистого профілю 
користувача; 
– недостатню кількість інструментів для відображення читацької 
активності; 
– відсутність зручної адміністративної панелі для керування контентом. 
Розробка web-сайту «Книжковий клуб» дозволяє вирішити зазначені 
проблеми шляхом створення єдиного ресурсу, який поєднує каталог книг, 
обговорення, клуби, профіль користувача та адміністративне керування. Така 
структура забезпечує логічний поділ інформації та дає змогу користувачеві 
швидко переходити між основними розділами сайту. 
Розроблюваний сайт містить головну сторінку, каталог книг, сторінку 
обговорень, сторінку книжкових клубів, адміністративну панель і профіль 
користувача. Головна сторінка призначена для загального ознайомлення з 
ресурсом, відображення статистичних показників, книги місяця та популярних 
обговорень. Каталог книг забезпечує перегляд книжкових карток, пошук і 
фільтрацію. Розділ обговорень дає змогу користувачам брати участь у 
літературних дискусіях. Сторінка клубів дозволяє переглядати тематичні 
читацькі об’єднання. Профіль користувача відображає персональну 
статистику, досягнення, прочитані книги, улюблені твори та клуби. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  12 
 
Адміністративна панель забезпечує керування книгами, обговореннями, 
клубами та статистикою. 
Доцільність розробки також пояснюється необхідністю підвищення 
зручності користувацької взаємодії. Наявність пошуку та фільтрів у каталозі 
спрощує вибір книги, а система обговорень і клубів сприяє формуванню 
читацької спільноти. Профіль користувача дозволяє бачити власну активність 
на сайті, а досягнення створюють додаткову мотивацію до читання. 
Адміністративна панель є важливою складовою системи, оскільки дає змогу 
оновлювати книжковий контент і підтримувати актуальність ресурсу без 
прямого редагування програмного коду. 
Таким чином, створення web-сайту «Книжковий клуб» є актуальним і 
практично доцільним рішенням, оскільки воно дозволяє об’єднати 
інформаційний каталог, соціальну взаємодію, персональний кабінет і 
адміністрування в межах однієї web-орієнтованої інформаційної системи. 
 
1.3. Чинники, які впливають на розробку книжкового web-ресурсу 
 
Процес розробки книжкового web-ресурсу залежить від сукупності 
функціональних, інформаційних, технічних, дизайнерських та організаційних 
чинників. Їх урахування дозволяє створити сайт, який буде зручним для 
користувачів, зрозумілим у навігації, стабільним у роботі та придатним для 
подальшого розширення. 
Одним із головних чинників є визначення цільової аудиторії. Web-сайт 
«Книжковий клуб» орієнтований на користувачів, які цікавляться читанням, 
шукають нові книги, хочуть обговорювати літературні твори, зберігати 
улюблені книги та долучатися до читацьких клубів. До потенційної аудиторії 
належать школярі, студенти, дорослі читачі, учасники літературних спільнот, 
користувачі, які читають українську класику, сучасну прозу, поезію або інші 
жанри. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  13 
 
Важливим чинником є структура сайту. Вона повинна бути логічною, 
зрозумілою та не перевантаженою. Для книжкового web-ресурсу доцільним є 
поділ на окремі сторінки: головна, каталог, обговорення, клуби, 
адміністративна панель і профіль користувача. Такий підхід дозволяє 
користувачеві швидко знайти необхідний розділ і не витрачати зайвий час на 
пошук потрібної інформації. 
Наступним чинником є якість користувацького інтерфейсу. Дизайн 
книжкового сайту повинен відповідати його тематиці, бути спокійним, 
читабельним і зручним для тривалого перегляду. Для web-сайту «Книжковий 
клуб» використано світлу мінімалістичну тему з кремово-бежевим фоном, 
коричневими акцентами, акуратними картками та достатніми відступами між 
елементами. Така візуальна стилістика відповідає книжковій тематиці, не 
відволікає користувача від контенту та створює асоціацію зі спокійним 
читацьким середовищем. 
Окрему роль відіграє адаптивність. Користувачі можуть переглядати 
книжковий каталог, обговорення або профіль не лише з комп’ютера, а й зі 
смартфона чи планшета. Тому сайт повинен коректно відображатися на різних 
пристроях, зберігати читабельність тексту, доступність кнопок і логічне 
розташування карток. Адаптивність впливає на загальну якість web-ресурсу та 
рівень зручності користування. 
Важливим інформаційним чинником є структура книжкового контенту. 
Картка книги повинна містити достатньо даних для швидкого ознайомлення: 
назву, автора, жанр, рейтинг, короткий опис і зображення. Для користувача 
також важливо мати кнопки швидкої дії, зокрема читання, додавання до 
улюбленого або позначення книги як прочитаної. Такий підхід робить каталог 
не просто списком книг, а інтерактивним елементом системи. 
Суттєве значення має організація комунікації між користувачами. Розділ 
обговорень дозволяє створювати теми, переглядати категорії, відповідати на 
повідомлення та ставити лайки. Книжкові клуби дають змогу об’єднувати 
користувачів за інтересами, переглядати кількість учасників, тематику клубу, 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  14 
 
книги клубу й дату створення. Це сприяє формуванню спільноти та підвищує 
цінність сайту для користувачів, які хочуть не лише переглядати книги, а й 
обговорювати їх. 
Безпека також є важливим чинником під час розробки. Система повинна 
розмежовувати можливості звичайного користувача й адміністратора. 
Користувач має працювати з каталогом, обговореннями, клубами та власним 
профілем, тоді як адміністратор повинен мати доступ до керування книгами, 
обговореннями, клубами та статистикою. Такий поділ ролей допомагає 
уникнути несанкціонованого редагування контенту. 
Ще одним чинником є зручність адміністрування. Книжковий web-
ресурс потребує оновлення контенту: додавання нових книг, редагування 
даних, перегляду обговорень, контролю клубів і аналізу статистики. Саме тому 
адміністративна панель є важливою складовою сайту. Вона дозволяє 
підтримувати актуальність ресурсу та спрощує подальший супровід системи. 
Також необхідно враховувати швидкодію web-сайту. Каталог книг може 
містити значну кількість карток і зображень, тому важливо оптимізувати 
структуру сторінок, компоненти інтерфейсу та графічний контент. Повільне 
завантаження сторінок може негативно впливати на користувацький досвід, 
особливо під час перегляду каталогу або профілю користувача. 
Отже, успішна реалізація web-сайту «Книжковий клуб» потребує 
комплексного підходу, який враховує потреби цільової аудиторії, структуру 
сайту, якість інтерфейсу, адаптивність, інформаційне наповнення, комунікацію 
між користувачами, безпеку, швидкодію та зручність адміністрування. 
 
1.4. Аналітичний огляд існуючих книжкових web-ресурсів 
 
Проведення аналітичного огляду існуючих книжкових web-ресурсів 
дозволяє визначити основні підходи до подання книжкового контенту, виявити 
сильні та слабкі сторони аналогів, а також сформувати вимоги до 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  15 
 
розроблюваної системи. Для аналізу було обрано ресурси, які виконують 
подібні або частково подібні функції до web-сайту «Книжковий клуб»: 
Goodreads, LibraryThing, Google Books та Yakaboo. 
Обрані аналоги відрізняються за масштабом і призначенням. Goodreads 
є міжнародною книжковою соціальною платформою, орієнтованою на пошук 
книг, оцінювання, рецензії та спільноту читачів. LibraryThing призначений для 
каталогізації особистих книжкових колекцій і відстеження читання. Google 
Books забезпечує пошук і перегляд відомостей про книги у великому 
цифровому індексі. Yakaboo є українською книжковою платформою та онлайн-
книгарнею. Такий вибір аналогів дозволяє оцінити різні підходи до організації 
книжкового web-ресурсу. 
Під час аналізу книжкових web-ресурсів доцільно використати такі 
об’єктивні критерії: 
– наявність каталогу книг; 
– можливість пошуку за назвою або автором; 
– наявність фільтрації за параметрами; 
– наявність карток книг; 
– відображення автора, рейтингу та короткого опису; 
– наявність обкладинок або зображень книг; 
– можливість додавання книг до персонального списку; 
– наявність оцінок або рецензій користувачів; 
– можливість участі в обговореннях; 
– наявність книжкових клубів або читацьких спільнот; 
– наявність профілю користувача; 
– наявність елементів читацької статистики; 
– наявність адміністративного керування контентом; 
– адаптація для різних пристроїв; 
– орієнтація на українського користувача. 
 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  16 
 
Goodreads 
 
 
 
Рисунок 1.1 – Головна сторінка ресурсу Goodreads 
 
Goodreads є міжнародною книжковою платформою, яка позиціонується 
як спільнота читачів і сервіс для пошуку наступної книги для читання [9]. 
Ресурс дозволяє користувачам шукати книги, переглядати оцінки, додавати 
твори до власних списків, залишати рецензії та стежити за читацькою 
активністю інших користувачів. Основною перевагою Goodreads є поєднання 
каталогу книг із соціальними функціями. 
Ресурс має велику базу книг, систему рейтингів і відгуків, можливість 
формування персональних списків читання та взаємодії з іншими читачами. 
Для користувача це є перевагою, оскільки він може орієнтуватися на оцінки 
спільноти та знаходити нові книги за інтересами. Goodreads демонструє 
важливість соціальної складової у книжкових web-ресурсах, адже думки інших 
читачів часто впливають на вибір літератури. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  17 
 
Водночас Goodreads має певні недоліки у контексті розроблюваного web-
сайту. Платформа є глобальною та не орієнтована саме на український 
літературний простір. Крім того, велика кількість функцій і сторінок може 
ускладнювати сприйняття інтерфейсу для нового користувача. Для web-сайту 
«Книжковий клуб» доцільно врахувати сильні сторони Goodreads, зокрема 
рейтинги, рецензії, персональні списки й читацьку спільноту, але реалізувати 
простішу структуру, локальну українську подачу та зручні клуби за 
інтересами. 
 
LibraryThing 
 
 
 
Рисунок 1.2 – Головна сторінка ресурсу LibraryThing 
 
LibraryThing є web-сервісом для каталогізації книг, відстеження читання 
та організації особистої бібліотеки [10]. Основне призначення ресурсу полягає 
у створенні цифрового каталогу власної книжкової колекції. Користувач може 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  18 
 
додавати книги, систематизувати їх, переглядати інформацію про твори та 
вести облік прочитаного. 
Перевагою LibraryThing є його орієнтація на впорядкування книжкових 
колекцій. Такий підхід є корисним для користувачів, які мають багато книг і 
хочуть систематизувати власну бібліотеку. Сервіс також демонструє 
важливість персонального простору користувача, де можна зберігати 
інформацію про прочитані або заплановані до читання книги. 
Недоліком LibraryThing у межах даної предметної області є те, що сервіс 
більше зосереджений на каталогізації, ніж на активній взаємодії між 
користувачами у форматі обговорень і клубів. Для web-сайту «Книжковий 
клуб» доцільно використати ідею особистого книжкового простору та 
статистики, але доповнити її обговореннями, книжковими клубами, 
досягненнями та адміністративним керуванням. 
 
Google Books 
 
 
 
Рисунок 1.3 – Головна сторінка ресурсу Google Books 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  19 
 
Google Books є сервісом для пошуку інформації про книги та перегляду 
книжкового контенту онлайн. На офіційній сторінці зазначено, що сервіс дає 
змогу шукати книги, переглядати їх онлайн, отримувати інформацію про 
видання та переходити до купівлі або пошуку книги в бібліотеці [11]. 
Основною перевагою Google Books є великий обсяг проіндексованих 
книжкових даних і зручний пошук. 
Позитивною рисою Google Books є можливість швидко знаходити книги 
за назвою, автором або ключовими словами. Сервіс має широку базу видань і 
може бути корисним для користувачів, які шукають бібліографічну 
інформацію або хочуть ознайомитися з окремими фрагментами книги. 
Водночас Google Books не є повноцінною читацькою спільнотою. Його 
основна функція полягає у пошуку та перегляді інформації, а не в організації 
обговорень, клубів або персональних досягнень користувача. Для web-сайту 
«Книжковий клуб» доцільно врахувати зручність пошуку та структурування 
книжкової інформації, але доповнити ці можливості соціальною взаємодією, 
профілем користувача та адміністративною панеллю. 
 
Yakaboo 
 
 
 
Рисунок 1.4 – Головна сторінка ресурсу Yakaboo 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  20 
 
Yakaboo є українською книжковою платформою та онлайн-книгарнею, 
яка працює на ринку електронної комерції з 2004 року [12]. Платформа надає 
користувачам можливість переглядати книги, шукати видання, знайомитися з 
асортиментом і купувати книжкову продукцію. Важливою перевагою Yakaboo 
є орієнтація на українського користувача та великий вибір книг. 
Сильними сторонами Yakaboo є локальна спрямованість, українська 
мова інтерфейсу, структурований каталог, наявність карток товарів, 
обкладинок, описів і можливість придбання книг. Для користувачів, які 
шукають книги українською мовою або видання українських авторів, такий 
ресурс є практичним і зрозумілим. 
Разом із тим Yakaboo насамперед виконує функцію онлайн-книгарні. 
Основний акцент зроблено на продажу книжкової продукції, а не на створенні 
читацьких клубів, веденні обговорень, відображенні досягнень або 
формуванні повноцінної соціальної взаємодії між читачами. Для web-сайту 
«Книжковий клуб» доцільно врахувати локальну українську подачу, зручність 
каталогу й карток книг, але зосередити систему не на продажу, а на читацькій 
активності, обговореннях і спільнотах. 
 
 
 
 
 
 
 
 
 
 
 
 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  21 
 
Web-сайт «Книжковий клуб» 
 
 
Рисунок 1.5 – Головна сторінка web-сайту «Книжковий клуб» 
 
Розроблюваний web-сайт «Книжковий клуб» орієнтований на 
об’єднання користувачів навколо читання та літературного обговорення. На 
відміну від ресурсів, які спеціалізуються лише на продажу книг, пошуку 
бібліографічної інформації або каталогізації особистої бібліотеки, сайт 
поєднує каталог книг, обговорення, клуби, профіль користувача, досягнення та 
адміністративну панель. 
Особливістю ресурсу є простий і зрозумілий інтерфейс у світлій 
мінімалістичній темі. Верхнє меню містить основні розділи: «Головна», 
«Каталог», «Обговорення», «Клуби», «Адмін». На головній сторінці 
розміщено вітальний блок, статистику, книгу місяця та популярні обговорення. 
У каталозі реалізовано пошук, фільтри за жанром і рейтингом, картки книг із 
кнопками взаємодії. Сторінка обговорень містить категорії, теми, лайки, 
коментарі та кнопку створення нової теми. Сторінка клубів дає змогу 
переглядати книжкові спільноти, кількість учасників, книги клубу, дату 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  22 
 
створення та автора. У профілі користувача відображаються статистика, 
досягнення, прочитані книги, улюблені книги та клуби. Адміністративна 
панель забезпечує керування книгами, обговореннями, клубами та 
статистикою. 
 
Таблиця 1.1 
Порівняння аналогів книжкових web-ресурсів 
Критерії Книжковий 
порівняння Goodreads LibraryThing Google Books Yakaboo клуб 
Орієнтація на 
книжкову 
тематику Так Так Так Так Так 
Каталог книг Так Так Так Так Так 
Пошук книг Так Так Так Так Так 
Фільтрація за 
параметрами Так Так Частково Так Так 
Картки книг Так Так Так Так Так 
Відображення 
автора та опису Так Так Так Так Так 
Рейтинг книг Так Частково Частково Частково Так 
Збереження книг 
у персональний 
список Так Так Частково Частково Так 
Позначення 
прочитаних книг Так Так Частково Ні Так 
Обговорення 
книг Так Частково Ні Частково Так 
Книжкові клуби 
або читацькі 
спільноти Так Частково Ні Ні Так 
Профіль 
користувача Так Так Так Так Так 
Досягнення 
користувача Частково Ні Ні Ні Так 
Адміністративна 
панель для 
керування Не Не 
контентом визначено Не визначено Не визначено визначено Так 
Орієнтація на 
українського 
користувача Частково Ні Частково Так Так 
Простота 
структури для 
користувача-
початківця Частково Частково Так Частково Так 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  23 
 
За результатами порівняння встановлено, що всі розглянуті аналоги 
мають корисні функціональні можливості для книжкової сфери. Goodreads є 
найближчим за соціальною складовою, оскільки поєднує каталог книг, оцінки, 
рецензії та читацьку спільноту. Проте ресурс є глобальним і не має локальної 
орієнтації саме на українського користувача. 
LibraryThing вирізняється можливостями каталогізації особистої 
бібліотеки та відстеження читання. Його перевагою є систематизація 
книжкових колекцій, але соціальна взаємодія та клубна складова не є основним 
акцентом ресурсу. 
Google Books має сильну пошукову складову та велику базу книжкової 
інформації. Він корисний для пошуку книг і перегляду відомостей про 
видання, однак не забезпечує повноцінної взаємодії між читачами, створення 
клубів або ведення досягнень користувача. 
Yakaboo є найбільш локально орієнтованим ресурсом серед розглянутих 
аналогів, оскільки працює з українським книжковим ринком і має зручний 
каталог книг. Водночас основна мета платформи полягає у продажу книжкової 
продукції, а не у створенні читацької спільноти. 
Порівняно з розглянутими аналогами, web-сайт «Книжковий клуб» має 
перевагу у поєднанні локальної української тематики, простого інтерфейсу, 
каталогу книг, обговорень, книжкових клубів, профілю користувача, досягнень 
і адміністративного керування. Такий підхід дає змогу створити не лише 
інформаційний каталог, а й повноцінне середовище для читацької взаємодії. 
Таким чином, аналіз аналогів показав, що розробка web-сайту 
«Книжковий клуб» є обґрунтованою. Власна система повинна поєднати сильні 
сторони існуючих рішень: соціальну складову Goodreads, каталогізацію 
LibraryThing, пошукову логіку Google Books і локальну українську подачу 
Yakaboo. Водночас розроблюваний сайт має усунути окремі недоліки аналогів, 
зокрема складність структури, розділення функцій між різними платформами, 
недостатню клубну взаємодію та відсутність єдиного простору для профілю 
користувача, обговорень і адміністрування. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  24 
 
Висновки до розділу 1 
 
У першому розділі кваліфікаційної роботи було розглянуто предметну 
область книжкових web-ресурсів і визначено їх основне призначення. Було 
встановлено, що такі системи забезпечують користувачам доступ до 
інформації про книги, авторів, жанри, рейтинги, відгуки, читацькі списки та 
спільноти. 
Також було обґрунтовано доцільність розробки web-сайту «Книжковий 
клуб». Визначено, що потреба у такій системі зумовлена необхідністю 
створення єдиного середовища для перегляду каталогу книг, пошуку й 
фільтрації літератури, участі в обговореннях, долучення до книжкових клубів, 
ведення профілю користувача та керування контентом через адміністративну 
панель. 
У процесі аналізу було визначено основні чинники, які впливають на 
розробку книжкового web-ресурсу. До них належать цільова аудиторія, 
структура сайту, якість користувацького інтерфейсу, адаптивність, організація 
книжкового контенту, комунікація між користувачами, безпека, швидкодія та 
зручність адміністрування. Було встановлено, що створення такого ресурсу 
потребує комплексного підходу, який охоплює технічні, функціональні, 
дизайнерські та організаційні аспекти. 
У межах аналітичного огляду було досліджено існуючі книжкові web-
ресурси: Goodreads, LibraryThing, Google Books та Yakaboo. Для порівняння 
було використано об’єктивні критерії, зокрема наявність каталогу книг, 
пошуку, фільтрації, карток книг, рейтингу, персональних списків, обговорень, 
книжкових клубів, профілю користувача, досягнень, адміністративного 
керування та орієнтації на українського користувача. 
За результатами порівняння встановлено, що кожен із розглянутих 
аналогів має власні переваги. Goodreads вирізняється соціальною складовою 
та системою рецензій, LibraryThing забезпечує зручну каталогізацію особистої 
бібліотеки, Google Books має потужну пошукову складову, а Yakaboo 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  25 
 
орієнтований на український книжковий ринок. Водночас аналіз показав, що 
ці ресурси не повністю поєднують просту структуру, українську локальну 
подачу, книжкові клуби, обговорення, досягнення користувача та 
адміністративне керування контентом. 
Отже, результати першого розділу дозволили сформувати основні 
напрями подальшої розробки web-сайту «Книжковий клуб». У процесі аналізу 
предметної області було визначено, що сучасний книжковий web-ресурс має 
забезпечувати не лише подання інформації про книги, а й зручну взаємодію 
користувача із системою. Особливо важливими є швидкий пошук потрібної 
книги, зрозуміла структура сторінок, адаптивність інтерфейсу, наявність 
персонального профілю, підтримка обговорень і можливість участі в 
книжкових клубах. 
На основі проведеного аналізу доцільно реалізувати каталог книг, 
систему пошуку та фільтрації, картки книг із детальним описом, розділ 
обговорень, сторінку книжкових клубів, профіль користувача, систему 
улюблених і прочитаних книг, досягнення та адміністративну панель. Окрему 
увагу необхідно приділити простоті інтерфейсу, локальній українській подачі, 
зручності користувацької взаємодії та можливості подальшого розширення 
функціоналу. 
Отримані результати є основою для подальшого обґрунтування 
технічного завдання та розробки структури інформаційної системи. Вони 
дають змогу визначити функціональні вимоги до майбутнього web-ресурсу, 
сформувати логіку взаємодії користувача із сайтом, обрати необхідні засоби 
реалізації та перейти до етапу проєктування основних сторінок, модулів і 
компонентів web-сайту «Книжковий клуб». 
  
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  26 
 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 
 
2.1. Призначення web-сайту «Книжковий клуб» 
 
Розробка web-сайту «Книжковий клуб» спрямована на створення 
сучасного цифрового середовища для перегляду книжкового каталогу, пошуку 
літератури, участі користувачів в обговореннях, створення читацьких клубів, 
ведення особистого профілю та адміністрування контенту. Такий web-сайт має 
забезпечувати користувачам зручний доступ до структурованої інформації про 
книги та створювати умови для взаємодії між читачами. 
Основне призначення web-сайту «Книжковий клуб» полягає в 
інформаційній і комунікаційній підтримці користувачів, які цікавляться 
читанням, шукають нові книги, бажають обговорювати літературні твори та 
долучатися до тематичних читацьких спільнот. Сайт орієнтований на 
користувачів, яким необхідно швидко переглянути доступні книги, знайти твір 
за назвою або жанром, оцінити рейтинг, додати книгу до улюбленого, 
позначити її як прочитану, перейти до обговорення або переглянути власну 
читацьку активність у профілі. 
Актуальність створення такого web-сайту підтверджується сучасними 
тенденціями цифровізації культурного та освітнього середовища. В Україні 
розвиток читання визначено одним із важливих напрямів культурної політики. 
У Стратегії розвитку читання на період до 2032 року «Читання як життєва 
стратегія» наголошено на необхідності формування сталої читацької культури, 
підвищення доступності книжок і розвитку середовища, яке сприяє читанню 
[1]. Отже, створення web-ресурсу, який об’єднує каталог книг, обговорення та 
клуби читачів, відповідає потребам сучасного інформаційного суспільства. 
Особливістю розроблюваного сайту є поєднання кількох 
функціональних модулів. До них належать головна сторінка, каталог книг, 
сторінка обговорень, сторінка книжкових клубів, профіль користувача та 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  27 
 
адміністративна панель. Окремо реалізуються функції пошуку, фільтрації, 
перегляду книжкових карток, додавання книг до улюбленого, позначення 
прочитаних творів, участі в обговореннях, перегляду досягнень і керування 
контентом. Така структура дає змогу створити не лише інформаційний сайт, а 
й повноцінну web-орієнтовану систему для читацької взаємодії. 
Web-сайт «Книжковий клуб» може бути корисним для користувачів, які 
регулярно читають книги, шукають нові твори, хочуть брати участь у 
літературних дискусіях або вести власну читацьку статистику. Наявність 
каталогу, фільтрів, обговорень, клубів і профілю користувача робить процес 
вибору книги більш зручним, а взаємодію з літературним контентом — більш 
організованою. 
Цінність web-сайту «Книжковий клуб» полягає в таких можливостях: 
– надання доступу до каталогу книг; 
– перегляд карток книг із назвою, автором, жанром, рейтингом, описом і 
зображенням обкладинки; 
– пошук книг за назвою або іншими параметрами; 
– фільтрація книжкового контенту за жанром і рейтингом; 
– додавання книг до улюбленого; 
– позначення книг як прочитаних; 
– перегляд популярних обговорень; 
– створення та перегляд тем для дискусій; 
– участь у книжкових клубах; 
– перегляд профілю користувача, статистики, досягнень, улюблених і 
прочитаних книг; 
– адміністрування книг, обговорень, клубів і статистичних даних. 
Отже, web-сайт «Книжковий клуб» є інструментом для систематизації 
книжкового контенту, підтримки читацької активності та забезпечення 
взаємодії між користувачами в межах єдиного цифрового середовища. 
 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  28 
 
2.2. Вимоги до дизайну web-сайту «Книжковий клуб» 
 
Дизайн web-сайту має важливе значення, оскільки саме інтерфейс 
формує перше враження користувача та впливає на зручність подальшої 
роботи із системою. Для книжкового ресурсу недостатньо лише привабливого 
зовнішнього вигляду. Сайт повинен бути зрозумілим, логічно структурованим, 
адаптивним, читабельним і зручним для тривалого перегляду текстової та 
візуальної інформації. 
Web-сайт «Книжковий клуб» доцільно оформлювати у стилі, який 
відповідає тематиці читання, книжкових клубів і спокійного інтелектуального 
дозвілля. Фактичний дизайн сайту виконано у світлій мінімалістичній темі з 
кремово-бежевим фоном і коричневими акцентами. Така кольорова гама 
відповідає книжковій тематиці, створює асоціацію з паперовими сторінками, 
бібліотечним простором і комфортним середовищем для читання. 
Під час розробки дизайну необхідно враховувати принципи 
людиноорієнтованого проєктування. Відповідно до ISO 9241-210, 
людиноорієнтований підхід передбачає врахування потреб користувачів, 
контексту використання та зручності взаємодії з інтерактивною системою [13]. 
Для web-сайту «Книжковий клуб» це означає, що структура сторінок, кнопки, 
картки книг, фільтри, меню та профіль користувача повинні бути зрозумілими 
для різних категорій читачів. 
Основними вимогами до дизайну web-сайту «Книжковий клуб» є такі 
положення. 
1. Зрозуміла структура інтерфейсу. Користувач повинен швидко 
орієнтуватися в основних розділах сайту: «Головна», «Каталог», 
«Обговорення», «Клуби», «Адмін» і профіль користувача. 
2. Єдиний візуальний стиль. Усі сторінки повинні мати узгоджене 
оформлення, спільну кольорову гаму, однакову логіку розміщення 
кнопок, карток, форм, таблиць і навігаційних елементів. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  29 
 
3. Адаптивність. Сайт повинен коректно відображатися на комп’ютерах, 
ноутбуках, планшетах і смартфонах. Відповідно до підходів адаптивного 
web-дизайну, сторінки мають змінювати свій макет залежно від ширини 
екрана та характеристик пристрою [14]. 
4. Читабельність тексту. Назви книг, імена авторів, описи, теми обговорень, 
елементи профілю та адміністративні таблиці повинні мати достатній 
розмір шрифту, правильні відступи й контрастність. 
5. Візуальне виділення ключових дій. Кнопки «Читати», «Улюблене», 
«Прочитано», «Створити тему», «Створити клуб», «Додати книгу», 
«Редагувати» та «Видалити» мають бути помітними й розташованими у 
логічних місцях. 
6. Зручність роботи з картками книг. Картка книги повинна містити стислу, 
але достатню інформацію, щоб користувач міг швидко оцінити твір і 
виконати потрібну дію. 
7. Використання якісного візуального контенту. Зображення обкладинок 
книг мають відповідати змісту карток, бути чіткими та не 
перевантажувати сторінку. 
8. Доступність інтерфейсу. Елементи керування повинні бути зрозумілими 
для користувачів із різним рівнем цифрових навичок. Рекомендації 
WCAG 2.2 визначають підходи до підвищення доступності web-
контенту для ширшого кола користувачів [15]. 
9. Мінімізація зайвих елементів. Інтерфейс не повинен бути 
перевантаженим, оскільки надмірна кількість блоків ускладнює пошук 
потрібної інформації. 
10. Логічне розміщення навігації. Основне меню має бути доступним з усіх 
ключових сторінок сайту, щоб користувач міг швидко перейти до 
каталогу, обговорень, клубів або профілю. 
Таким чином, дизайн web-сайту «Книжковий клуб» повинен забезпечувати 
не лише естетичну привабливість, а й ефективну взаємодію користувача з 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  30 
 
каталогом книг, обговореннями, клубами, профілем та адміністративною 
панеллю. 
 
2.3. Структура сторінок web-сайту «Книжковий клуб» 
 
Структура web-сайту визначає логіку розміщення сторінок, 
функціональних модулів і зв’язків між ними. Для книжкового ресурсу 
важливо, щоб користувач міг швидко перейти від головної сторінки до 
каталогу книг, обговорень, клубів, адміністративної панелі або власного 
профілю. Зручна структура скорочує кількість зайвих дій і підвищує 
ефективність використання сайту. 
Основна структура web-сайту «Книжковий клуб» включає такі розділи: 
«Головна», «Каталог», «Обговорення», «Клуби», «Адмін» і профіль 
користувача. Також у системі передбачено окремі функціональні елементи для 
пошуку, фільтрації, роботи з улюбленими книгами, позначення прочитаних 
творів, перегляду статистики та керування контентом. 
Головна сторінка виконує ознайомчу та презентаційну функцію. Вона 
знайомить користувача з призначенням ресурсу, містить hero-блок із 
привітанням «Ласкаво просимо до Книжкового клубу», статистичні 
показники, блок «Книга місяця», популярні обговорення та футер. На головній 
сторінці користувач отримує загальне уявлення про можливості сайту та може 
швидко перейти до інших розділів. 
Сторінка «Каталог» є одним із головних функціональних розділів сайту. 
Вона містить список книг у вигляді карток. Кожна картка може містити назву 
книги, автора, жанр, рейтинг, короткий опис, зображення обкладинки та 
кнопки взаємодії. Наявність каталогу дозволяє користувачеві швидко 
переглядати доступні книги та обирати твори відповідно до власних інтересів. 
У каталозі реалізовано пошук і фільтрацію. Пошук дає змогу знаходити 
книги за назвою або ключовими словами. Фільтри дозволяють відбирати книги 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  31 
 
за жанром і рейтингом. Такий підхід покращує зручність використання 
каталогу, оскільки користувач не переглядає весь список вручну, а одразу 
звужує результати відповідно до власних потреб. 
Сторінка «Обговорення» призначена для комунікації між користувачами. 
Вона містить тематичні категорії, список тем, інформацію про кількість лайків 
і коментарів, а також кнопку створення нової теми. Цей розділ є важливим для 
формування читацької спільноти, оскільки користувачі можуть обмінюватися 
думками про книги, авторів, жанри та літературні події. 
Сторінка «Клуби» призначена для перегляду та участі в книжкових 
спільнотах. Клуби представлені у вигляді карток, які містять назву, опис, теги, 
кількість учасників, кількість книг у клубі, дату створення, автора та кнопку 
взаємодії. Така структура дозволяє користувачам обирати тематичні спільноти 
відповідно до власних читацьких інтересів. 
Сторінка профілю користувача призначена для персоналізації взаємодії 
із сайтом. У профілі відображаються аватар, статистика прочитаних книг, 
кількість рецензій, улюблених творів і обговорень, досягнення, останні 
прочитані книги, улюблені книги та мої клуби. Такий розділ дозволяє 
користувачеві бачити власну активність і повертатися до раніше обраного 
контенту. 
Окремим структурним елементом web-сайту «Книжковий клуб» є 
адміністративна панель. Вона призначена для керування основним 
інформаційним наповненням сайту, зокрема книгами, обговореннями, клубами 
та статистичними даними. За допомогою адміністративної панелі 
адміністратор може додавати, редагувати та видаляти книги, переглядати 
таблиці даних і контролювати загальний стан ресурсу. 
Наявність адміністративної панелі значно спрощує процес супроводу 
web-сайту, оскільки дозволяє оновлювати дані без безпосереднього 
редагування програмного коду. Це підвищує зручність експлуатації системи, 
зменшує ризик технічних помилок і дає змогу оперативно керувати книжковим 
контентом. Таким чином, адміністративна панель є важливим інструментом 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  32 
 
для підтримки стабільної роботи web-ресурсу та забезпечення його 
інформаційної актуальності. 
 
 
 
Рисунок 2.1 – Навігаційна структура web-сайту «Книжковий клуб» 
 
2.4. Навігація web-сайту «Книжковий клуб» 
 
Навігація є одним із ключових елементів web-сайту, оскільки вона 
визначає, наскільки швидко і зручно користувач може знаходити потрібну 
інформацію. Для книжкового ресурсу це особливо важливо, адже користувач 
може шукати книгу, переходити до обговорень, переглядати клуби, відкривати 
профіль або працювати з адміністративною панеллю. Якщо навігація 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  33 
 
побудована логічно, користувач швидше переходить до потрібної дії та менше 
часу витрачає на пошук інформації. 
У web-сайті «Книжковий клуб» основна навігація реалізується через 
верхнє меню, яке містить головні розділи сайту. До нього входять сторінки 
«Головна», «Каталог», «Обговорення», «Клуби» та «Адмін». Додатково 
передбачено кнопки профілю користувача, виходу з облікового запису та 
перемикач теми. Така структура є зрозумілою для користувача, оскільки кожен 
пункт меню має конкретне призначення. 
Розділ «Головна» дозволяє повернутися до стартової сторінки сайту. Він 
використовується для загального ознайомлення з ресурсом, його призначенням 
і основними можливостями. 
Розділ «Каталог» відкриває сторінку з книжковими картками. На цій 
сторінці користувач може переглядати книги, використовувати пошук, 
застосовувати фільтри за жанром і рейтингом, додавати книги до улюбленого 
або позначати їх як прочитані. 
Розділ «Обговорення» призначений для перегляду літературних 
дискусій. Через нього користувач може відкривати теми, переглядати категорії, 
оцінювати повідомлення за допомогою лайків, читати коментарі або 
створювати нову тему. 
Розділ «Клуби» забезпечує доступ до читацьких спільнот. Користувач 
може переглядати клуби, бачити кількість учасників, теги, книги клубу, дату 
створення та автора, а також долучатися до клубу або залишати його. 
Розділ «Адмін» призначений для доступу до адміністративної панелі. 
Він використовується адміністратором для керування книгами, 
обговореннями, клубами та статистикою. Доступ до такого розділу повинен 
бути обмеженим відповідно до ролі користувача. 
Профіль користувача відкриває персональну сторінку. У цьому розділі 
користувач може переглядати власну статистику, досягнення, останні 
прочитані книги, улюблені книги та клуби. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  34 
 
Окрім основного меню, на сайті використовуються й інші навігаційні 
елементи: 
– пошук книг, який дає можливість швидко знайти потрібний твір; 
– фільтри за жанром і рейтингом, які допомагають звузити результати 
каталогу; 
– кнопки дії «Читати», «Улюблене», «Прочитано», «Створити тему», 
«Створити клуб», «Додати книгу»; 
– посилання між сторінками, які забезпечують логічний перехід від 
загальної інформації до конкретного розділу; 
– навігація в адміністративній панелі, яка дозволяє переходити між 
вкладками «Книги», «Обговорення», «Клуби» та «Статистика»; 
– перемикач теми, який дає можливість змінити візуальний режим 
відображення інтерфейсу. 
Грамотно побудована навігація зменшує кількість зайвих дій, покращує 
зручність користування ресурсом і дозволяє користувачеві швидко перейти до 
вибору книги, участі в обговоренні, перегляду клубів або роботи з особистим 
профілем. 
 
2.5. Наповнення сторінок web-сайту «Книжковий клуб» 
 
Контент книжкового web-сайту повинен бути інформативним, 
структурованим, актуальним і корисним для користувача. Основне завдання 
наповнення полягає в тому, щоб допомогти користувачеві зрозуміти 
можливості сайту, знайти потрібну книгу, переглянути її основні 
характеристики, перейти до обговорень, долучитися до клубу або 
проаналізувати власну читацьку активність. 
На головній сторінці розміщується загальна інформація про ресурс 
«Книжковий клуб», його призначення та основні переваги. Ця сторінка має 
зацікавити користувача та мотивувати його перейти до каталогу, обговорень 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  35 
 
або клубів. Доцільно розміщувати на ній hero-блок, короткий опис проєкту, 
статистичні показники, блок «Книга місяця», популярні обговорення та футер 
із додатковою інформацією. 
На сторінці «Каталог» подається список доступних книг. Кожна книга 
представлена у вигляді картки, яка може містити: 
– зображення обкладинки; 
– назву книги; 
– автора; 
– жанр; 
– рейтинг; 
– короткий опис; 
– кнопку «Читати»; 
– кнопку додавання до улюбленого; 
– кнопку позначення книги як прочитаної. 
Таке наповнення дозволяє користувачеві швидко оцінити книгу та 
прийняти рішення щодо подальшої взаємодії з нею. Наявність пошуку та 
фільтрів робить каталог більш зручним і функціональним. 
На сторінці «Обговорення» розміщуються теми, пов’язані з книгами, 
авторами, жанрами та читацькими враженнями. Кожна тема може містити 
назву, категорію, короткий опис, кількість лайків, кількість коментарів і 
додаткові дані про активність. Наявність кнопки створення нової теми 
дозволяє користувачам ініціювати власні обговорення. 
Сторінка «Клуби» містить картки книжкових клубів. До складу картки 
клубу можуть входити назва, опис, тематичні теги, кількість учасників, 
кількість книг, дата створення, автор клубу та кнопка взаємодії. Такий розділ 
підвищує соціальну цінність ресурсу, оскільки користувачі можуть 
об’єднуватися за спільними літературними інтересами. 
Сторінка профілю користувача містить персональні дані та інформацію 
про взаємодію користувача із сайтом. У цьому розділі можуть 
відображатися: 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  36 
 
– аватар користувача; 
– статистика прочитаних книг; 
– кількість рецензій; 
– кількість улюблених книг; 
– кількість обговорень; 
– досягнення; 
– останні прочитані книги; 
– улюблені книги; 
– мої клуби. 
Наявність профілю робить використання сайту більш персоналізованим. 
Користувач може бачити власну активність, повертатися до улюблених книг і 
відстежувати участь у клубах. 
В адміністративній частині сайту наповнення організоване у вигляді 
таблиць, вкладок, форм і панелей керування. Адміністратор може переглядати 
список книг, додавати нові записи, редагувати інформацію, видаляти 
застарілий контент, переглядати обговорення, контролювати клуби та 
аналізувати статистику. Така структура забезпечує зручне керування ресурсом. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  37 
 
 
 
Рисунок 2.2 – Модель наповнення та адміністрування web-сайту «Книжковий 
клуб» 
 
Таким чином, наповнення web-сайту «Книжковий клуб» охоплює як 
інформаційну частину для користувачів, так і адміністративну частину для 
керування книжковим контентом. 
 
2.6. Адміністрування web-сайту «Книжковий клуб» 
 
Адміністрування web-сайту є важливою складовою його 
функціонування, оскільки забезпечує підтримку актуальності контенту, 
керування книгами, контроль обговорень, роботу з клубами та аналіз 
статистичних даних. Для книжкового ресурсу адміністрування повинно бути 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  38 
 
зручним, логічним і доступним для адміністратора без необхідності 
постійного втручання у програмний код. 
У web-сайті «Книжковий клуб» передбачено окрему адміністративну 
панель. Вона призначена для керування основними інформаційними та 
соціальними модулями сайту. Через адміністративну панель можна 
оновлювати каталог книг, редагувати описи, додавати нові матеріали, 
переглядати обговорення, працювати з клубами та контролювати загальну 
статистику. 
Основні функції адміністрування web-сайту «Книжковий клуб»: 
– перегляд загальної інформації про стан сайту; 
– перегляд статистики книг, користувачів, обговорень і клубів; 
– додавання нових книг; 
– редагування інформації про наявні книги; 
– видалення застарілих або помилково доданих книг; 
– перегляд списку обговорень; 
– контроль тем і користувацької активності; 
– перегляд списку книжкових клубів; 
– керування клубами; 
– аналіз активності користувачів; 
– підтримка актуальності інформаційного наповнення; 
– вихід з адміністративного облікового запису. 
Адміністративна панель дозволяє підтримувати ресурс в актуальному 
стані. Це особливо важливо для книжкового сайту, оскільки каталог книг, 
обговорення та клуби можуть постійно оновлюватися. Якщо адміністратор має 
зручний інструмент для оновлення контенту, сайт може залишатися корисним 
і актуальним для користувачів протягом тривалого часу. 
Важливою складовою адміністрування є розмежування доступу. 
Звичайний користувач повинен мати можливість переглядати каталог, 
взаємодіяти з книгами, брати участь в обговореннях, працювати з клубами та 
переглядати власний профіль. Адміністратор, у свою чергу, повинен мати 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  39 
 
розширені можливості для керування контентом. Такий поділ ролей дозволяє 
уникнути несанкціонованого редагування даних. 
Ефективна система адміністрування дозволяє зменшити витрати часу на 
супровід сайту, швидко оновлювати книжковий контент, контролювати 
активність користувачів і забезпечувати стабільну роботу web-орієнтованої 
інформаційної системи. 
 
2.7. Вимоги до прототипу web-сайту «Книжковий клуб» 
 
Прототип web-сайту є важливим етапом розробки, оскільки дозволяє 
попередньо оцінити структуру, зовнішній вигляд і функціональні можливості 
майбутньої системи. Завдяки прототипуванню можна визначити, як користувач 
буде взаємодіяти із сайтом, які сторінки є основними, які елементи потребують 
покращення та наскільки зручною є загальна логіка роботи ресурсу. 
Прототип web-сайту «Книжковий клуб» повинен враховувати як 
користувацьку частину, так і адміністративну панель. Це важливо, оскільки 
сайт передбачає не лише перегляд книжкового каталогу, а й роботу з 
обговореннями, клубами, профілем користувача, досягненнями та 
адмініструванням контенту. 
До прототипу web-сайту «Книжковий клуб» висуваються такі вимоги: 
– головна сторінка повинна містити основну інформацію про сайт, його 
призначення, статистику, книгу місяця та популярні обговорення; 
– каталог книг має відображати список доступних книг у вигляді карток 
із назвою, автором, жанром, рейтингом, описом і зображенням; 
– пошук і фільтрація повинні забезпечувати швидке знаходження 
потрібної книги за назвою, жанром або рейтингом; 
– сторінка обговорень повинна містити категорії, теми, лайки, коментарі 
та кнопку створення нової теми; 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  40 
 
– сторінка книжкових клубів повинна відображати картки клубів, теги, 
кількість учасників, кількість книг, дату створення та автора; 
– профіль користувача повинен забезпечувати доступ до статистики, 
досягнень, останніх прочитаних книг, улюблених книг і клубів; 
– адміністративна панель повинна містити інструменти для керування 
книгами, обговореннями, клубами та статистикою; 
– усі сторінки повинні коректно відображатися на різних типах 
пристроїв; 
– користувацька та адміністративна частини повинні мати узгоджену 
логіку інтерфейсу; 
– система повинна передбачати розмежування можливостей користувача 
та адміністратора; 
– кнопки, форми, картки, фільтри й таблиці мають бути зрозумілими та 
логічно розташованими; 
– прототип повинен передбачати можливість подальшого розширення 
функціоналу. 
 
 
Рисунок 2.3 – Прототип web-сайту «Книжковий клуб» 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  41 
 
Таким чином, прототип web-сайту «Книжковий клуб» дозволяє оцінити 
майбутню структуру системи, перевірити зручність навігації та сформувати 
основу для подальшої програмної реалізації. 
 
2.8. Техніко-економічне обґрунтування доцільності розробки web-
сайту «Книжковий клуб» 
 
Техніко-економічне обґрунтування є важливим етапом під час розробки 
web-орієнтованої інформаційної системи, оскільки дозволяє оцінити 
доцільність створення ресурсу з погляду технічної реалізації, трудомісткості, 
очікуваної користі, витрат часу та перспектив подальшого розвитку. Для 
книжкового web-сайту таке обґрунтування має особливе значення, оскільки 
система поєднує інформаційний каталог, користувацькі сервіси, соціальну 
взаємодію та адміністративне керування. 
Розробка web-сайту «Книжковий клуб» передбачає створення сучасної 
платформи, яка забезпечує користувачам доступ до каталогу книг, пошуку, 
фільтрації, обговорень, книжкових клубів, профілю користувача, досягнень і 
адміністративної панелі. Саме тому під час оцінювання доцільності розробки 
необхідно враховувати не лише створення інтерфейсу, а й реалізацію окремих 
функціональних модулів, тестування, наповнення контентом і подальшу 
підтримку ресурсу. 
З технічної точки зору доцільність створення web-сайту полягає в 
можливості реалізації повноцінної інформаційної системи засобами сучасних 
frontend-технологій. Такі технології дозволяють створити адаптивний, 
швидкий і зручний ресурс, який працює у браузері та не потребує 
встановлення додаткового програмного забезпечення. Це важливо для 
користувачів, які можуть переглядати каталог книг, обговорення або профіль 
як з персонального комп’ютера, так і зі смартфона. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  42 
 
З економічної точки зору web-сайт може бути корисним завдяки 
багаторазовому використанню, можливості оновлення контенту, поступовому 
розширенню функціоналу та зменшенню потреби в ручному впорядкуванні 
інформації. Ресурс може бути використаний як демонстраційна платформа для 
популяризації читання, основа для студентського або навчального проєкту, а 
також як прототип майбутньої читацької спільноти. 
Розробка web-сайту «Книжковий клуб» виконується послідовно та 
охоплює кілька взаємопов’язаних етапів. На першому етапі здійснюється 
аналіз предметної області, під час якого визначаються особливості книжкових 
web-ресурсів, потреби потенційних користувачів, основні функції майбутнього 
сайту та проблеми, які повинна вирішувати система. Такий аналіз дає змогу 
сформувати загальне бачення web-ресурсу та визначити його місце серед 
аналогічних рішень. 
 
Наступним етапом є формування функціональних і нефункціональних 
вимог до системи. До функціональних вимог належать перегляд каталогу книг, 
пошук, фільтрація, робота з картками книг, додавання до улюбленого, 
позначення прочитаного, участь в обговореннях, перегляд клубів, робота з 
профілем і адміністрування контенту. До нефункціональних вимог належать 
адаптивність, зручність інтерфейсу, швидкодія, доступність, стабільність 
роботи та можливість подальшого розширення. 
Після визначення вимог виконується проєктування структури сайту. На 
цьому етапі визначаються основні сторінки ресурсу, логіка навігації та 
взаємозв’язки між окремими модулями. Для web-сайту «Книжковий клуб» 
передбачено такі основні розділи: «Головна», «Каталог», «Обговорення», 
«Клуби», «Адмін» і профіль користувача. Така структура дозволяє логічно 
розподілити інформацію та забезпечити зручний доступ до основних функцій 
сайту. 
Окремим етапом є розробка дизайну інтерфейсу. Для книжкового 
ресурсу важливо створити візуально привабливий вигляд, який відповідає 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  43 
 
тематиці читання та літературних спільнот. Під час розробки дизайну 
враховуються кольорова гама, типографіка, розміщення карток книг, вигляд 
кнопок, форм, навігаційних елементів, блоків обговорень і адміністративних 
таблиць. Важливо, щоб інтерфейс був не лише естетично привабливим, а й 
зручним для користувача. 
Після підготовки структури та дизайну виконується реалізація 
користувацької частини сайту. У межах цього етапу створюються основні 
сторінки web-ресурсу, зокрема головна сторінка, каталог книг, сторінка 
обговорень, сторінка книжкових клубів і профіль користувача. Особлива увага 
приділяється каталогу книг, оскільки саме він є одним із ключових 
функціональних розділів системи. Картки книг повинні містити стислий опис, 
зображення, основні характеристики та кнопки взаємодії. 
 
Важливим етапом є реалізація профілю користувача. Цей розділ 
забезпечує персоналізовану взаємодію із сайтом, оскільки користувач може 
переглядати власну статистику, досягнення, улюблені книги, останні 
прочитані твори та клуби. Наявність профілю підвищує зручність 
використання ресурсу та дозволяє користувачеві повертатися до раніше 
збереженої інформації. 
Також у межах розробки створюється адміністративна панель. Вона дає 
змогу адміністратору керувати книгами, обговореннями, клубами та 
статистикою. Наявність такого інструменту значно спрощує подальший 
супровід сайту, оскільки оновлення інформації може виконуватися через 
зручний інтерфейс без прямого редагування програмного коду. 
Після реалізації основних модулів проводиться тестування web-сайту. 
Перевіряється коректність роботи сторінок, кнопок, форм, пошуку, фільтрації, 
навігації, адаптивності та адміністративної панелі. Тестування дозволяє 
виявити помилки, оцінити зручність користування сайтом і перевірити 
відповідність реалізованої системи поставленим вимогам. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  44 
 
Важливим елементом технічного обґрунтування є визначення маршрутів 
web-сайту та логіки переходів між сторінками. У межах користувацької 
частини web-сайту передбачено такі основні сторінкові маршрути: головна 
сторінка «/», сторінка каталогу «/catalog», сторінка обговорень «/discussions», 
сторінка книжкових клубів «/clubs», профіль користувача «/profile» та сторінки 
адміністративної панелі «/admin». Такий підхід забезпечує зрозумілу 
структуру переходів і дозволяє користувачам швидко знаходити потрібні 
розділи. 
Для взаємодії з даними в межах сайту можуть використовуватися 
локальні структури даних або окремі запити до майбутньої серверної частини. 
Зокрема, для роботи з книгами доцільно передбачити отримання списку книг, 
отримання інформації про конкретну книгу, додавання нової книги, 
редагування та видалення запису. Для користувацької взаємодії можуть бути 
передбачені дії для додавання книги до улюбленого, позначення прочитаної 
книги, створення теми обговорення, створення клубу та оновлення профілю 
користувача. 
Узагальнено логіку можливих API-маршрутів можна описати так: 
маршрут «/api/books» відповідає за отримання списку книг; «/api/books/» — за 
отримання детальної інформації про обрану книгу; «/api/discussions» — за 
роботу з темами обговорень; «/api/clubs» — за роботу з книжковими клубами; 
«/api/favorites» — за додавання та видалення улюблених книг; «/api/profile» — 
за отримання даних профілю користувача; «/api/admin/books» — за 
адміністративне керування книжковим каталогом. У межах демонстраційної 
реалізації частина таких операцій може бути виконана засобами клієнтської 
логіки. 
Наявність чіткої системи маршрутів і логіки роботи з даними підвищує 
структурованість розробки та спрощує подальше масштабування web-сайту. У 
майбутньому до системи можна додати серверну частину, базу даних, 
автентифікацію користувачів, систему рецензій, рекомендації книг, 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  45 
 
повідомлення між користувачами або інтеграцію з зовнішніми книжковими 
API. 
Окремою перевагою розробленого web-сайту є можливість подальшого 
розвитку. У майбутньому «Книжковий клуб» можна доповнити повноцінною 
системою авторизації, базою даних книг, персональними рекомендаціями, 
розширеними рецензіями, рейтингами авторів, календарем клубних зустрічей, 
email-сповіщеннями, модерацією обговорень і системою ролей для 
користувачів. 
До можливих напрямів подальшого розвитку web-сайту належать 
додавання нових книг, розширення системи фільтрації, інтеграція з відкритими 
книжковими API, створення повноцінної бази даних, підключення авторизації, 
додавання системи персональних рекомендацій, розширення профілю 
користувача, впровадження email-сповіщень, додавання детальної статистики 
читання та покращення адміністративної панелі. 
З технічної точки зору web-сайт є придатним до масштабування, 
оскільки його структура передбачає окремі функціональні модулі: каталог 
книг, обговорення, клуби, профіль користувача та адміністративна панель. 
Такий модульний підхід дозволяє доповнювати систему новими 
можливостями без повної зміни її архітектури. 
З практичної точки зору розроблений ресурс може використовуватися як 
демонстраційна книжкова платформа, навчальний web-проєкт або основа для 
подальшого розвитку читацької спільноти. Його використання дозволяє 
систематизувати книжкову інформацію, надати користувачам зручні 
інструменти для вибору книг і забезпечити адміністраторам можливість 
керувати контентом. 
Отже, розробка web-сайту «Книжковий клуб» є технічно можливою, 
економічно обґрунтованою та практично доцільною. Створений ресурс може 
використовуватися для популяризації читання, перегляду каталогу книг, участі 
в обговореннях, створення клубів і ведення профілю користувача. Наявність 
адміністративної панелі, каталогу книг, профілю користувача та соціальних 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  46 
 
модулів забезпечує функціональну завершеність системи, а можливість 
подальшого розширення підвищує її цінність і перспективність. 
 
Висновки до розділу 2 
 
У другому розділі кваліфікаційної роботи було розглянуто призначення 
web-сайту «Книжковий клуб», визначено його основні функції та роль у 
підтримці читацької активності користувачів. Встановлено, що 
розроблюваний ресурс має забезпечувати доступ до каталогу книг, пошуку та 
фільтрації літератури, участі в обговореннях, створення книжкових клубів, 
ведення профілю користувача та адміністрування контенту. 
У процесі роботи було сформовано вимоги до дизайну, структури 
сторінок, навігації, наповнення, адміністрування та прототипу сайту. 
Визначено, що інтерфейс web-сайту повинен бути сучасним, адаптивним, 
зрозумілим, читабельним і не перевантаженим зайвими елементами. Основна 
структура сайту включає розділи «Головна», «Каталог», «Обговорення», 
«Клуби», «Адмін» і профіль користувача. Кожен із цих розділів виконує 
окрему функцію та забезпечує логічну взаємодію користувача з ресурсом. 
Окрему увагу було приділено каталогу книг, профілю користувача та 
адміністративній панелі. Каталог забезпечує перегляд книжкових карток, 
пошук і фільтрацію, профіль користувача дозволяє відображати читацьку 
статистику, досягнення, улюблені та прочитані книги, а адміністративна 
панель дає змогу керувати книгами, обговореннями, клубами та статистикою. 
Наявність цих елементів підвищує функціональність і практичну цінність 
розробленого web-сайту. 
Також було обґрунтовано доцільність створення сайту з технічної та 
економічної точок зору. Сучасні frontend-технології дозволяють реалізувати 
адаптивний і зручний ресурс із можливістю подальшого розширення. У 
майбутньому сайт може бути доповнений базою даних, авторизацією 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  47 
 
користувачів, персональними рекомендаціями, розширеними рецензіями, 
календарем зустрічей книжкових клубів та покращеною адміністративною 
статистикою. 
Отже, результати другого розділу створюють основу для подальшої 
програмної реалізації web-сайту «Книжковий клуб», розробки його 
функціональних модулів, налаштування користувацької логіки, тестування та 
подальшого вдосконалення системи. 
  
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  48 
 
РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ  
 
3.1. Обґрунтування вибору інструментальних засобів розробки 
 
Розробка web-сайту «Книжковий клуб» потребувала вибору таких 
інструментальних засобів, які забезпечують зручну реалізацію інтерфейсу, 
швидку розробку, стабільну роботу сторінок, можливість подальшого 
розширення функціоналу та публікацію сайту в мережі Інтернет. Оскільки 
ресурс орієнтований на роботу з книжковим контентом, обговореннями, 
клубами, профілем користувача та адміністративною панеллю, важливо було 
обрати технології, які дозволяють створити зрозумілу, адаптивну та 
структуровану web-систему. 
Під час вибору технологій враховувалися такі критерії: підтримка 
компонентної побудови інтерфейсу, зручність створення окремих сторінок і 
модулів, можливість повторного використання елементів, швидкість локальної 
розробки, підтримка адаптивного дизайну, простота розгортання, зрозуміла 
структура проєкту та придатність до подальшого масштабування. Також 
важливим було забезпечення можливості реалізації як користувацької частини 
сайту, так і адміністративної панелі. 
Основним середовищем розробки було обрано Visual Studio Code. Це 
середовище є зручним для створення web-застосунків, оскільки підтримує 
роботу з JavaScript, HTML, CSS, компонентними бібліотеками та 
розширеннями для форматування, пошуку помилок і навігації в коді. Visual 
Studio Code має вбудовані можливості для JavaScript, зокрема IntelliSense, 
налагодження, форматування, навігацію по коду та рефакторинг [16]. Для 
дипломного web-проєкту це є важливим, оскільки сайт складається з багатьох 
сторінок, компонентів і повторюваних елементів інтерфейсу. 
Для реалізації інтерфейсу використано бібліотеку React. Її перевагою є 
компонентний підхід, за якого інтерфейс формується з окремих незалежних 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  49 
 
елементів. React дозволяє створювати інтерфейси з компонентів, які мають 
власну логіку та зовнішній вигляд [5]. У межах web-сайту «Книжковий клуб» 
такими компонентами є навігаційне меню, картки книг, блоки статистики, 
фільтри каталогу, елементи обговорень, картки клубів, блоки профілю 
користувача, таблиці адміністративної панелі та кнопки взаємодії. Завдяки 
цьому окремі частини інтерфейсу можна повторно використовувати, 
змінювати та розширювати без повної перебудови всієї системи. 
Для локальної розробки та збирання проєкту використано Vite. Цей 
інструмент забезпечує швидкий запуск проєкту, оперативне оновлення змін під 
час редагування коду та формування оптимізованої версії сайту для публікації. 
В офіційній документації Vite зазначено, що це швидкий інструмент збирання 
для сучасних web-застосунків [6]. Для розробки сайту «Книжковий клуб» 
використання Vite є доцільним, оскільки воно прискорює процес створення й 
перевірки сторінок. 
Для опису інтерактивної логіки сторінок використовується JavaScript. Ця 
мова застосовується для обробки подій, роботи з елементами інтерфейсу, 
фільтрації даних, керування станом компонентів і реалізації динамічної 
поведінки сторінок. MDN Web Docs визначає JavaScript як одну з основних 
технологій, що використовується для створення інтерактивних можливостей 
web-сторінок [7]. У межах сайту JavaScript застосовується для пошуку книг, 
перемикання фільтрів, додавання до улюбленого, позначення прочитаних книг, 
відкриття профілю та виконання адміністративних дій. 
Для розміщення сайту в мережі Інтернет використано платформу Vercel. 
Вона дає змогу швидко публікувати frontend-проєкти, створювати deployment-
версії та перевіряти роботу сайту в реальному середовищі. У документації 
Vercel зазначено, що deployment є результатом успішного збирання проєкту, а 
розгортання може виконуватися через Git, Vercel CLI, Deploy Hooks або REST 
API [8]. Для дипломного проєкту це є зручним рішенням, оскільки сайт можна 
швидко опублікувати та продемонструвати під час захисту. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  50 
 
Крім основних технологій, під час розробки враховувалися вимоги до 
адаптивності, доступності, безпеки та продуктивності. Для оцінювання 
безпеки web-застосунків доцільно орієнтуватися на рекомендації OWASP Top 
10, які описують основні ризики для web-систем [17]. Для оцінювання 
продуктивності можна враховувати Core Web Vitals, які відображають досвід 
користувача щодо завантаження, інтерактивності та візуальної стабільності 
сторінки [18]. 
Отже, обраний стек технологій є доцільним для реалізації web-сайту 
«Книжковий клуб». Поєднання Visual Studio Code, React, Vite, JavaScript і 
Vercel дозволяє створити адаптивний, зручний і масштабований сайт, який 
поєднує каталог книг, обговорення, книжкові клуби, профіль користувача та 
адміністративне керування. 
 
 
 
Рисунок 3.1 – Структура проєкту «Книжковий клуб» у середовищі Visual 
Studio Code 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  51 
 
3.2. Опис програмної реалізації web-сайту «Книжковий клуб» 
 
Web-сайт «Книжковий клуб» реалізовано як інформаційну web-систему, 
яка надає користувачам доступ до каталогу книг, обговорень, книжкових 
клубів, особистого профілю та адміністративного керування контентом. 
Основна ідея сайту полягає в тому, щоб об’єднати в одному ресурсі 
інформаційний, соціальний і користувацький функціонал, необхідний для 
підтримки читацької активності. 
Користувацький інтерфейс побудований за принципом простої навігації. 
У верхньому меню розміщено основні розділи: «Головна», «Каталог», 
«Обговорення», «Клуби» та «Адмін». Також передбачено кнопки профілю 
користувача, виходу з облікового запису та перемикач теми. Така структура 
дозволяє користувачеві швидко перейти до потрібного розділу без зайвого 
пошуку. 
Головна сторінка web-сайту «Книжковий клуб» виконує роль стартового 
інформаційного центру та є першою сторінкою, з якою взаємодіє користувач 
після переходу на сайт. Вона має ознайомити відвідувача з тематикою ресурсу, 
коротко пояснити його призначення та зацікавити подальшим переглядом 
каталогу й обговорень. Для цього на сторінці розміщено великий hero-блок із 
привітанням, короткий опис можливостей сайту, статистичні показники, блок 
«Книга місяця», популярні обговорення та футер. 
Статистичні блоки на головній сторінці відображають кількість книг у 
каталозі, активних читачів і обговорень. Такі елементи формують у 
користувача уявлення про активність ресурсу. Блок «Книга місяця» 
використовується для виділення окремого твору, який рекомендується до 
перегляду або обговорення. Розділ популярних обговорень дозволяє швидко 
перейти до актуальних тем і долучитися до читацької взаємодії. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  52 
 
 
 
Рисунок 3.2 – Головна сторінка web-сайту «Книжковий клуб» 
 
Сторінка «Каталог» є одним із центральних модулів сайту. Вона містить 
каталог книжкових творів у вигляді карток. Кожна картка має зображення, 
назву книги, автора, жанр, рейтинг, короткий опис та елементи взаємодії. 
Такий формат подання інформації є зручним, оскільки користувач може 
швидко переглянути кілька книг і обрати твір відповідно до власних інтересів. 
Для покращення роботи з каталогом реалізовано пошук і фільтрацію. 
Користувач може шукати книгу за назвою або автором, а також фільтрувати 
каталог за жанром і рейтингом. Це дозволяє швидше знайти потрібний твір, 
особливо якщо кількість книг у системі збільшується. Наприклад, користувач 
може обрати лише книги певного жанру або переглянути твори з високим 
рейтингом. 
Картки книг містять кнопки «Читати», «Улюблене» та «Прочитано». 
Кнопка «Читати» призначена для переходу до ознайомлення з книгою або її 
описом. Кнопка «Улюблене» дозволяє додати книгу до персонального списку 
користувача, а кнопка «Прочитано» використовується для фіксації 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  53 
 
завершеного читання. Завдяки цьому каталог виконує не лише інформаційну, 
а й інтерактивну функцію. 
 
 
 
Рисунок 3.3 – Каталог книг web-сайту «Книжковий клуб» 
 
Сторінка «Обговорення» призначена для комунікації між користувачами. 
Її основна мета полягає в наданні простору для обміну думками про книги, 
авторів, жанри та літературні теми. У цьому розділі розміщуються тематичні 
категорії, список обговорень, кількість лайків, коментарів і кнопка створення 
нової теми. 
Матеріали на сторінці обговорень представлені у вигляді окремих карток 
або блоків. Кожна тема містить назву, короткий опис, автора, дату створення 
та показники активності. Такий формат дозволяє користувачеві швидко 
оцінити зміст дискусії та перейти до тієї теми, яка відповідає його інтересам. 
Наявність категорій спрощує орієнтацію у темах і робить розділ зручнішим 
для використання. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  54 
 
 
 
Рисунок 3.4 – Сторінка обговорень web-сайту «Книжковий клуб» 
 
Сторінка «Клуби» використовується для представлення читацьких 
спільнот. Її основне призначення полягає в тому, щоб користувачі могли 
переглядати тематичні книжкові клуби, обирати спільноти за інтересами та 
взаємодіяти з ними. На сторінці розміщуються картки клубів, які містять назву, 
опис, теги, кількість учасників, кількість книг у клубі, дату створення та 
автора. 
Книжкові клуби є важливою складовою сайту, оскільки вони формують 
соціальну взаємодію між користувачами. Завдяки клубам читачі можуть 
об’єднуватися за спільними літературними інтересами, наприклад навколо 
української класики, сучасної поезії, історичної прози або творчості окремих 
авторів. Наявність кнопки створення клубу дозволяє розширювати кількість 
спільнот і підтримувати активність ресурсу. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  55 
 
 
 
Рисунок 3.5 – Сторінка книжкових клубів web-сайту «Книжковий клуб» 
 
Сторінка «Профіль» створена для персоналізованої взаємодії 
користувача із сайтом. У цьому розділі відображається аватар користувача, 
ім’я, дата приєднання, короткий опис інтересів, статистика прочитаних книг, 
кількість рецензій, улюблених книг і обговорень. Також у профілі 
розміщуються досягнення, останні прочитані книги, улюблені книги та список 
клубів користувача. 
Профіль користувача дозволяє зробити взаємодію із сайтом більш 
індивідуальною. Користувач може бачити власну читацьку активність, 
переглядати улюблені твори, повертатися до прочитаних книг і контролювати 
участь у клубах. Наявність досягнень створює додаткову мотивацію до 
активного використання сайту. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  56 
 
 
Рисунок 3.6 – Профіль користувача web-сайту «Книжковий клуб» 
 
Адміністративна панель реалізована для керування інформаційним 
наповненням сайту. Вона містить вкладки «Книги», «Обговорення», «Клуби» 
та «Статистика». У розділі книг адміністратор може переглядати список творів, 
додавати нові записи, редагувати наявні книги та видаляти неактуальні. У 
розділі обговорень можна контролювати теми, у розділі клубів — переглядати 
та керувати читацькими спільнотами, а в розділі статистики — аналізувати 
загальні показники ресурсу. 
Наявність адміністративної панелі є важливою перевагою web-сайту, 
оскільки вона дозволяє оновлювати контент без безпосереднього редагування 
програмного коду. Це спрощує супровід системи та дозволяє підтримувати 
актуальність каталогу, обговорень і клубів. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  57 
 
 
Рисунок 3.7 – Адміністративна панель web-сайту «Книжковий клуб» 
 
Таким чином, розроблений web-сайт має дві основні частини: 
користувацьку та адміністративну. Користувацька частина орієнтована на 
перегляд книжкового контенту, участь в обговореннях, роботу з клубами та 
профілем, а адміністративна — на підтримку актуальності даних і керування 
контентом. 
 
3.3. Організація даних web-сайту «Книжковий клуб» 
 
Для роботи web-сайту «Книжковий клуб» необхідно організувати 
зберігання й обробку інформації про книги, користувачів, обговорення, клуби, 
улюблені твори, прочитані книги та адміністративні дії. У межах 
демонстраційної реалізації частина даних може зберігатися засобами 
клієнтської логіки, однак архітектура сайту передбачає можливість 
подальшого підключення повноцінної бази даних. 
Організація даних є важливою складовою web-сайту, оскільки саме вона 
визначає, які об’єкти використовуються в системі та як вони пов’язані між 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  58 
 
собою. Для сайту «Книжковий клуб» основними сутностями є книга, 
користувач, обговорення, клуб, улюблена книга, прочитана книга та 
адміністративний запис. Кожна сутність має власний набір властивостей, 
необхідних для коректного відображення даних на сторінках. 
Основною сутністю системи є книга. Вона містить дані, необхідні для 
відображення книжкових карток у каталозі. До таких даних належать назва 
книги, автор, жанр, рейтинг, короткий опис, зображення обкладинки та статус 
взаємодії користувача з книгою. Саме на основі цієї сутності формується 
каталог книг, блок «Книга місяця», список улюблених книг і останні прочитані 
твори в профілі. 
Сутність користувача містить інформацію, необхідну для роботи 
профілю. До неї можуть належати ім’я, аватар, дата приєднання, короткий 
опис інтересів, кількість прочитаних книг, кількість рецензій, кількість 
улюблених творів, кількість обговорень і список досягнень. Для 
адміністративної частини важливим є розмежування ролей звичайного 
користувача та адміністратора. 
Сутність обговорення використовується для збереження тем, які 
створюються або переглядаються користувачами. Вона може містити назву 
теми, категорію, короткий опис, автора, дату створення, кількість лайків і 
кількість коментарів. Завдяки цьому сторінка обговорень може відображати 
активні теми й показники взаємодії користувачів. 
Сутність клубу описує книжкову спільноту. Вона містить назву клубу, 
опис, теги, кількість учасників, кількість книг, дату створення та автора. Такі 
дані використовуються для формування карток клубів і відображення списку 
клубів у профілі користувача. 
Сутність улюбленої книги використовується для збереження творів, які 
користувач додав до власного списку. Це дозволяє користувачеві швидко 
повертатися до зацікавлених книг. Сутність прочитаної книги 
використовується для фіксації завершеного читання та формування статистики 
профілю. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  59 
 
Адміністративні дані пов’язані з керуванням контентом. До них можуть 
належати записи про додавання, редагування або видалення книг, контроль 
обговорень, перегляд клубів і статистика активності. Така структура дозволяє 
зробити адміністрування більш зрозумілим і системним. 
 
 
 
Рисунок 3.8 – Модель даних web-сайту «Книжковий клуб» 
 
У майбутньому для зберігання цих даних можна використати базу даних, 
що міститиме окремі таблиці: books, users, discussions, clubs, favorites, 
completed_books та achievements. Такий підхід дозволить централізовано 
зберігати інформацію, оновлювати контент через адміністративну панель і 
забезпечувати персоналізовану роботу користувача з сайтом. 
 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  60 
 
3.4. Логіка API-маршрутів і обміну даними 
 
У web-сайті «Книжковий клуб» взаємодія з даними може бути описана 
через логіку API-маршрутів або через клієнтські операції, які імітують роботу 
з серверною частиною. Навіть якщо окремі операції виконуються засобами 
клієнтської логіки, у межах архітектурного опису доцільно виділити логічні 
маршрути обміну даними. Це дозволяє чітко показати, які саме процеси 
відбуваються між інтерфейсом, даними та адміністративною частиною сайту. 
Для роботи з книжковим каталогом використовується логічний маршрут 
«/api/books». Він відповідає за отримання списку книг, які відображаються на 
сторінці «Каталог». Маршрут «/api/books/{id}» може використовуватися для 
отримання детальної інформації про конкретну книгу. У разі додавання, 
редагування або видалення книги в адміністративній панелі відповідні дії 
можуть виконуватися через «/api/admin/books». 
Для сторінки обговорень передбачено логічний маршрут 
«/api/discussions», який відповідає за отримання списку тем, створення нових 
обговорень, оновлення показників лайків і коментарів. Це дозволяє 
відокремити роботу з обговореннями від інших частин системи та зробити 
структуру даних більш зрозумілою. 
Для книжкових клубів може використовуватися маршрут «/api/clubs». 
Він відповідає за отримання списку клубів, створення нових клубів, оновлення 
інформації про учасників і книги клубу. Оскільки клуби є окремим 
функціональним модулем, виділення окремого маршруту є логічним і зручним 
для подальшого розвитку системи. 
Для улюблених книг передбачено маршрут «/api/favorites». Він 
забезпечує додавання та видалення книг із персонального списку користувача. 
Після виконання такої дії інформація може відображатися в профілі 
користувача. Для даних профілю доцільно використовувати маршрут 
«/api/profile», який відповідає за отримання статистики, досягнень, улюблених 
книг, останніх прочитаних творів і клубів користувача. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  61 
 
Узагальнено логіку обміну даними можна описати так: користувач 
виконує дію в інтерфейсі сайту, після чого формується запит до відповідного 
логічного маршруту або до клієнтського сховища даних. Після опрацювання 
запиту система повертає актуальні дані, які відображаються на сторінці. 
Наприклад, після додавання книги до улюбленого вона з’являється в профілі 
користувача, а після створення теми нове обговорення відображається у списку 
обговорень. 
 
 
 
Рисунок 3.9 – Схема можливих API-маршрутів web-сайту «Книжковий клуб» 
 
Описана логіка API-маршрутів робить архітектуру системи більш 
зрозумілою та підготовленою до масштабування. У майбутньому можна 
додати нові маршрути для авторизації користувачів, розширених рецензій, 
персональних рекомендацій, повідомлень, календаря зустрічей книжкових 
клубів або інтеграції із зовнішніми книжковими сервісами. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  62 
 
3.5. Тестування web-сайту «Книжковий клуб» 
 
Тестування web-сайту є необхідним етапом розробки, оскільки воно 
дозволяє перевірити відповідність реалізованої системи поставленим вимогам. 
Для сайту «Книжковий клуб» тестування було спрямоване на перевірку 
коректності роботи сторінок, зручності навігації, відображення контенту, 
роботи пошуку, фільтрів, профілю користувача, обговорень, клубів та 
адміністративної панелі. 
Під час перевірки враховувалися такі напрями: тестування верстки, 
функціональне тестування, UX-тестування, адаптивне тестування, безпекове 
тестування і тестування продуктивності. Такий підхід дозволяє оцінити не 
лише технічну працездатність сайту, а й зручність його використання з погляду 
звичайного користувача. 
Тестування верстки передбачало перевірку правильності відображення 
основних елементів інтерфейсу. Було перевірено наявність логотипу, 
верхнього меню, кнопок, карток книг, блоків статистики, фільтрів, тем 
обговорень, карток клубів, профілю користувача та елементів адміністративної 
панелі. Також оцінювалося коректне розміщення блоків, читабельність тексту, 
відповідність кольорів загальному стилю та відсутність візуальних помилок. 
Функціональне тестування було спрямоване на перевірку основних 
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками, 
відкриття каталогу книг, пошук за назвою або автором, фільтрація за жанром і 
рейтингом, додавання книги до улюбленого, позначення книги як прочитаної, 
перегляд обговорень, відкриття клубів, перегляд профілю користувача та дії 
адміністратора з керування книжковим каталогом. 
UX-тестування дозволило оцінити зручність використання сайту. Було 
перевірено зрозумілість назв пунктів меню, логічність структури сторінок, 
помітність кнопок, зручність карток книг, простоту використання фільтрів, 
зрозумілість профілю користувача та доступність адміністративних елементів. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  63 
 
Для книжкового ресурсу це є важливим, оскільки користувач повинен швидко 
знайти потрібну книгу й без зайвих дій перейти до обговорень або клубів. 
Адаптивне тестування передбачало перевірку відображення сайту на 
різних пристроях. Було оцінено роботу сторінок на комп’ютері, планшеті та 
смартфоні. Особлива увага приділялася коректному відображенню меню, 
книжкових карток, фільтрів, списків обговорень, карток клубів, профілю 
користувача та адміністративної панелі. Відсутність горизонтального 
прокручування та зручність натискання кнопок на мобільному пристрої є 
важливими показниками якості адаптивного інтерфейсу. 
Безпекове тестування було спрямоване на перевірку обмеження доступу 
до адміністративної панелі, коректність роботи кнопок, відсутність відкритого 
доступу до службових функцій і захист користувацьких даних. Для web-
застосунків доцільно враховувати рекомендації OWASP Top 10, оскільки вони 
описують поширені ризики, пов’язані з контролем доступу, ін’єкціями, 
помилками конфігурації та іншими вразливостями [17]. 
Тестування продуктивності передбачало перевірку швидкості 
завантаження основних сторінок, стабільності роботи фільтрів, реакції 
інтерфейсу на дії користувача та відсутності критичних помилок у консолі 
браузера. Для оцінювання якості роботи web-сторінок доцільно враховувати 
Core Web Vitals, які характеризують завантаження, інтерактивність і візуальну 
стабільність сторінок [18]. 
Тестування web-сайту «Книжковий клуб» було виконано з 
використанням браузерних інструментів Google Chrome DevTools, Lighthouse, 
а також шляхом ручної перевірки роботи сторінок у різних браузерах. Chrome 
DevTools є набором інструментів, вбудованих у браузер Google Chrome, які 
допомагають швидко діагностувати проблеми web-сторінок [19]. Lighthouse є 
автоматизованим інструментом для перевірки якості web-сторінок, зокрема 
продуктивності, доступності та SEO [20]. У межах тестування було перевірено 
головну сторінку, каталог, сторінку обговорень, сторінку клубів, профіль 
користувача та адміністративну панель. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  64 
 
 
 
Рисунок 3.10 – Результати тестування web-сайту «Книжковий клуб» 
 
За результатами тестування встановлено, що web-сайт «Книжковий 
клуб» відповідає основним вимогам до книжкового інформаційного ресурсу. 
Основні сторінки відображаються коректно, навігація є зрозумілою, пошук і 
фільтри працюють відповідно до призначення, профіль користувача 
відображає персональну інформацію, а адміністративна панель забезпечує 
керування контентом. 
 
3.6. Порівняння розробленого web-сайту з аналогами 
 
Порівняння розробленого web-сайту з аналогічними рішеннями 
дозволяє визначити його переваги та оцінити практичну значущість створеної 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  65 
 
системи. У межах дипломної роботи доцільно порівняти «Книжковий клуб» із 
такими ресурсами, як Goodreads, LibraryThing, Google Books та Yakaboo. 
Goodreads має перевагу у вигляді великої читацької спільноти, системи 
оцінок, рецензій і персональних списків. Проте цей ресурс є глобальним і не 
має локальної орієнтації саме на українського користувача. Web-сайт 
«Книжковий клуб» має простішу структуру та більше орієнтований на 
українську книжкову тематику, обговорення й клубну взаємодію. 
LibraryThing зосереджений на каталогізації особистої бібліотеки та 
відстеженні прочитаних книг. Його перевагою є систематизація книжкових 
колекцій, однак соціальна складова, обговорення та клуби не є основними 
елементами ресурсу. У розробленому сайті функції каталогу поєднуються з 
обговореннями, клубами та профілем користувача. 
Google Books має потужну пошукову складову та велику базу книжкової 
інформації. Його сильна сторона полягає у швидкому пошуку відомостей про 
книги. Водночас сервіс не є повноцінною читацькою спільнотою та не 
забезпечує клубну взаємодію в межах одного інтерфейсу. «Книжковий клуб» 
орієнтований не лише на пошук книг, а й на спілкування користувачів і 
персоналізовану взаємодію. 
Yakaboo є українською книжковою платформою та онлайн-книгарнею. Її 
перевагою є локальна орієнтація на український книжковий ринок і зручний 
каталог видань. Однак основний акцент ресурсу зроблено на продажу книг, 
тоді як «Книжковий клуб» зосереджується на читацькій активності, 
обговореннях, клубах, профілі користувача та адмініструванні контенту. 
Перевагою web-сайту «Книжковий клуб» є поєднання кількох 
функціональних напрямів у межах одного ресурсу. Користувач може 
переглядати каталог книг, застосовувати пошук і фільтри, додавати книги до 
улюбленого, позначати прочитані твори, брати участь в обговореннях, 
переглядати книжкові клуби та працювати з особистим профілем. 
Адміністратор, зі свого боку, має змогу керувати книгами, обговореннями, 
клубами та статистикою. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  66 
 
Отже, розроблений web-сайт не дублює повністю функціональність 
великих книжкових платформ, а створює локальне, зручне та тематично 
спрямоване середовище для взаємодії читачів. Основними перевагами системи 
є простота структури, адаптивний інтерфейс, каталог книг, обговорення, 
книжкові клуби, профіль користувача, досягнення та адміністративна панель. 
 
Висновки до розділу 3 
 
У третьому розділі було розглянуто програмну реалізацію web-сайту 
«Книжковий клуб». Було обґрунтовано вибір інструментальних засобів 
розробки, зокрема Visual Studio Code, React, Vite, JavaScript і Vercel. Обрані 
технології дозволили реалізувати адаптивний інтерфейс, організувати 
структуру сторінок, забезпечити розгортання сайту в мережі Інтернет і 
створити основу для подальшого розвитку системи. 
Було описано реалізацію основних сторінок сайту: головної сторінки, 
каталогу книг, сторінки обговорень, сторінки книжкових клубів, профілю 
користувача та адміністративної панелі. Кожен розділ виконує окрему функцію 
та забезпечує логічну взаємодію користувача із сайтом. Особливу увагу 
приділено каталогу книг, пошуку, фільтрації, роботі з улюбленими книгами, 
прочитаними творами, обговореннями та клубами. 
Окремо розглянуто організацію даних web-сайту. Було визначено 
основні сутності, необхідні для роботи системи: книги, користувачі, 
обговорення, клуби, улюблені книги, прочитані книги та досягнення. Така 
структура дозволяє систематизувати інформацію, формувати профіль 
користувача та забезпечувати роботу адміністративної панелі. 
Також було описано логіку API-маршрутів і обміну даними. Було 
показано, як користувацькі дії можуть бути пов’язані з відповідними 
логічними маршрутами або клієнтськими операціями. Це дає змогу краще 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  67 
 
зрозуміти архітектуру системи та визначити напрями її подальшого 
масштабування. 
У межах розділу було розглянуто тестування web-сайту за кількома 
напрямами: перевірка верстки, функціональне тестування, UX-тестування, 
адаптивність, безпека та продуктивність. За результатами тестування 
встановлено, що сайт має логічну структуру, коректно відображає основні 
сторінки, забезпечує роботу пошуку, фільтрів, профілю користувача та 
адміністративної панелі. 
Порівняння з аналогами показало, що web-сайт «Книжковий клуб» має 
практичну цінність завдяки локальній орієнтації, простому інтерфейсу, 
каталогу книг, обговоренням, книжковим клубам, профілю користувача, 
досягненням і адміністративній панелі. Таким чином, розроблений сайт можна 
вважати функціонально завершеною книжковою інформаційною системою, 
яка відповідає поставленій меті кваліфікаційної роботи. 
 
  
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  68 
 
ВИСНОВКИ 
 
У межах кваліфікаційної роботи було розроблено web-сайт «Книжковий 
клуб», призначений для об’єднання користувачів навколо читання, перегляду 
каталогу книг, участі в обговореннях, створення книжкових клубів, ведення 
особистого профілю та адміністрування книжкового контенту. Розроблений 
web-ресурс поєднує інформаційні, комунікаційні та користувацькі можливості, 
що забезпечують зручну взаємодію читачів із книжковим контентом у межах 
єдиного цифрового середовища. 
Актуальність розробки зумовлена тим, що сучасні web-технології 
активно використовуються у сфері освіти, культури, дозвілля та комунікації. 
Користувачі дедалі частіше шукають книги, рекомендації, відгуки та читацькі 
спільноти саме в цифровому середовищі. Водночас частина наявних 
книжкових ресурсів орієнтована переважно на продаж книг, пошук 
бібліографічної інформації або ведення персональних списків, але не завжди 
поєднує каталог, обговорення, клуби, профіль користувача, досягнення та 
адміністративне керування. Тому створення web-сайту «Книжковий клуб» є 
доцільним і практично значущим. 
У першому розділі було виконано аналіз предметної області книжкових 
web-ресурсів. Було визначено, що такі системи можуть виконувати 
інформаційну, пошукову, комунікаційну та персоналізовану функції. Вони 
дають змогу користувачам переглядати книги, шукати літературу за певними 
параметрами, ознайомлюватися з рейтингами, формувати власні читацькі 
списки та взаємодіяти з іншими читачами. Також було визначено основні 
чинники, які впливають на якість книжкового web-ресурсу: структура сайту, 
зручність інтерфейсу, адаптивність, актуальність контенту, наявність 
обговорень, профілю користувача, книжкових клубів і засобів 
адміністрування. 
У межах аналітичного огляду було досліджено існуючі книжкові web-
ресурси, зокрема Goodreads, LibraryThing, Google Books та Yakaboo. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  69 
 
Порівняння аналогів дало змогу визначити їхні переваги й недоліки. Було 
встановлено, що Goodreads має розвинену читацьку спільноту, LibraryThing 
зручний для каталогізації особистої бібліотеки, Google Books забезпечує 
широкий пошук книжкової інформації, а Yakaboo орієнтований на український 
книжковий ринок. Водночас жоден із розглянутих ресурсів повністю не 
поєднує просту структуру, українську локальну подачу, каталог книг, 
обговорення, книжкові клуби, профіль користувача, досягнення та 
адміністративну панель. Це підтвердило доцільність розробки власного web-
сайту «Книжковий клуб». 
У другому розділі було обґрунтовано технічне завдання для створення 
web-сайту. Було визначено призначення ресурсу, його основні функції, вимоги 
до дизайну, структури сторінок, навігації, наповнення, адміністрування та 
прототипу. Розроблюваний сайт було спроєктовано як систему, що складається 
з користувацької та адміністративної частин. Користувацька частина охоплює 
головну сторінку, каталог книг, сторінку обговорень, сторінку книжкових 
клубів і профіль користувача. Адміністративна частина призначена для 
керування книгами, обговореннями, клубами та статистикою. 
Окрему увагу було приділено вимогам до інтерфейсу. Було визначено, 
що дизайн web-сайту повинен бути сучасним, адаптивним, читабельним, 
візуально приємним і не перевантаженим зайвими елементами. Для цього в 
розробці використано світлу мінімалістичну тему з кремово-бежевим фоном, 
коричневими акцентами, акуратними картками, зрозумілими кнопками та 
логічною навігацією. Такий підхід відповідає книжковій тематиці та створює 
комфортне середовище для перегляду контенту. 
У третьому розділі було описано програмну реалізацію web-сайту 
«Книжковий клуб». Для розробки було обрано сучасні інструментальні засоби: 
Visual Studio Code, React, Vite, JavaScript і Vercel. Використання React дало 
змогу реалізувати компонентний підхід до побудови інтерфейсу, Vite 
забезпечив швидку локальну розробку та збирання проєкту, JavaScript 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  70 
 
використано для реалізації інтерактивної логіки, а Vercel — для розгортання 
сайту в мережі Інтернет. 
У процесі реалізації було створено основні сторінки web-сайту: головну 
сторінку, каталог книг, сторінку обговорень, сторінку книжкових клубів, 
профіль користувача та адміністративну панель. Головна сторінка виконує 
презентаційну функцію та знайомить користувача з ресурсом. Каталог книг 
містить картки творів, пошук і фільтрацію за жанром та рейтингом. Сторінка 
обговорень забезпечує можливість перегляду й створення тем для дискусій. 
Сторінка клубів дає змогу користувачам переглядати читацькі спільноти та 
взаємодіяти з ними. Профіль користувача відображає читацьку статистику, 
досягнення, улюблені книги, останні прочитані твори та клуби. 
Адміністративна панель забезпечує керування книгами, обговореннями, 
клубами та статистичними даними. 
Було розглянуто організацію даних web-сайту. У системі визначено 
основні сутності, необхідні для роботи ресурсу: книги, користувачі, 
обговорення, клуби, улюблені книги, прочитані книги та досягнення. Така 
структура дозволяє систематизувати книжкову інформацію, формувати 
профіль користувача, відображати його активність і забезпечувати роботу 
адміністративної частини сайту. Також було описано логіку можливих API-
маршрутів, які можуть використовуватися для отримання списку книг, роботи 
з обговореннями, клубами, улюбленими книгами, профілем користувача та 
адміністративним керуванням каталогом. 
У межах роботи було виконано тестування web-сайту. Перевірялися 
коректність відображення сторінок, робота навігації, пошуку, фільтрів, кнопок 
взаємодії, профілю користувача, сторінки обговорень, клубів та 
адміністративної панелі. Також було враховано адаптивність сайту, зручність 
інтерфейсу, базові вимоги безпеки та продуктивність. За результатами 
тестування встановлено, що web-сайт працює відповідно до поставлених 
вимог, має логічну структуру, коректно відображає основні сторінки та 
забезпечує виконання основних функцій. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  71 
 
Практичне значення одержаних результатів полягає у створенні 
функціонального web-сайту, який може бути використаний для популяризації 
читання, організації взаємодії між читачами та систематизації книжкового 
контенту. Розроблений ресурс дозволяє користувачам переглядати каталог 
книг, знаходити твори за допомогою пошуку й фільтрів, додавати книги до 
улюбленого, позначати прочитані твори, брати участь в обговореннях, 
переглядати книжкові клуби та працювати з особистим профілем. Для 
адміністратора система надає можливість керувати контентом сайту без 
прямого втручання у програмний код. 
Поставлену мету кваліфікаційної роботи було досягнуто. У результаті 
виконання роботи розроблено web-сайт «Книжковий клуб», призначений для 
перегляду каталогу книг, пошуку й фільтрації літератури, участі користувачів 
в обговореннях, створення читацьких клубів, ведення особистого профілю та 
адміністрування контенту з використанням сучасних frontend-технологій. 
Усі поставлені задачі було виконано: проаналізовано предметну область 
книжкових web-ресурсів; досліджено існуючі аналоги; визначено 
функціональні та нефункціональні вимоги; спроєктовано структуру сайту й 
логіку навігації; обґрунтовано вибір технологій; реалізовано основні сторінки 
та функціональні модулі; описано організацію даних і логіку можливих API-
маршрутів; виконано тестування системи; проведено порівняння розробленого 
web-сайту з аналогами. 
Отже, розроблений web-сайт «Книжковий клуб» є завершеним 
програмним продуктом у межах поставленого завдання. У процесі його 
створення було реалізовано основні функціональні можливості, необхідні для 
зручного перегляду книжкового контенту, участі в обговореннях, взаємодії з 
клубами, ведення профілю користувача та адміністрування сайту. Ресурс 
відповідає визначеним вимогам, має практичну цінність і може бути 
використаний як основа для подальшого розвитку цифрової читацької 
платформи. 
  
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  72 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
 
1. Про схвалення Стратегії розвитку читання на період до 2032 року 
«Читання як життєва стратегія» та затвердження операційного плану її 
реалізації на 2023–2025 роки : Розпорядження Кабінету Міністрів 
України від 03.03.2023 № 190-р. URL: https://zakon.rada.gov.ua/go/190-
2023-%D1%80. 
2. Український інститут книги. «Зміцнення позиції української книги»: 
звіт про результати дослідження читання в 2024 році. URL: 
https://ubi.org.ua/uk/activity/doslidzhennya/doslidzhennya-2024. 
3. DataReportal. Digital 2025: Ukraine. URL: 
https://datareportal.com/reports/digital-2025-ukraine. 
4. UNESCO. Empowering Libraries for an Inclusive Digital Future. URL: 
https://www.unesco.org/en/articles/new-ifap-issue-brief-empowering-
libraries-inclusive-digital-future. 
5. React. React documentation. URL: https://react.dev/. 
6. Vite. Next Generation Frontend Tooling. URL: https://vite.dev/. 
7. MDN Web Docs. JavaScript Guide. URL: https://developer.mozilla.org/en- 
/docs/Web/JavaScript/Guide. 
8. Vercel. Vercel Documentation. URL: https://vercel.com/docs. 
9. Goodreads. Meet your next favorite book. URL: 
https://www.goodreads.com/. 
10. LibraryThing. Catalog your books online. URL: 
https://www.librarything.com/. 
11. Google Books. About Google Books. URL: 
https://www.google.com/googlebooks/about/. 
12. Yakaboo. Партнерство. URL: https://promosite.yakaboo.ua/about-us-eng. 
13. ISO 9241-210:2019. Ergonomics of human-system interaction — Part 210: 
Human-centred design for interactive systems. URL: 
https://www.iso.org/standard/77520.html. 
14. MDN Web Docs. Responsive design. URL: 
https://developer.mozilla.org/en-
US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design. 
15. W3C. Web Content Accessibility Guidelines (WCAG) 2.2. URL: 
https://www.w3.org/TR/WCAG22/. 
16. Visual Studio Code. JavaScript in Visual Studio Code. URL: 
https://code.visualstudio.com/docs/languages/javascript. 
17. OWASP. OWASP Top Ten Web Application Security Risks. URL: 
https://owasp.org/www-project-top-ten/. 
18. Web.dev. Web Vitals. URL: https://web.dev/articles/vitals. 
19. Chrome for Developers. Chrome DevTools. URL: 
https://developer.chrome.com/docs/devtools. 
20. Chrome for Developers. Introduction to Lighthouse. URL: 
https://developer.chrome.com/docs/lighthouse/overview. 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  73 
 
21. TypeScript. TypeScript: JavaScript With Syntax For Types. URL: 
https://www.typescriptlang.org/. 
22. Tailwind CSS. Rapidly build modern websites without ever leaving your 
HTML. URL: https://tailwindcss.com/. 
23. Tailwind CSS. Styling with utility classes. URL: 
https://tailwindcss.com/docs/styling-with-utility-classes. 
24. React Router. React Router Official Documentation. URL: 
https://reactrouter.com/. 
25. React Router. Link. URL: https://reactrouter.com/api/components/Link. 
26. npm Docs. npm documentation. URL: https://docs.npmjs.com/. 
27. npm Docs. Downloading and installing Node.js and npm. URL: 
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/. 
28. Node.js. An introduction to the npm package manager. URL: 
https://nodejs.org/learn/getting-started/an-introduction-to-the-npm-package-
manager. 
29. MDN Web Docs. HTML: HyperText Markup Language. URL: 
https://developer.mozilla.org/en-US/docs/Web/HTML. 
30. MDN Web Docs. CSS: Cascading Style Sheets. URL: 
https://developer.mozilla.org/en-US/docs/Web/CSS. 
 
Арк. 
482 ЧДТУ 262218.01 ПЗ 
Змн. Арк. № Документа Підпис Дата  74 
75 
ДОДАТОК А 
 
Програмний код Home.tsx 
 
import { Link } from "react-router"; 
import { BookOpen, TrendingUp, Users, Star, ArrowRight } from "lucide-react"; 
import { ImageWithFallback } from "../figma/ImageWithFallback"; 
import { useAuth } from "../../contexts/AuthContext"; 
 
export function Home() { 
  const { user } = useAuth(); 
   
  const featuredBook = { 
    title: "Тіні забутих предків", 
    author: "Михайло Коцюбинський", 
    rating: 4.8, 
    description: "Класична українська повість про кохання і трагедію в Карпатах. 
Майстерний твір, що розкриває душу українського народу.", 
    cover: "https://images.unsplash.com/photo-1544947950-
fa07a98d237f?w=400&h=600&fit=crop" 
  }; 
 
  const popularDiscussions = [ 
    { id: 1, title: "Що робить книгу по-справжньому українською?", replies: 47, author: 
"Марія К." }, 
    { id: 2, title: "Обговорення: Музей покинутих секретів", replies: 32, author: "Олександр 
Т." }, 
    { id: 3, title: "Сучасна українська поезія: рекомендації", replies: 28, author: "Наталія В." }, 
  ]; 
 
  const stats = [ 
    { icon: BookOpen, value: "1,247", label: "Книг у каталозі" }, 
    { icon: Users, value: "3,456", label: "Активних читачів" }, 
    { icon: TrendingUp, value: "892", label: "Обговорень" }, 
  ]; 
 
  return ( 
    <div className="space-y-12"> 
      <section className="bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10 
rounded-2xl p-8 md:p-12"> 
        <div className="max-w-3xl mx-auto text-center space-y-6"> 
          <h1 className="text-4xl md:text-5xl font-bold text-foreground"> 
            Ласкаво просимо до Книжкового клубу 
          </h1> 
          <p className="text-lg text-muted-foreground"> 
            Об'єднуйтеся з тисячами читачів по всій Україні. Діліться враженнями, 
обговорюйте улюблені книги та знаходьте нових друзів. 
          </p> 
          {!user && ( 
            <Link 
              to="/register" 
76 
              className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-
foreground rounded-lg hover:bg-primary/90 transition-colors" 
            > 
              <span>Приєднатися до клубу</span> 
              <ArrowRight className="h-4 w-4" /> 
            </Link> 
          )} 
          {user && ( 
            <div className="text-center"> 
              <p className="text-lg text-foreground font-medium"> 
                Ласкаво просимо, {user.name}!   
              </p> 
              <p className="text-muted-foreground"> 
                Ви вже частина нашої спільноти. Досліджуйте каталог та обговорення! 
              </p> 
            </div> 
          )} 
        </div> 
      </section> 
 
      <section className="grid grid-cols-1 md:grid-cols-3 gap-6"> 
        {stats.map((stat, idx) => { 
          const Icon = stat.icon; 
          return ( 
            <div key={idx} className="bg-card border border-border rounded-xl p-6 text-center"> 
              <Icon className="h-8 w-8 text-primary mx-auto mb-3" /> 
              <div className="text-3xl font-bold text-foreground mb-1">{stat.value}</div> 
              <div className="text-sm text-muted-foreground">{stat.label}</div> 
            </div> 
          ); 
        })} 
      </section> 
 
      <section> 
        <h2 className="text-3xl font-bold text-foreground mb-6">Книга місяця</h2> 
        <div className="bg-card border border-border rounded-xl overflow-hidden"> 
          <div className="grid md:grid-cols-[300px_1fr] gap-6 p-6"> 
            <div className="mx-auto md:mx-0"> 
              <ImageWithFallback 
                src={featuredBook.cover} 
                alt={featuredBook.title} 
                className="w-full max-w-[300px] h-[400px] object-cover rounded-lg shadow-lg" 
              /> 
            </div> 
            <div className="space-y-4"> 
              <div> 
                <h3 className="text-2xl font-bold text-foreground mb-1">{featuredBook.title}</h3> 
                <p className="text-muted-foreground">{featuredBook.author}</p> 
              </div> 
              <div className="flex items-center gap-2"> 
                <div className="flex items-center gap-1"> 
                  {[...Array(5)].map((_, i) => ( 
77 
                    <Star 
                      key={i} 
                      className={`h-5 w-5 ${ 
                        i < Math.floor(featuredBook.rating) 
                          ? "fill-primary text-primary" 
                          : "text-muted" 
                      }`} 
                    /> 
                  ))} 
                </div> 
                <span className="text-foreground font-medium">{featuredBook.rating}</span> 
              </div> 
              <p className="text-muted-foreground leading-
relaxed">{featuredBook.description}</p> 
              <div className="flex flex-wrap gap-3 pt-2"> 
                <Link 
                  to="/catalog" 
                  className="px-5 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-
primary/90 transition-colors" 
                > 
                  Читати детальніше 
                </Link> 
                <Link 
                  to="/discussions" 
                  className="px-5 py-2 bg-secondary text-secondary-foreground rounded-lg 
hover:bg-secondary/80 transition-colors" 
                > 
                  Обговорити 
                </Link> 
              </div> 
            </div> 
          </div> 
        </div> 
      </section> 
 
      <section> 
        <div className="flex items-center justify-between mb-6"> 
          <h2 className="text-3xl font-bold text-foreground">Популярні обговорення</h2> 
          <Link 
            to="/discussions" 
            className="text-primary hover:text-primary/80 flex items-center gap-1" 
          > 
            <span className="text-sm">Всі обговорення</span> 
            <ArrowRight className="h-4 w-4" /> 
          </Link> 
        </div> 
        <div className="space-y-3"> 
          {popularDiscussions.map((discussion) => ( 
            <Link 
              key={discussion.id} 
              to="/discussions" 
78 
              className="block bg-card border border-border rounded-lg p-5 hover:shadow-md 
transition-shadow" 
            > 
              <div className="flex items-start justify-between gap-4"> 
                <div className="flex-1"> 
                  <h3 className="font-medium text-foreground mb-1">{discussion.title}</h3> 
                  <p className="text-sm text-muted-foreground">Автор: {discussion.author}</p> 
                </div> 
                <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted px-
3 py-1 rounded-full whitespace-nowrap"> 
                  <span>{discussion.replies}</span> 
                  <span>відповідей</span> 
                </div> 
              </div> 
            </Link> 
          ))} 
        </div> 
      </section> 
    </div> 
  ); 
} 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79 
ДОДАТОК Б 
 
Програмний код Reader.tsx 
 
import { useState, useEffect } from 'react'; 
import { ChevronLeft, ChevronRight, BookOpen, X, Clock } from 'lucide-react'; 
import { BookContentService, BookContent, Chapter } from '../../services/BookContentService'; 
import { useAuth } from '../../contexts/AuthContext'; 
import { useNavigate, useLocation } from 'react-router'; 
 
interface ReadingProgress { 
  bookId: string; 
  currentChapter: number; 
  currentPage: number; 
  lastRead: string; 
} 
 
export function Reader() { 
  const location = useLocation(); 
  const { user } = useAuth(); 
  const navigate = useNavigate(); 
   
  // Отримуємо bookId з URL 
  const pathParts = location.pathname.split('/'); 
  const bookId = pathParts[pathParts.length - 1]; 
   
  const [book, setBook] = useState<BookContent | null>(null); 
  const [currentChapter, setCurrentChapter] = useState(0); 
  const [fontSize, setFontSize] = useState(16); 
  const [readingProgress, setReadingProgress] = useState<ReadingProgress | null>(null); 
  const [startTime, setStartTime] = useState<Date>(new Date()); 
 
  useEffect(() => { 
    if (bookId) { 
      const bookData = BookContentService.getBookContent(bookId); 
      setBook(bookData); 
       
      if (user && bookData) { 
        const savedProgress = localStorage.getItem(`reading_${user.id}_${bookId}`); 
        if (savedProgress) { 
          const progress: ReadingProgress = JSON.parse(savedProgress); 
          setReadingProgress(progress); 
          setCurrentChapter(progress.currentChapter); 
        } 
      } 
    } 
  }, [bookId, user]); 
 
  useEffect(() => { 
    if (user && book) { 
      const progress: ReadingProgress = { 
80 
        bookId: book.id, 
        currentChapter, 
        currentPage: book.chapters[currentChapter]?.pageNumber || 1, 
        lastRead: new Date().toISOString() 
      }; 
       
      localStorage.setItem(`reading_${user.id}_${book.id}`, JSON.stringify(progress)); 
      setReadingProgress(progress); 
    } 
  }, [currentChapter, user, book]); 
 
  const saveReadingTime = () => { 
    if (user && book) { 
      const endTime = new Date(); 
      const readingTime = Math.floor((endTime.getTime() - startTime.getTime()) / 60000); // в 
хвилинах 
       
      const savedStats = localStorage.getItem(`reading_stats_${user.id}`); 
      let stats = savedStats ? JSON.parse(savedStats) : { totalMinutes: 0, sessions: [] }; 
       
      stats.totalMinutes += readingTime; 
      stats.sessions.push({ 
        bookId: book.id, 
        bookTitle: book.title, 
        date: new Date().toISOString(), 
        minutes: readingTime 
      }); 
       
      localStorage.setItem(`reading_stats_${user.id}`, JSON.stringify(stats)); 
    } 
  }; 
 
  const closeReader = () => { 
    saveReadingTime(); 
    navigate('/catalog'); 
  }; 
 
  const goToPreviousChapter = () => { 
    if (currentChapter > 0) { 
      setCurrentChapter(currentChapter - 1); 
    } 
  }; 
 
  const goToNextChapter = () => { 
    if (book && currentChapter < book.chapters.length - 1) { 
      setCurrentChapter(currentChapter + 1); 
    } 
  }; 
 
  const increaseFontSize = () => { 
    if (fontSize < 24) { 
      setFontSize(fontSize + 2); 
81 
    } 
  }; 
 
  const decreaseFontSize = () => { 
    if (fontSize > 12) { 
      setFontSize(fontSize - 2); 
    } 
  }; 
 
  const calculateProgress = () => { 
    if (!book) return 0; 
    return ((currentChapter + 1) / book.chapters.length) * 100; 
  }; 
 
  if (!book) { 
    return ( 
      <div className="min-h-screen flex items-center justify-center"> 
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div> 
      </div> 
    ); 
  } 
 
  const currentChapterData = book.chapters[currentChapter]; 
 
  return ( 
    <div className="min-h-screen bg-background"> 
      <div className="sticky top-0 bg-card border-b border-border z-10"> 
        <div className="max-w-4xl mx-auto px-4 py-4"> 
          <div className="flex items-center justify-between"> 
            <div className="flex items-center gap-4"> 
              <button 
                onClick={closeReader} 
                className="p-2 hover:bg-muted rounded-lg transition-colors" 
              > 
                <X className="h-5 w-5" /> 
              </button> 
              <div> 
                <h1 className="text-xl font-bold text-foreground">{book.title}</h1> 
                <p className="text-sm text-muted-foreground">{book.author}</p> 
              </div> 
            </div> 
             
            <div className="flex items-center gap-2"> 
              <button 
                onClick={decreaseFontSize} 
                className="px-3 py-1 text-sm bg-muted rounded hover:bg-accent transition-colors" 
              > 
                A- 
              </button> 
              <button 
                onClick={increaseFontSize} 
                className="px-3 py-1 text-sm bg-muted rounded hover:bg-accent transition-colors" 
82 
              > 
                A+ 
              </button> 
              <div className="flex items-center gap-1 text-sm text-muted-foreground"> 
                <Clock className="h-4 w-4" /> 
                <span>{currentChapterData.pageNumber}</span> 
              </div> 
            </div> 
          </div> 
           
          <div className="mt-3"> 
            <div className="w-full bg-muted rounded-full h-2"> 
              <div  
                className="bg-primary h-2 rounded-full transition-all duration-300" 
                style={{ width: `${calculateProgress()}%` }} 
              ></div> 
            </div> 
            <p className="text-xs text-muted-foreground mt-1"> 
              Розділ {currentChapter + 1} з {book.chapters.length} 
            </p> 
          </div> 
        </div> 
      </div> 
 
      <div className="max-w-4xl mx-auto px-4 py-8"> 
        <div className="bg-card border border-border rounded-xl p-8"> 
          <h2 className="text-2xl font-bold text-foreground mb-6"> 
            {currentChapterData.title} 
          </h2> 
           
          <div  
            className="prose prose-lg max-w-none text-foreground leading-relaxed" 
            style={{ fontSize: `${fontSize}px` }} 
          > 
            {currentChapterData.content.split('\n').map((paragraph, index) => ( 
              <p key={index} className="mb-4 text-justify"> 
                {paragraph} 
              </p> 
            ))} 
          </div> 
        </div> 
 
        <div className="flex items-center justify-between mt-8"> 
          <button 
            onClick={goToPreviousChapter} 
            disabled={currentChapter === 0} 
            className={`flex items-center gap-2 px-6 py-3 rounded-lg transition-colors ${ 
              currentChapter === 0 
                ? 'bg-muted text-muted-foreground cursor-not-allowed' 
                : 'bg-primary text-primary-foreground hover:bg-primary/90' 
            }`} 
          > 
83 
            <ChevronLeft className="h-5 w-5" /> 
            Попередній розділ 
          </button> 
 
          <div className="text-center"> 
            <p className="text-sm text-muted-foreground"> 
              Сторінка {currentChapterData.pageNumber} 
            </p> 
          </div> 
 
          <button 
            onClick={goToNextChapter} 
            disabled={currentChapter === book.chapters.length - 1} 
            className={`flex items-center gap-2 px-6 py-3 rounded-lg transition-colors ${ 
              currentChapter === book.chapters.length - 1 
                ? 'bg-muted text-muted-foreground cursor-not-allowed' 
                : 'bg-primary text-primary-foreground hover:bg-primary/90' 
            }`} 
          > 
            Наступний розділ 
            <ChevronRight className="h-5 w-5" /> 
          </button> 
        </div> 
      </div> 
    </div> 
  ); 
}
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
