Task

AdditionalCriteria addresses a practical problem: Developed a specialized component in React/TypeScript for risk-based inspection (RBI), using Ant Design and React Query. Focused on creating an embeddable, reliable UI with skeleton loading and error handling for seamless integration into larger systems.

The project is related to commercial development, has been completed, and is in use. It is associated with services: Full-stack web applications and dashboards.

The case demonstrates the approach to tasks in the area of "Full-stack web applications and dashboards": from requirements to delivery with a clear module structure.

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

Solution

A comprehensive yet educational implementation was made with an emphasis on code readability and reproducible builds.

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

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

Architecture and stack

UI and client: React, React Query, React Toastify.

Infrastructure and utilities: TypeScript, Ant Design, Tanstack Query.

Language distribution in the repository: TypeScript (99.3%), HTML (0.7%).

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 adjustments.

Key features

• React — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• TypeScript — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Ant Design — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• React Query — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Tanstack Query — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• React Toastify — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of React in product logic and interface.
• Integration and use of TypeScript in product logic and interface.
• Integration and use of Ant Design in product logic and interface.

Result

The project has been brought to a working state: the team/user receives a stable tool instead of manual spreadsheets and correspondence. Time for routine operations has been reduced through automation in the interface.

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

What I would improve

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