Task

stuzhuklab.ru addresses a practical task: A portfolio on Astro SSR with an AISO stack (AI Readiness 84): llms.txt, AI crawlers, JSON-LD, hreflang, related posts, and tag hubs. Islands of React/Svelte, API on PostgreSQL, Docker, Vitest.

The project is related to commercial development and is actively being developed. It is connected with services: Marketing and corporate websites, SEO, AEO, and GEO: preparing websites for AI search.

The case demonstrates an approach to tasks in the field of "Marketing and corporate websites": from setting goals to delivery with a clear module structure.

Before starting, we fixed the readiness criteria: a clear first screen, predictable form errors, and the ability to make improvements without rewriting half of the codebase.

Solution

A working prototype/product has been assembled with clear navigation and predictable behavior of forms and lists. A demo is available via a link on the page.

The scenarios are designed so that the main actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels are aligned with familiar patterns — the user does not need to "learn the interface".

Particular attention is paid to loading states and empty lists: skeleton/spinner where data comes asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: astro, d3.

Server and data: types/node.

Infrastructure and utilities: date-fns, gray-matter, openai, playwright/test, vitest/ui, dotenv, jsdom, vitest.

Language distribution in the repository: 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%).

Layers are separated so that the UI does not know the transport details: API/storage adapters, domain types, presentation components. This simplifies backend replacement and targeted UX tweaks.

Key features

• astro — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• d3 — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• date-fns — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• gray-matter — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• openai — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• playwright/test — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• types/node — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• vitest/ui — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of astro in product logic and interface.
• Integration and use of d3 in product logic and interface.
• Integration and use of date-fns in product logic and interface.

Result

The MVP already covers the key scenario; next — expanding reporting, testing, and monitoring.

The source code is open: https://github.com/astropsy999/stuzhuk.page — you can evaluate the module structure and commit style.

An interactive demo is available via the link above — you can check the UX without deploying locally.

What I would improve

The next step — observability (logs/metrics), automated regression tests, and API documentation for integrators. For high-load scenarios — profiling bottlenecks and caching reference data.