"AI Task Planner — Планирование задач и список покупок"

16.07.2026
#React#Next.js#TypeScript#AI

Сделал удобный менеджер задач, планировщик и список покупок в одном приложении.


Скриншоты

Главная страница

Создание задачи

Список покупок


Как работает

Простое приложение для задач. Пишешь текстом что нужно сделать — оно само распознаёт дату, время и приоритет.

Пример:

Позвонить маме завтра в 15:00

Не надо выбирать дату в календаре, выставлять время в отдельных полях. Просто текст.


Зачем

Надоело заполнять 5 полей для одной задачи. Хотелось быстрее.

Ещё списки покупок удобно делать — пишешь через запятую молоко, хлеб, сыр и получаешь чекбоксы, чтобы отмечать купленное.


Из чего сделано

  • Next.js 15 — фреймворк
  • React 19 — библиотека
  • TypeScript — чтобы меньше багов
  • Tailwind CSS — стили
  • Framer Motion — анимации для красоты
  • Ollama — локальный AI для распознавания текста

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

1. Клонировать репозиторий

git clone https://github.com/dmironovru/ai-task-planner.git
cd ai-task-planner

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

npm install

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

npm run dev

Откройте http://localhost:3000

4. (Опционально) Установить Ollama для AI-функций

# Установить Ollama
curl -fsSL https://ollama.com/install.sh | sh

# Скачать модель (лёгкая, работает на любом ПК)
ollama pull llama3.2

# Запустить сервер Ollama (в отдельном терминале)
ollama serve

Без Ollama приложение работает в обычном режиме — распознавание дат и приоритетов работает через встроенные правила.

Всё хранится в localStorage браузера. Никаких серверов, баз данных, регистрации.


Что работает

  • ✅ Задачи с датой и временем
  • ✅ Списки покупок с кликабельными товарами
  • ✅ Напоминания (браузерные уведомления + звук)
  • ✅ Шаблоны для быстрых задач
  • ✅ Календарь с индикаторами задач
  • ✅ Тёмная тема (glassmorphism)
  • ✅ Фильтры по дате и статусу

Что не работает (пока)

Голосовой ввод хотел сделать, но Google Speech API заблокирован. Whisper.cpp пробовал — распознавал [музыка] вместо речи. Идею с голосовым вводом пока отложил на будущее.


С чем помучился

1. Timezone Bug (самый противный)

Даты отображались на день раньше. Оказалось, toISOString() конвертирует в UTC и для Москвы это вчера.

Решение: отказался от toISOString() в пользу ручного форматирования:

// ❌ Было
const dateKey = new Date(year, month, day).toISOString().split('T')[0]

// ✅ Стало
const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`

2. Дублирующиеся ключи React

React ругался на дублирующиеся ключи в шаблонах. У некоторых id был пустой строкой.

Решение: функция для безопасных ключей:

const getSafeKey = (template, index) => {
  if (template.id && template.id.trim() !== '') {
    return template.id
  }
  return `template-${index}-${template.label.replace(/\s+/g, '-')}`
}

Исходники

Код открыт на GitHub: github.com/dmironovru/ai-task-planner

Можно посмотреть код, покритиковать.