Project Description & Details

Задача

stuzhuklab.ru решает прикладную задачу: Портфолио на Astro SSR с AISO-стеком (AI Readiness 84): llms.txt, AI-краулеры, JSON-LD, hreflang, related posts и tag hubs. Острова 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 без развёртывания локально.

Что бы улучшил

Следующий шаг — observability (логи/метрики), автотесты на регресс и документация API для интеграторов. Для high-load сценариев — профилирование узких мест и кеширование справочников.