To_Do_List_JavaScript

Todo-приложение на чистом JavaScript с локальным сохранением состояния, поддержкой нескольких списков и реальным backend-режимом через JSON Server.

Возможности

• Полный CRUD задач + inline-редактирование.
• Фильтры: Все / Активные / Выполненные.
• Поиск по названию.
• Hash-роутинг состояния: #/all, #/active, #/completed + query-параметры (q, project) в URL.
• Сортировка: Вручную, Сначала новые, Ближайший дедлайн, Высокий приоритет.
• Массовые действия TodoMVC: Toggle all, Clear completed, счетчик активных задач.
• Drag-and-drop reorder (режим Вручную, фильтр Все, пустой поиск) с сохранением порядка в localStorage.
• Несколько проектов/списков задач (не один общий список).
• Переключатель темы light/dark с сохранением выбора.
• Состояния интерфейса: загрузка, пустой список, ошибки.
• Улучшенная доступность: label, aria-label, live-region, клавиатурная навигация (ArrowUp/ArrowDown/Home/End).
• Частичные обновления DOM при рендере списка (без полного перерендера каждого элемента).

Технологии

• Frontend: Vanilla JavaScript (ES modules), HTML, CSS.
• API: JSON Server (локальный реальный CRUD) + fallback на JSONPlaceholder.
• Качество: ESLint, Prettier, Vitest (jsdom), Playwright.
• Контейнеризация: Docker + Docker Compose.
• CI: GitHub Actions (lint + format + unit + e2e + docker build).

Требования

• Node.js 22.x и npm 10+
• Docker + Docker Compose (опционально)

Локальный запуск

Установить зависимости:

npm install

Запустить фронт + API:

npm run dev

Открыть: http://localhost:8080

Отдельно:

npm run start   # только frontend
npm run api     # только JSON Server (http://localhost:3001)

По умолчанию приложение на localhost использует API http://localhost:3001. Если нужно, endpoint можно переопределить через URL-параметр:

http://localhost:8080/?api=https://example.com

Проверки качества (локально)

npm run format:check
npm run lint
npm test
npm run test:e2e:install
npm run test:e2e

Docker

Запустить frontend + API:

docker compose up --build app api

Открыть: http://localhost:8080

Остановить:

docker compose down

Проверки в Docker:

docker compose run --rm tests
docker compose run --rm app npm run lint
docker compose run --rm app npm run format:check
docker compose run --rm e2e

localStorage и миграции схемы

• Данные хранятся в ключе todo_list_state.
• Реализовано версионирование схемы (schemaVersion) и миграция со старого ключа todo_list_state_v2.
• При изменении структуры данных состояние автоматически нормализуется и обновляется.

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

• app.js — оркестрация приложения и обработка сценариев.
• api.js — HTTP-клиент и выбор backend endpoint.
• state.js — нормализация, фильтрация, сортировка, миграции и localStorage.
• ui.js — рендер, частичные обновления списка, обработка UI-событий.
• backend/db.json — база JSON Server.
• tests/ — unit-тесты.
• e2e/ — Playwright e2e.
• .github/workflows/ci.yml — CI пайплайн.

Roadmap

Уже реализовано

• TodoMVC-база: Toggle all, Clear completed, счетчик активных задач.
• Фильтры и URL-состояние (#/all, #/active, #/completed, q, project).
• Drag-and-drop reorder с сохранением порядка.
• Приоритет, дедлайн, inline-редактирование.
• Несколько проектов/списков.
• Темы light/dark с сохранением.
• Реальный backend-режим через JSON Server.
• Unit + E2E тесты и CI-пайплайн.
• Версионирование и миграции схемы localStorage.

Следующие шаги

• Редактирование/удаление проектов, перенос задач между проектами.
• Персистентный backend-режим для продакшена (например, Supabase/Postgres) через .env.
• Авторизация пользователей и разграничение данных по аккаунтам.
• Расширенные e2e-сценарии (ошибки сети, восстановление после offline, мобильный viewport).
• Напоминания по дедлайну (in-app/уведомления) и календарный вид.