Задача

lagrant.com.ua вирішує практичну задачу: Маркетинговий сайт послуг з грантів, створений на основі Astro та TypeScript з використанням Tailwind. Швидка доставка статичних даних та підтримувані контентні блоки.

Проект є частиною комерційної розробки та активно розробляється. Він пов'язаний з послугами: Маркетингові та корпоративні сайти.

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

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

Рішення

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

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

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

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

UI та клієнт: Astro, Tailwind CSS.

Інфраструктура та утиліти: TypeScript.

Розподіл мов у репозиторії: TypeScript (59.3%), PHP (33.8%), CSS (4.3%), JavaScript (1.8%), HTML (0.8%).

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

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

• Astro — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• TypeScript — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• Tailwind CSS — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.

Додатково:

• Інтеграція та використання Astro в продуктовой логіці та інтерфейсі.
• Інтеграція та використання TypeScript в продуктовой логіці та інтерфейсі.
• Інтеграція та використання Tailwind CSS в продуктовой логіці та інтерфейсі.

Результат

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

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

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

Що б покращив

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