Фронтенд частина аналітичної системи підрахунку калорій при вживанні їжі людиною

Abstract

Мета роботи – спроєктувати та реалізувати клієнтську частину аналітичної системи CalorieTracker, що забезпечить зручний і сучасний інтерфейс для щоденного обліку харчування, підрахунку споживаних калорій і макронутрієнтів, відстеження динаміки ваги та перегляду статистичних даних шляхом розробки односторінкового веб-застосунку (SPA) з використанням стеку React + TypeScript + Vite. Методи та технології. У роботі застосовано методи об’єктно-орієнтованого проєктування та UML-моделювання для опису архітектури системи, а також компонентний підхід до розробки інтерфейсу. Клієнтська частина реалізована з використанням бібліотеки React 18 – для побудови декларативного компонентного UI з реактивним оновленням стану. Мову TypeScript обрано для забезпечення статичної типізації та узгодженості типів між клієнтом і серверними DTO, що суттєво знижує кількість помилок на етапі розробки. Засіб збірки Vite забезпечує миттєвий запуск середовища розробки з підтримкою Hot Module Replacement. CSS-фреймворк Tailwind CSS застосовано для швидкої реалізації адаптивного мобільно-орієнтованого інтерфейсу через utility-first підхід. HTTP-клієнт Axios налаштовано з interceptor-ами для автоматичної передачі JWT-токену та обробки помилок автентифікації. Бібліотека Recharts використовується для побудови інтерактивних графіків статистики харчування. Маршрутизацію між сторінками реалізовано через React Router DOM v6. Для сканування штрих-кодів продуктів через камеру пристрою підключено бібліотеку @zxing/browser, а взаємодія з бекендом (ASP.NET Core 8) здійснюється через REST API у форматі JSON із JWT-автентифікацією. Апробація результатів. Основні результати роботи апробовано шляхом участі у Всеукраїнській науково-практичній конференції студентів та аспірантів «Теоретичні та прикладні аспекти розробки комп’ютерних систем» (TAACSD 2026, НУБіП України, Київ, 2026), де опубліковано тези доповіді за темою «Застосування технології Progressive Web App для оптимізації продуктивності односторінкових фітнес-додатків» Структура роботи. Пояснювальна записка складається зі вступу, чотирьох розділів, списку використаних джерел та додатків. Загальний обсяг записки становить 60 сторінок (без додатків), список джерел налічує 29 позицій. Додатки містять графічну частину, лістинги коду та декларацію про академічну доброчесність. У першому розділі виконано системний аналіз предметної області обліку харчування. Описані ключові сценарії взаємодії користувача з системою, потреби та очікування від інтерфейсу, наведено UML-діаграми. Проведено огляд інтерфейсів існуючих програмних рішень та сформульовано функціональні і нефункціональні вимоги до системи. Другий розділ присвячений проєктуванню клієнтської частини системи. Описана архітектура SPA-застосунку, його структурні складові та механізм взаємодії з серверною частиною через REST API. Третій розділ присвячений розробці програмного забезпечення: організаційній структурі застосунку, обґрунтуванню технологічного стеку, алгоритмам ключових модулів (автентифікація, пошук продуктів, підрахунок КБЖВ, статистика, досягнення), а також детальному опису інтерфейсу кожного екрана. У четвертому розділі проведено тестування та описано впровадження системи. Наведено результати функціонального тестування, аудит продуктивності засобами Google Lighthouse, вимоги до апаратного та програмного забезпечення і склад інсталяційного пакету.