Task List App

Этот проект — список задач, разработанный с использованием Vue/Nuxt. Он позволяет добавлять, редактировать, удалять и сортировать задачи, а также отслеживать их выполнение с помощью прогресс-баров. Проект выполнен в соответствии с макетом из Figma и включает поддержку темной темы и адаптивную верстку.

🔗 Демо

Проект развернут на Vercel: task-list-tan.vercel.app

🔥 Основной функционал

✅ Управление задачами

• Добавление задач с помощью кнопки или клавиши Enter
• Редактирование, удаление, отметка задач как выполненных
• Возможность менять задачи местами (Drag & Drop)
• Фильтрация задач (Все, Активные, Выполненные)
• Кнопка «Очистить выполненные» для удаления завершенных задач
• Прогресс-бар отображает количество и соотношение выполненных и невыполненных задач

✅ Темная тема

• Переключение между светлой и темной темой (при первой загрузке тема задаётся настройками устройства, дальнейший выбор сохраняется в localStorage)

✅ Адаптивная верстка

• Корректное отображение на десктопах и мобильных устройствах (в том числе реализован удобный Drag & Drop для сенсорных экранов)

✅ Менеджер состояния

• Используется Pinia для управления состоянием

✅ Сохранение данных

• Данные о задачах не теряются после перезагрузки страницы (простой сервер на PHP с сохранением в текстовом файле без базы данных - для ускорения разработки)

✅ Чистый и понятный код

• Структурированный, читаемый код для удобства поддержки и масштабирования

⏳ Затраченное время

24 часа (3 рабочих дня)

🔧 Возможные улучшения и доработки

• Авторизация для хранения персональных списков задач
• Добавление категорий задач с фильтрацией по ним
• Поддержка нескольких языков интерфейса (i18n)

⚙️ Технологии

• Vue 3 / Nuxt 3
• Pinia (менеджер состояния)
• Tailwind CSS (стилизация)
• Vuedraggable (Drag & Drop списка задач)

🚀 Как развернуть локально?

1️⃣ Клонируйте репозиторий:

git clone https://github.com/kogrms/task-list

2️⃣ Установите зависимости:

npm install

3️⃣ Запустите проект:

npm run dev

4️⃣ Откройте в браузере: http://localhost:3000

Буду благодарен за фидбэк! 😊