TrackMyTask

Современное веб-приложение для управления задачами и проектами с интуитивно понятным интерфейсом.

🚀 Возможности

• Канбан-доска - визуальное управление задачами с drag-and-drop
• Список задач - табличное представление с фильтрацией и поиском
• Управление командой - просмотр задач участников проекта
• Современный UI - адаптивный дизайн с плавными анимациями

🎨 Последние улучшения

Дизайн и UX

• ✨ Современная цветовая схема с CSS переменными
• 🎯 Улучшенные карточки задач с градиентами и тенями
• 🔄 Плавные анимации и переходы
• 📱 Адаптивный дизайн для мобильных устройств
• 🎨 Обновленная типографика с шрифтом Inter
• 🌈 Визуальная индикация статусов задач

Навигация

• 🎮 Современное боковое меню с toggle-кнопкой
• ✅ Визуальная индикация активного раздела
• 💫 Плавные hover-эффекты
• 🎯 Улучшенная доступность

Производительность

• ⚡ Оптимизированные стили и анимации
• 🚀 Улучшенная производительность рендеринга
• 📦 Оптимизированная сборка

🌐 Демо

Приложение автоматически развертывается на GitHub Pages при каждом коммите в main/master ветку.

🔗 Открыть приложение

💻 Разработка

Проект создан с использованием Angular CLI версии 18.2.7.

Установка зависимостей

npm install

Локальный сервер разработки

Запустите npm start для запуска dev-сервера. Перейдите по адресу http://localhost:4200/. Приложение автоматически перезагрузится при изменении исходных файлов.

npm start

Примечание: В режиме разработки приложение использует mock-данные вместо реальных API-запросов. Это позволяет разрабатывать и тестировать функционал без запущенного backend-сервера. Mock-данные сохраняются в localStorage и сохраняются между перезагрузками страницы.

Работа с mock-данными

В режиме разработки (npm start) приложение автоматически использует заранее подготовленные mock-данные:

• 8 тестовых задач с различными статусами (TODO, In Progress, In Review, Done)
• 4 пользователя с разными ролями (Frontend Developer, Backend Developer, Tech Lead, QA Engineer)
• Привязка задач к пользователям

Все изменения (создание задач, изменение статусов, назначение пользователям) сохраняются в localStorage и доступны после перезагрузки страницы.

Чтобы сбросить mock-данные к начальному состоянию, очистите localStorage в DevTools браузера:

localStorage.removeItem('trackMyTask_mockData');

В production-режиме приложение автоматически переключается на реальные API-запросы к backend-серверу.

Сборка

Для сборки проекта выполните:

npm run build

Артефакты сборки будут сохранены в директории dist/.

Сборка для GitHub Pages

npm run build:prod

Запуск тестов

Выполните npm test для запуска unit-тестов через Karma.

npm test

📦 Технологический стек

• Angular 18 - фреймворк для разработки
• PrimeNG - библиотека UI компонентов
• Angular CDK - компоненты для drag-and-drop
• SCSS - препроцессор стилей
• TypeScript - типизированный JavaScript

🚀 Деплой

Приложение автоматически деплоится на GitHub Pages при помощи GitHub Actions. Workflow настроен для автоматического развертывания при push в основную ветку.

Ручной деплой

Workflow также можно запустить вручную через вкладку Actions в GitHub.

📝 Дополнительная информация

Для получения дополнительной информации по Angular CLI используйте ng help или перейдите на страницу Angular CLI Overview and Command Reference.

---

Made with ❤️ using Angular