Webinar.ru — Тестовое задание для frontend-разработчиков

• Выберите любые несколько задач из списка ниже. Не нужно решать все задачи. Мы рассчитываем, что на выполнение тестового задания вы выделите 3-5 часов
• Делайте промежуточные коммиты. Как минимум 1 задача = 1 коммит, можно чаще
• Выложите репозиторий на Github или пришлите нам zip-архив (не забудьте включить в него папку .git)
• В файле DONE.md напишите, какие задачи вы выбрали для решения и любые другие комментарии

Задачи

Вам предстоит работать над небольшим приложением для ведения списка дел (Todo List).

Развёрнутую версию проекта можно посмотреть в песочнице.

Самые базовые функции уже доступны в проекте, над многим нужно поработать.

Новые фичи

F1. Приоритеты

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

• Добавьте возможность менять порядок задач с помощью drag'n'drop (можно воспользоваться, например, react-beautiful-dnd)

F2. Напоминания

Пользователь хочет не забывать о своих задачах

• Добавьте возможность указывать время напоминания о задаче
• Добавьте браузерное уведомление для показа напоминания

F3. Теги

Пользователь хочет классифицировать задачи, чтобы не путаться в них

• Добавьте возможность прикреплять теги к задаче
• Добавьте возможность поиска (фильтрации) задач по тегам

Доработки

I1. Редактирование

• Реализуйте возможность редактирования уже созданной задачи

I2. Синхронизация

• Добавьте синхронизацию задач между соседними вкладками — добавление или редактирование задачи в одной вкладке должно отображаться во второй открытой вкладке того же браузера (storage event)

I3. Свои идеи

• Предложите и реализуйте свои улучшения пользовательского опыта

Баги

B1. LocalStorage Quota

При превышении доступного места в localStorage приложение падает с ошибкой Setting the value of 'todoListState' exceeded the quota.

• Придумайте, как воспроизвести описанный кейс
• Исправьте ошибочное поведение

B2. Свой фикс

• Если заметили какой-то баг — опишите и исправьте его

Технические задачи

T1. Форматирование кода

• Подключите и настройте Prettier
• Настройте проверку форматирования кода на pre-commit hook (с помощью husky)

T2. Типизация

• Избавьтесь от any в интерфейсе TodoItemsAction

T3. Иммутабельность

• Переведите код todoItemsReducer на ImmerJS

T4. Свои идеи

• Предложите и реализуйте свои технические улучшения (кода, инфраструктуры и т.д.)

Работа с проектом

Проект был развёрнут с помощью Create React App.

Используйте npm install для установки зависимостей и npm start для локального разворачивания проекта.

Больше информации можно найти в документации CRA.

Используемый стек

• TypeScript
• React
• Material-UI
• Framer Motion