Розробка вебзастосунку з модульною архітектурою та адмістративною панеллю на основі Gatsby

Abstract

Кваліфікаційну роботу присвячено інженерному проєктуванню та програмній реалізації модульного вебзастосунку-портфоліо TATREAL для незалежного музиканта на стеці JAMstack: Gatsby 5, React 18, TypeScript, GraphQL та Netlify/Decap CMS. Проблема монолітних CMS (WordPress, Drupal) для медіапортфоліо - у архітектурному tight coupling фронтенду та бази даних: кожен запит ініціює повний PHP – MySQL - рендеринг цикл, що дає 800–1200 мс TTFB ще до мережевої затримки. Для сайту з аудіотреками, відеотизерами та обкладинками у WebP це означає втрачений перший контакт зі слухачем. У роботі проведено порівняльний аналіз архітектурних підходів (монолітна CMS, SPA, SSG) та SSG-фреймворків (Gatsby 5, Next.js 14, Astro 4, Hugo). Реалізовано дев'ять React/TypeScript-компонентів з Loose Coupling через типізовані пропси. Інтегровано Git-based Netlify CMS з валідацією форм Formik/Yup. Lighthouse CI підтверджує: Performance 91/100, LCP 0.7 с, CLS 0. Практичний результат - задеплоєний застосунок TATREAL із відтворюваним CI/CD-процесом через Netlify та верифікованими Core Web Vitals у категорії “Good”