Задача

AdditionalCriteria вирішує практичну задачу: Розробив спеціалізований компонент на React/TypeScript для інспекції на основі ризиків (RBI), використовуючи Ant Design та React Query. Сфокусувався на створенні встраювального, надійного UI зі скелетною завантаженням та обробкою помилок для безшовної інтеграції в більші системи.

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

Кейс демонструє підхід до завдань у сфері "Full-stack веб-додатків та дашбордів": від постановки до здачі з зрозумілою структурою модулів.

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

Рішення

Зроблена навчальна, але повноцінна реалізація з акцентом на читабельність коду та відтворювальну збірку.

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

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

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

UI та клієнт: React, React Query, React Toastify.

Інфраструктура та утиліти: TypeScript, Ant Design, Tanstack Query.

Розподіл мов у репозиторії: TypeScript (99.3%), HTML (0.7%).

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

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

• React — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.
• TypeScript — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.
• Ant Design — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.
• React Query — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.
• Tanstack Query — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.
• React Toastify — використаний у продуктовій логіці: знижує кількість самописного коду та прискорює додавання нових екранів.

Додатково:

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

Результат

Проект доведений до робочого стану: команда/користувач отримує стабільний інструмент замість ручних таблиць і переписки. Скорочено час на типові операції за рахунок автоматизації в інтерфейсі.

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

Що б покращив

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