Task Management App

Тестовое задание: одностраничное приложение для управления задачами.

Стек технологий

• React 18 + TypeScript
• Vite (сборка)
• Ant Design (UI-библиотека)
• React Router v6
• RTK Query (работа с данными)
• JSON Server (имитация backend)
• Стили: CSS Modules

Структура проекта

src/
├── app/
│   ├── store.ts
│   ├── api/
│   │   ├── taskApi.ts
│   │   └── tagApi.ts
│   └── routes.tsx
├── features/
│   ├── tasks/
│   └── tags/
├── pages/
│   ├── HomePage.tsx
│   ├── TaskDetailPage.tsx
│   └── TaskFormPage.tsx
├── components/
│   ├── ui/
│   └── layout/
├── types/
├── utils/
├── constants/
└── assets/

1. Клонируем репозиторий

git clone https://github.com/JP4FF/task-management-app.git cd task-management-app

2. Устанавливаем зависимости

npm install

3. Запускаем приложение (запускает JSON Server и приложение)

npm run dev:full

Опционально:

Запускаем JSON Server (если необходимо в отдельном терминале)

npx run server

Приложение будет доступно по адресу: http://localhost:5173

Архитектура

• RTK Query — все CRUD-операции с задачами и тегами, включая отдельный PATCH для быстрого обновления статуса
• React Hook Form + Zod — формы создания и редактирования задач с валидацией
• CSS Modules — стилизация компонентов
• Оптимистические обновления — мгновенное изменение статуса задачи в списке без перезагрузки страницы
• Фильтры, поиск, сортировка и пагинация — полностью серверные (JSON Server + RTK Query)

---

Это тестовое задание для [НЦЭУ].

Все права защищены © 2026 [Влад М / JP4FF].
Коммерческое использование кода без письменного разрешения запрещено.