Task

EmploymentApproval addresses a practical task: EmploymentApproval is a comprehensive application designed to simplify the processes of employee planning and approval, featuring an intuitive calendar interface and real-time notifications. Built using modern technologies, it ensures efficient management and a smooth user experience.

The project is part of commercial development, has been completed, and is in use. It is related to services: Full-stack web applications and dashboards, Development and integration of solutions for 1C.

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

Before starting, readiness criteria were established: a clear first screen, predictable form errors, and the ability to make improvements 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, fewer input errors. Navigation and field labels are aligned 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 comes asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: @emotion/react, @fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/react, @fullcalendar/timegrid, ag-grid-react, react, react-dom, react-flatpickr, react-icons, react-pro-sidebar, react-toastify.

Infrastructure and utilities: @emotion/styled, @mui/icons-material, @mui/lab, @mui/material, @mui/system, ag-grid-community, ag-grid-enterprise, chalk, date-fns, flatpickr, fontawesome-4.7, fs, fs-extra, ky, material-ui-popup-state, playwright, zustand.

Language distribution in the repository: TypeScript (85.3%), JavaScript (11.9%), CSS (2.6%), HTML (0.1%).

Layers are separated so that the UI does not know the details of transport: API/storage adapters, domain types, view components. This simplifies backend replacement and targeted UX adjustments.

Key features

• @emotion/react — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @emotion/styled — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @fullcalendar/core — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @fullcalendar/daygrid — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @fullcalendar/react — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @fullcalendar/timegrid — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @mui/icons-material — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @mui/lab — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of @emotion/react in product logic and interface.
• Integration and use of @emotion/styled in product logic and interface.
• Integration and use of @fullcalendar/core 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 due to automation in the interface.

The code is closed per client requirements; architectural solutions 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 directories.