Управляй задачами легко: Вместе с ToDo

Мои задачи

Техническая документация: ToDo List

Описание проекта:

ToDo List — это приложение для управления задачами, реализованное на Next.js с использованием App Router. Оно предоставляет интерактивный пользовательский интерфейс с фильтрацией, анимациями и локальным сохранением данных.

Используемые технологии:

  • Next.js 15.1
  • Zustand
  • TypeScript
  • Motion
  • LocalStorage
  • TailwindCSS

Архитектура и функциональность приложения

  • 1

    Xранилище (Zustand)

    • - Создание глобального состояния с использованием Zustand для централизованного управления данными.
    • - Добавление, редактирование и удаление задач с мгновенным обновлением состояния без перерендера всего списка.
    • - Разделение логического (realCompleted) и анимированного (animationCompleted) состояний для обеспечения плавных переходов и отклика интерфейса.
    • - Локальное хранилище (LocalStorage) используется для сохранения данных задач и текущих фильтров с целью восстановления состояния после перезагрузки страницы.
  • 2

    Пользовательский интерфейс

    • - Контролируемые компоненты для ввода данных обеспечивают валидацию и предотвращают ошибки при добавлении задач.
    • - Динамическая генерация списка задач с поддержкой адаптивного отображения и фильтрации.
    • - Сохранение текущего фильтра в LocalStorage позволяет сохранять настройки пользователя при обновлении или повторном открытии приложения.
    • - Поддержка мобильных устройств и отзывчивый дизайн для удобного использования на различных экранах.
    • - Интуитивно понятные кнопки управления задачами и фильтрацией для повышения юзабилити.
  • 3

    Анимации (Motion)

    • - Анимации добавления и удаления задач, улучшающие визуальное восприятие изменений в списке.
    • - Задержка в 500 мс при переключении состояния задач для обеспечения синхронного завершения анимаций и изменения логического состояния.
    • - Эффекты переходов и плавных изменений при фильтрации задач для повышения интерактивности.
    • - Использование Motion для гибкой настройки анимаций, появление и исчезновение элементов.
  • 4

    Фильтрация задач

    • - Динамическая фильтрация задач по состоянию (активные, выполненные, все задачи) с мгновенным откликом интерфейса.
    • - Сохранение выбранного фильтра в LocalStorage для удобства пользователя и восстановления предпочтений при повторном посещении страницы.
    • - Поддержка комбинированной фильтрации, включая поиск и сортировку по дате добавления или состоянию выполнения.

Подведение итогов

  • (1)
    Гибкое управление состоянием через Zustand и сохранение данных в LocalStorage для долговечности.
  • (2)
    Плавные анимации и интерактивность с помощью Motion, улучшающие пользовательский опыт.
  • (3)
    Адаптивный и интуитивный дизайн на базе TailwindCSS для удобства на любых устройствах.