Task

CalcExport addresses a practical need: calcExport is an elegant and efficient tool designed to simplify calculations and facilitate the seamless export of results. Built using TypeScript, it offers a responsive user interface enhanced with CSS, making it an ideal choice for developers seeking reliable and intuitive solutions for calculations.

The project is classified as commercial development and is actively in progress. It is related to services: Full-stack web applications and dashboards, Development and integration of solutions for 1C.

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

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

Solution

A closed commercial tool has been implemented: the interface and logic are tailored to everyday user scenarios, without unnecessary screens.

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

Special attention is 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: tanstack/react-query, react.

Infrastructure and utilities: ant-design, jest.

Language distribution in the repository: TypeScript (90%), CSS (9.8%), HTML (0.2%).

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

Key features

• ant-design — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• tanstack/react-query — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• jest — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• react — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of ant-design in product logic and interface.
• Integration and use of tanstack/react-query in product logic and interface.
• Integration and use of jest in product logic and interface.

Result

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

The code is closed per client requirements; architectural decisions and stack are described on this page for transparency of expertise and SEO.

What I would improve

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