Описание и детали проекта

Задача

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 сценариев — профилирование узких мест и кеширование справочников.