Задача

EmploymentApproval вирішує прикладну задачу: EmploymentApproval — це комплексне застосування, розроблене для спрощення процесів планування та затвердження співробітників, з інтуїтивно зрозумілим інтерфейсом календаря та сповіщеннями в реальному часі. Побудоване з використанням сучасних технологій, воно забезпечує ефективне управління та плавний користувацький досвід.

Проект є частиною комерційної розробки, завершений і використовується. Він пов'язаний з послугами: Full-stack веб-застосунки та дашборди, Розробка та інтеграція рішень для 1С.

Кейс демонструє підхід до завдань у сфері «Full-stack веб-застосунків та дашбордів»: від постановки завдання до здачі з чіткою структурою модулів.

Перед стартом були зафіксовані критерії готовності: зрозумілий перший екран, передбачувані помилки форм, можливість доопрацювання без переписування половини кодової бази.

Рішення

Реалізовано закритий комерційний інструмент: інтерфейс і логіка налаштовані під повсякденні сценарії користувача, без зайвих екранів.

Сценарії спроектовані так, щоб основні дії укладалися в один-два екрани: менше перемикань, менше помилок при введенні. Навігація та підписи полів узгоджені з звичними паттернами — користувачеві не потрібно «вивчати інтерфейс».

Окрема увага — стани завантаження та порожні списки: skeleton/spinner там, де дані приходять асинхронно, і зрозумілі тексти empty-state замість порожньої таблиці.

Архітектура і стек

UI та клієнт: @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.

Інфраструктура та утиліти: @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.

Розподіл мов у репозиторії: TypeScript (85.3%), JavaScript (11.9%), CSS (2.6%), HTML (0.1%).

Шари розділені так, щоб UI не знав деталей транспорту: адаптери API/сховища, доменні типи, компоненти представлення. Це спрощує заміну бекенду та точкові UX-правки.

Ключові функції

• @emotion/react — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @emotion/styled — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @fullcalendar/core — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @fullcalendar/daygrid — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @fullcalendar/react — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @fullcalendar/timegrid — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @mui/icons-material — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• @mui/lab — використано в продуктовой логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.

Додатково:

• Інтеграція та використання @emotion/react в продуктовой логіці та інтерфейсі.
• Інтеграція та використання @emotion/styled в продуктовой логіці та інтерфейсі.
• Інтеграція та використання @fullcalendar/core в продуктовой логіці та інтерфейсі.

Результат

Проект доведено до робочого стану: команда/користувач отримує стабільний інструмент замість ручних таблиць і переписки. Скорочено час на типові операції за рахунок автоматизації в інтерфейсі.

Код закрито за вимогами замовника; архітектурні рішення та стек описані на цій сторінці для прозорості експертизи та SEO.

Що б покращив

Наступний крок — observability (логи/метрики), автотести на регресію та документація API для інтеграторів. Для high-load сценаріїв — профілювання вузьких місць та кешування довідників.