Demlabs Todo

Тестовое задание для web-разработчика Demlabs.

Приложение "Список задач" на SvelteKit с сохранением данных в IndexedDB. Можно создавать, редактировать и удалять задачи, отмечать их выполненными, искать и сортировать. Данные не пропадают между перезагрузками страницы.

Стек технологий

• SvelteKit
• TypeScript
• Tailwind CSS
• IndexedDB (через Dexie)
• Vite (сборка SvelteKit проекта)

В приложении не используются тяжелые UI-библиотеки и иконпаки, стилизация сделана на Tailwind CSS.

Основной функционал

• Создание задач с полями:

  • название
  • описание (необязательно)
  • статус (активная или завершенная)

• Отображение списка задач

• Поиск по названию

• Сортировка задач:

  • новые сверху
  • старые сверху
  • по алфавиту

• Изменение статуса задачи (активная / завершенная)

• Редактирование задачи инлайн в списке

• Удаление задач

• Сохранение данных в IndexedDB, задачи не пропадают при перезагрузке страницы

• Простая анимация появления и удаления элементов списка (Svelte transition fade)

• Уведомления об успешных и неуспешных операциях:

  • добавление
  • обновление
  • удаление
  • ошибки загрузки данных

Архитектура проекта

src/
  lib/
    db/
      index.ts            настройка Dexie и схемы IndexedDB
    types/
      todo.ts             типы Todo и TodoStatus
    stores/
      todoStore.ts        функции для работы с IndexedDB (CRUD)
    components/
      TodoForm.svelte     форма добавления задачи
      TodoList.svelte     список задач
      TodoItem.svelte     отдельный элемент списка, режим просмотра и редактирования
      SearchBar.svelte    строка поиска
    
  routes/
    +layout.svelte        базовый лейаут и оболочка приложения
    +page.svelte          главная страница, сборка всех компонентов и бизнес-логика

Основные принципы:

• Логика работы с данными изолирована в lib/db и lib/stores.

• Компоненты максимально "тупые" и общаются через события createEventDispatcher.

• Страница +page.svelte отвечает за:

  • загрузку данных
  • обработку событий от компонентов
  • поиск, сортировку и отображение уведомлений.

Хранение данных

Для локального хранения задач используется IndexedDB через библиотеку Dexie.

• База: demlabs_todo_db
• Таблица: todos

Структура записи:

• id - автоинкремент
• title - название задачи
• description - описание (опционально)
• status - статус задачи (active или completed)
• createdAt - дата создания в формате ISO-строки
• updatedAt - дата последнего обновления в формате ISO-строки

Вся логика работы с БД сосредоточена в src/lib/stores/todoStore.ts:

• getAllTodos - получение всех задач
• createTodo - создание задачи
• updateTodo - обновление задачи
• toggleTodoStatus - смена статуса задачи
• deleteTodo - удаление задачи

Страница +page.svelte не знает деталей реализации IndexedDB и взаимодействует с задачами только через эти функции.

Запуск проекта

npm install
npm run dev

По умолчанию приложение будет доступно на http://localhost:5173 или другом порту, который выведет Vite.

Адаптивность

Интерфейс спроектирован под мобильные и десктопные устройства.

• На мобильных ширинах:

  • содержимое занимает всю ширину экрана с отступами
  • элементы интерфейса выстроены в колонку

• На десктопах:

  • используется центрированный контейнер max-w-3xl
  • форма, строка поиска и список задач выглядят компактно и читаемо

Верстка реализована на Tailwind CSS, без использования сторонних UI-библиотек.

Использование ИИ при разработке

При выполнении задания использовались ассистенты в Cursor для:

• разбиения задачи на этапы и планирования реализации

• подбора структуры проекта и модулей:

  • lib/db
  • lib/stores
  • lib/components

• генерации шаблонов компонентов на Svelte с TypeScript:

  • форма с createEventDispatcher
  • список и элементы списка
  • панель поиска

• обсуждения вариантов обработки ошибок и отображения уведомлений

• помощи в подготовке документации (README.md, PROMPTS.md) и описания этапов работы

Код и финальные решения по архитектуре, структуре данных и UX принимались вручную с учетом требований тестового задания. Примеры промптов, использованных при разработке, приведены в файле PROMPTS.md.

Этапы работы и примерное время

Оценка времени ориентировочная и может немного отличаться от фактической.

1. Этап 1. Инициализация проекта

   • Настройка SvelteKit, TypeScript, Tailwind
   • Базовый лейаут, заголовок и плейсхолдер на главной Примерное время: 30 минут

2. Этап 2. Реализация основной функциональности в памяти

   • Описание типов Todo и TodoStatus

   • Реализация компонентов:

     • TodoForm
     • TodoList
     • TodoItem
     • SearchBar

   • Локальное состояние на странице, поиск по названию Примерное время: 30 минут

3. Этап 3. Подключение IndexedDB

   • Настройка Dexie и схемы БД
   • Реализация CRUD-операций в todoStore
   • Интеграция с главной страницей, базовая сортировка по дате создания Примерное время: 1–1.5 часа

4. Этап 4. Улучшение UX и полировка

   • Редактирование задач инлайн
   • Уведомления об успехе и ошибках операций
   • Дополнительные варианты сортировки
   • Анимации появления и удаления задач (transition fade)
   • Финальная типизация, проверка адаптивности и стилистики Примерное время: 30 минут

Общее примерное время выполнения: 3 часа.