РАЗРАБОТКА ИНТЕРАКТИВНОЙ KANBAN-ДОСКИ ДЛЯ УПРАВЛЕНИЯ ЗАДАЧАМИ С ИСПОЛЬЗОВАНИЕМ REACT И МЕХАНИЗМА DRAG-AND-DROP

DEVELOPMENT OF AN INTERACTIVE KANBAN BOARD FOR TASK MANAGEMENT USING REACT AND DRAG-AND-DROP MECHANISM

Romansky Ivan Igorevich

student, Department of Business Informatics and Mathematical Methods in Economics, Shevchenko Transnistrian State University

Pridnestrov'ye, Tiraspol

Аннотация

В статье рассматривается процесс разработки клиентской части веб-приложения для управления задачами на основе методологии Kanban. Особое внимание уделено реализации интерактивной доски с поддержкой механизма drag-and-drop, а также интеграции с REST API. Приложение построено с использованием библиотеки React, Vite и @hello-pangea/dnd. Описаны принципы компонентной архитектуры, управление состоянием, маршрутизация и визуальное оформление интерфейса. Представлены результаты тестирования и перспективы развития. Разработанное решение демонстрирует высокую интерактивность и может служить основой для современных систем управления проектами.

Abstract

This article examines the development of the client-side of a web application for task management based on the Kanban methodology. Particular attention is paid to the implementation of an interactive board with drag-and-drop support and integration with a REST API. The application is built using the React library, Vite, and @hello-pangea/dnd. The principles of component architecture, state management, routing, and visual interface design are described. Test results and development prospects are presented. The developed solution demonstrates high interactivity and can serve as the basis for modern project management systems.

Ключевые слова: веб-разработка; фронтенд; React; Kanban; drag-and-drop; SPA; REST API; управление задачами; пользовательский интерфейс.

Keywords: web development; front-end; React; Kanban; drag-and-drop; SPA; REST API; task management; user interface.

В современных условиях цифровой трансформации бизнеса возрастает потребность в удобных инструментах управления задачами и проектами. Методология Kanban, основанная на визуализации рабочего процесса, получила широкое распространение благодаря своей гибкости и наглядности. Классическая Kanban-доска позволяет отслеживать статусы задач (backlog, in progress, review, done) и оперативно перераспределять нагрузку между исполнителями.

Целью настоящей статьи является описание процесса разработки интерактивной frontend-части системы управления задачами с поддержкой drag-and-drop. Для достижения цели решались следующие задачи: анализ принципов Kanban и современных подходов к построению SPA, проектирование компонентной архитектуры на React, реализация механизма перетаскивания карточек, обеспечение взаимодействия с backend через REST API, а также проведение тестирования.

Теоретической основой работы послужили принципы компонентного подхода React, архитектура Single Page Application и рекомендации по проектированию интерактивных интерфейсов. В отличие от традиционных многостраничных приложений, SPA загружает каркас один раз, а все последующие взаимодействия происходят динамически. Это обеспечивает высокую скорость отклика и комфорт пользователя. Клиентская маршрутизация реализована с помощью React Router DOM.

Практическая реализация выполнена на стеке: React + Vite + Axios + @hello-pangea/dnd. Интерфейс включает страницу списка проектов и Kanban-доску с четырьмя колонками. Карточки задач содержат название, описание, исполнителя и срок выполнения. Просроченные задачи визуально выделяются. Механизм drag-and-drop позволяет изменять статус задачи путём простого перетаскивания между колонками с мгновенным обновлением состояния и отправкой PUT-запроса на сервер.

Система фильтрации задач по исполнителю реализована через выпадающий список и метод filter(). Использование хуков useState и useEffect обеспечивает реактивное обновление интерфейса. Стили выполнены с помощью CSS-модулей и обеспечивают современный внешний вид с тенями, скруглёнными углами и адаптивной вёрсткой.

Проведённое тестирование подтвердило корректную работу всех функций: создание и удаление проектов, добавление задач, перетаскивание между колонками, фильтрация и обработка ошибок сети. Время отклика интерфейса не превышает 100 мс. Приложение развёрнуто на платформе Vercel, backend — на Render.

В заключение следует отметить, что разработанное решение представляет собой полноценную frontend-часть системы управления задачами по методологии Kanban. Использование React и специализированных библиотек позволило создать высокоинтерактивный и производительный интерфейс. Полученный результат может быть использован в учебных целях и как основа для коммерческих систем управления проектами. Перспективы развития включают добавление авторизации, системы ролей, уведомлений и мобильной версии.

Список литературы

1. Соммервилл И. Программная инженерия. – Pearson Education. – 2016.

2. Андерсон Д. Дж. Канбан: успешные эволюционные изменения для вашего технологического бизнеса. – Blue Hole Press. – 2010.

3. React Documentation [Электронный ресурс]. – URL: https://react.dev.

4. Vite Documentation [Электронный ресурс]. – URL: https://vitejs.dev.

5. Axios Documentation [Электронный ресурс]. – URL: https://axios-http.com.

6. React Router Documentation [Электронный ресурс]. 7. @hello-pangea/dnd Documentation [Электронный ресурс].

7. MDN Web Docs. Mozilla. – Mozilla. – 2026.

8. Фаулер М. Шаблоны архитектуры корпоративных приложений. – Addison-Wesley. – 2002.

9. Книберг Х., Скарин М. Kanban и Scrum – как извлечь максимум из обоих. – C4Media. – 2010.