Task Manager — Frontend (React + SCSS)

Фронтенд на React + SCSS для Task Manager API (Django REST Framework, JWT). Дозволяє увійти, переглядати, створювати, позначати виконаними та видаляти задачі.

Стек

React 19 • Vite • SCSS (variables, mixins, functions, nesting, @each) • Fetch API • JWT

Можливості

• Логін через JWT (access-токен зберігається в sessionStorage)
• Список задач з фільтрами за статусом (Усі / До виконання / В процесі / Виконано)
• Створення задачі (назва, пріоритет, дедлайн)
• Позначення задачі виконаною / не виконаною одним кліком
• Видалення задачі
• Індикатор прострочених задач (використовує поле is_overdue з API)
• Кастомний SCSS-компонент "priority meter" — рівень пріоритету показаний трьома позначками замість типового кольорового бейджа
• Адаптивна верстка (мобільна версія перебудовує розташування мета-інформації)

Швидкий старт

Потрібен запущений Task Manager API (за замовчуванням очікується на http://127.0.0.1:8000).

npm install
cp .env.example .env    # за потреби змініть VITE_API_URL
npm run dev

Відкрийте http://localhost:5173. Увійдіть під користувачем, створеним у backend (наприклад, через python manage.py createsuperuser в репозиторії API).

Білд для продакшену

npm run build
npm run preview

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

src/
├── api/client.js          # JWT-аутентифікація + запити до Task Manager API
├── components/
│   ├── LoginForm.jsx/.scss
│   ├── TaskForm.jsx
│   ├── TaskItem.jsx
│   └── PriorityMeter.jsx/.scss   # "фірмовий" елемент дизайну
├── styles/
│   ├── _variables.scss    # дизайн-токени: кольори, шрифти, міксини, функції
│   └── global.scss
├── App.jsx / App.scss
└── main.jsx

Дизайн

Тёмна тема (slate-фон), акцент — теплий бурштиновий колір для високого пріоритету та приглушений бірюзовий для виконаних задач. Шрифти: Space Grotesk (заголовки), Inter (текст), JetBrains Mono (дати — натяк на dev-інструмент).