Task

LearningBoard addresses a practical need: learningBoard is a powerful administration application built on React that showcases a full set of features, including data management, dynamic charts, and customizable themes. Built using modern libraries and frameworks, it provides a smooth user experience in both light and dark modes.

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

The case demonstrates an approach to tasks in the field of "Full-stack web applications and dashboards": from setting goals 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, 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 comes asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: fullcalendar, tanstack/react-query, ag-grid-react, react, react-chartjs-2, react-dom, react-pro-sidebar, react-redux, react-toastify.

Infrastructure and utilities: mui/material, mui/x-data-grid, reduxjs/toolkit, testing-library/jest-dom, axios, dayjs, formik, fs-extra, ky, recharts, swr, update, web-vitals, yup, zustand.

Language distribution in the repository: TypeScript (97.7%), JavaScript (1.1%), CSS (0.8%), HTML (0.4%).

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

Key features

• fullcalendar — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• mui/material — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• mui/x-data-grid — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• reduxjs/toolkit — 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.
• testing-library/jest-dom — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• ag-grid-react — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• axios — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of fullcalendar in product logic and interface.
• Integration and use of mui/material in product logic and interface.
• Integration and use of mui/x-data-grid 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 tables and correspondence. Time for routine operations has been reduced due to automation in the interface.

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.