Створення інтерактивного вебсайту «TasteCrafters»

Abstract

Кваліфікаційна робота присвячена розробленню та впровадженню вебсайту для обміну кулінарними рецептами. Основна ідея проєкту полягає у створенні зручної онлайн-платформи, адаптованої до мобільних пристроїв, де користувачі можуть публікувати власні рецепти, переглядати матеріали інших авторів, залишати коментарі, оцінювати страви та зберігати вподобані рецепти в особистій добірці. Такий ресурс орієнтований на широку аудиторію: від початківців, які лише навчаються готувати, до досвідчених кулінарів, зацікавлених у пошуку нових ідей. У першому розділі розглянуто предметну область і проаналізовано сучасні тенденції розвитку кулінарних онлайн-сервісів та фуд-блогінгу. Також досліджено наявні вебрішення, визначено їхні переваги й недоліки. На основі проведеного аналізу сформовано функціональні та нефункціональні вимоги до майбутнього вебсайту, описано основні сценарії взаємодії користувачів із системою та визначено ключові ролі: гість, зареєстрований користувач, автор рецепта й адміністратор. Окрему увагу приділено вибору технологічного стеку, зокрема React, Node.js і PostgreSQL, які забезпечують гнучкість розробки, масштабованість і надійну роботу з даними. Другий розділ присвячено проєктуванню вебсайту. У ньому описано клієнт-серверну архітектуру, логічну й фізичну структуру бази даних, а також основні сутності системи: користувачів, рецепти, інгредієнти, коментарі та оцінки. Наведено діаграми, що відображають взаємозв’язки між компонентами системи, принципи роботи фронтенду й бекенду, а також логіку обміну даними. Додатково розглянуто структуру каталогів проєкту, маршрутизацію запитів і підхід до керування станом клієнтської частини. У третьому розділі проведено перевірку працездатності розробленого вебсайту. Здійснено валідацію HTML- і CSS-коду, тестування API, перевірку React-компонентів, а також ручне тестування в різних браузерах і на екранах різного розміру. Це дало змогу підтвердити адаптивність, кросбраузерність і стабільність основних функцій платформи. Також обґрунтовано вибір хостингу, описано процес розгортання проєкту та наведено порядок використання ключових сторінок: від реєстрації користувача до створення й публікації рецепта. Четвертий розділ охоплює питання безпеки життєдіяльності та охорони праці. У ньому подано порядок надання першої допомоги в разі ураження електричним струмом, а також рекомендації щодо безпечної організації робочого місця за комп’ютером. Розглянуто вимоги до ергономіки, освітлення, режиму праці й відпочинку, пожежної безпеки та зменшення шкідливого впливу під час тривалої роботи з комп’ютерною технікою

The qualification work is devoted to the development and implementation of a website for sharing culinary recipes. The main idea of the project is to create a convenient online platform adapted for mobile devices, where users can publish their own recipes, view materials created by other authors, leave comments, rate dishes, and save favorite recipes to a personal collection. This resource is intended for a broad audience: from beginners who are only learning to cook to experienced culinary enthusiasts looking for new ideas. The first chapter examines the subject area and analyzes current trends in the development of online culinary services and food blogging. Existing web solutions are also reviewed, with their advantages and disadvantages identified. Based on the conducted analysis, functional and non-functional requirements for the future website are formulated, the main scenarios of user interaction with the system are described, and the key roles are defined: guest, registered user, recipe author, and administrator. Particular attention is paid to the choice of the technology stack, namely React, Node.js, and PostgreSQL, which provide development flexibility, scalability, and reliable data processing. The second chapter is devoted to website design. It describes the client-server architecture, the logical and physical structure of the database, as well as the main system entities: users, recipes, ingredients, comments, and ratings. The chapter presents diagrams that illustrate the relationships between system components, the principles of front-end and back-end operation, and the logic of data exchange. In addition, the project directory structure, request routing, and the approach to managing the state of the client side are considered. The third chapter presents the verification of the developed website’s functionality. HTML and CSS code validation, API testing, React component testing, and manual testing in different browsers and on screens of various sizes were carried out. This made it possible to confirm the adaptability, cross-browser compatibility, and stability of the platform’s main functions. The choice of hosting is also justified, the deployment process is described, and the procedure for using the key pages is presented: from user registration to creating and publishing a recipe. The fourth chapter covers issues of life safety and occupational health. It presents the procedure for providing first aid in the event of electric shock, as well as recommendations for the safe organization of a computer workstation. The chapter considers requirements for ergonomics, lighting, work and rest schedules, fire safety, and the reduction of harmful effects during prolonged work with computer equipment