TODO List 📝

Веб-приложение, совмещающее блок "Обо мне" с данными из GitHub и удобный организатор списка дел.

✨ Ключевая функциональность

• Живой блок "Обо мне" с подгрузкой профиля и репозиториев GitHub через Octokit.
• Заглушки-загрузчики, которые подстраиваются под мобильный и настольный формат.
• Список дел с добавлением, редактированием, завершением и удалением задач.
• Перетаскивание карточек через Drag and Drop и сохранение порядка.
• Фильтрация задач по статусам и переключение направления сортировки.
• Сохранение состояния в localStorage, чтобы данные не терялись при перезагрузке.
• Адаптивная вёрстка и аккуратные анимации для комфортной работы на любых устройствах.

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

• Интерфейс: React, TypeScript, React Router.
• Управление состоянием: Redux Toolkit.
• Работа с внешними данными: GitHub REST API, localStorage.
• Интерфейс и анимации: @hello-pangea/dnd, react-content-loader.
• Сборка и окружение: Node.js, NPM Scripts, Vite.
• Контроль качества: ESLint, Stylelint, Prettier, TypeScript.

🚀 Установка и запуск

1. Убедитесь, что установлен Node.js версии 22 или новее.

2. Клонируйте репозиторий и перейдите в папку проекта:

   git clone https://github.com/IrinaRyazanskaya/todo-list.git
   cd todo-list

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

   npm install

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

   npm run start

   Приложение будет доступно по адресу http://localhost:5173/.

5. Дополнительные команды:

   npm run build      # сборка для продакшена
   npm run preview    # локальный просмотр собранной версии
   npm run format     # автоформатирование с помощью Prettier
   npm run lint       # запуск линтеров для проверки качества кода
   npm run lint-fix   # автоматическое исправление ошибок линтинга

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

todo-list/
├── src/
│   ├── components/         # Компоненты интерфейса: About, TODO, Navigation и вспомогательные блоки
│   ├── store/              # Конфигурация Redux Toolkit и слайс списка дел
│   ├── types/              # Типы данных для GitHub API и состояния приложения
│   └── utils/              # Вспомогательные утилиты (работа с localStorage)
├── public/                 # Статические файлы, иконки и манифест
├── dist/                   # Итоговая сборка (создаётся командой build)
├── package.json            # Скрипты npm и список зависимостей
├── tsconfig.json           # Настройки TypeScript
├── vite.config.ts          # Конфигурация Vite
├── eslint.config.mjs       # Правила линтинга JS/TS
├── .stylelintrc.json       # Правила линтинга стилей
└── .prettierrc.json        # Настройки автоформатирования

💡 Что реализовано / изучено

• Настроено безопасное взаимодействие с GitHub REST API и обработка ошибок загрузки.
• Собрана надёжная связка React + TypeScript + Redux Toolkit с сохранением данных в браузере.
• Реализовано перетаскивание карточек поверх Redux без потери порядка элементов.
• Внедрена адаптивная сетка и заглушки-загрузчики для плавного пользовательского опыта.

📚 Решённые проблемы и технические задачи

• Быстрое перетаскивание: Синхронизация Drag and Drop с Redux и точный пересчёт индексов без лишних перерисовок.
• Надёжное хранение данных: Отдельные утилиты для сохранения в localStorage и аккуратное восстановление стандартных значений при ошибках.
• Единый пользовательский опыт: Выбор подходящих заглушек-загрузчиков для мобильных и настольных экранов.
• Интеграция с внешним API: Учёт статусов ответов GitHub и понятные сообщения об ошибках для пользователя.