To-Do List Application

https://todo.kotobars.ru

Веб-приложение для управления задачами - учебный проект для отработки Git workflow.

Проект группы ВБиО-406рсоб, Университет Синергия

Команда:

• Буриев Р.Б. - Бизнес логика
• Мыльцев А.М. - Тимлид, деплой
• Самхаев Э.М. - Фронтэнд
• Коршунков А.С. - Тестировщик
• Зулпиев Д.Ш. - Сеньор тестировщик.

Таск-трекинг

Используется доска, по каждому лабороторному практикумуму (ЛП) создается Issue + ветка в git

Задачи ЛП прикрепляются как сабтаски к Issue, например, Isse ЛП1 содержит все подзадачи ЛП1, к ней прикреплена ветка lp1

При сдаче ЛП Issue переводится в статус Review, после заключения преподавателя создается MR в main, при мёрдже ветки lp1 в main закрывается Issue ЛП1

🎯 Цель проекта

Отработка базового workflow разработки:

• Создание и управление issues
• Работа с ветками (branching)
• Pull Requests и код-ревью
• Деплой и ретроспектива

🤘 Технологии

• Frontend: Vue 3 (Composition API)
• State Management: Pinia
• Стилизация: CSS3, Flexbox/Grid
• Сборка: Vite
• Хранение данных: localStorage + Pinia
• Деплой: GitHub Pages / Netlify

📋 Функциональность

• ✅ Добавление новых задач
• ✅ Отметка выполненных задач
• ✅ Удаление задач
• ✅ Фильтрация (Все/Активные/Завершенные)
• ✅ Редактирование задач
• ✅ Локальное сохранение данных
• ✅ Адаптивный дизайн

🚩 План разработки

Этап 1: Планирование

• ✅ Создание репозитория
• ✅ Настройка GitHub Projects/Trello
• ✅ Создание бэклога задач

Этап 2: Базовая настройка

• Инициализация Vue 3 проекта
• Настройка Pinia store
• Базовая верстка и стилизация

Этап 3: Основной функционал

• Добавление задач (Composition API)
• Удаление задач
• Отметка о выполнении
• Первые PR и код-ревью

Этап 4: Фильтрация и состояние

• Фильтр "Все задачи"
• Фильтр "Активные"
• Фильтр "Завершенные"
• Работа с Pinia store

Этап 5: Рефакторинг и тестирование

• Рефакторинг компонентов
• Тестирование функциональности
• Работа с конфликтами

Этап 6: Деплой и ретроспектива

• Настройка деплоя
• Ретроспектива проекта

🛠 Быстрый старт

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

git clone <repository-url>
cd synergy406todo

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

npm install

3. Запустите сервер разработки:

npm run dev

4. Откройте http://localhost:5173 в браузере

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

synergy406todo/ ├── src/ │ ├── components/ # Vue компоненты │ │ ├── TodoList.vue │ │ ├── TodoItem.vue │ │ └── TodoFilter.vue │ ├── stores/ # Pinia stores │ │ └── todoStore.js │ ├── composables/ # Composition API функции │ │ └── useTodos.js │ ├── App.vue │ └── main.js ├── public/ ├── index.html ├── package.json └── README.md

🏗 Архитектура

• Vue 3 Composition API: Современный подход к созданию компонентов
• Pinia: Простое и мощное управление состоянием
• Composables: Переиспользуемая логика в отдельных функциях
• Reactive State: Реактивное обновление UI при изменении данных

🤝 Workflow разработки

1. Issues: Каждая задача создается как issue в GitHub
2. Ветки: Для каждой задачи создается отдельная ветка
3. PR: Код ревью через Pull Requests
4. Мердж: После одобрения код мержится в main
5. Деплой: Автоматический деплой после мерджа