Задача

stuzhuk.page вирішує практичне завдання: Портфоліо на Astro SSR з AISO-стеком (AI Readiness 84): llms.txt, AI-краулери, JSON-LD, hreflang, пов'язані публікації та тегові хаби. Острови React/Svelte, API на PostgreSQL, Docker, Vitest.

Проект стосується комерційної розробки та активно розробляється. Він пов'язаний з послугами: Маркетингові та корпоративні сайти, SEO, AEO та GEO: підготовка сайтів до AI-пошуку.

Кейс демонструє підхід до завдань у сфері "Маркетингові та корпоративні сайти": від постановки цілей до здачі з чіткою структурою модулів.

Перед стартом ми зафіксували критерії готовності: зрозумілий перший екран, передбачувані помилки форм та можливість доопрацювання без переписування половини кодової бази.

Рішення

Зібрано робочий прототип/продукт з чіткою навігацією та передбачуваною поведінкою форм і списків. Демо доступне за посиланням на сторінці.

Сценарії спроектовані так, щоб основні дії вміщалися в один-два екрани: менше перемикань, менше помилок при введенні. Навігація та підписи полів узгоджені з звичними патернами — користувачу не потрібно "вивчати інтерфейс".

Окрема увага приділена станам завантаження та порожнім спискам: skeleton/spinner там, де дані приходять асинхронно, і зрозумілі тексти empty-state замість порожньої таблиці.

Архітектура і стек

UI та клієнт: astro, d3.

Сервер та дані: types/node.

Інфраструктура та утиліти: date-fns, gray-matter, openai, playwright/test, vitest/ui, dotenv, jsdom, vitest.

Розподіл мов у репозиторії: CSS (31.3%), JavaScript (29.8%), TypeScript (24.4%), Astro (9.7%), PHP (1.9%), Svelte (1.4%), HTML (1.4%), Dockerfile (0.1%), Shell (0%).

Шари розділені так, щоб UI не знав деталей транспорту: адаптери API/сховища, доменні типи, компоненти представлення. Це спрощує заміну бекенду та точкові UX-правки.

Ключові функції

• astro — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• d3 — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• date-fns — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• gray-matter — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• openai — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• playwright/test — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• types/node — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• vitest/ui — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.

Додатково:

• Інтеграція та використання astro в продуктовой логіці та інтерфейсі.
• Інтеграція та використання d3 в продуктовой логіці та інтерфейсі.
• Інтеграція та використання date-fns в продуктовой логіці та інтерфейсі.

Результат

MVP вже покриває ключовий сценарій; далі — розширення звітності, тестів та моніторингу.

Вихідний код відкритий: https://github.com/astropsy999/stuzhuk.page — можна оцінити структуру модулів та стиль комітів.

Інтерактивне демо доступне за посиланням вище — можна перевірити UX без розгортання локально.

Що б покращив

Наступний крок — спостережуваність (логи/метрики), автотести на регресію та документація API для інтеграторів. Для сценаріїв з високим навантаженням — профілювання вузьких місць та кешування довідників.