- Выберите любые несколько задач из списка ниже. Не нужно решать все задачи. Мы рассчитываем, что на выполнение тестового задания вы выделите 3-5 часов
- Делайте промежуточные коммиты. Как минимум 1 задача = 1 коммит, можно чаще
- Выложите репозиторий на Github или пришлите нам zip-архив
(не забудьте включить в него папку
.git
) - В файле
DONE.md
напишите, какие задачи вы выбрали для решения и любые другие комментарии
Вам предстоит работать над небольшим приложением для ведения списка дел (Todo List).
Развёрнутую версию проекта можно посмотреть в песочнице.
Самые базовые функции уже доступны в проекте, над многим нужно поработать.
Пользователь хочет расставлять задачи по приоритетам, чтобы видеть наверху списка самые важные задачи
- Добавьте возможность менять порядок задач с помощью drag'n'drop (можно воспользоваться, например, react-beautiful-dnd)
Пользователь хочет не забывать о своих задачах
- Добавьте возможность указывать время напоминания о задаче
- Добавьте браузерное уведомление для показа напоминания
Пользователь хочет классифицировать задачи, чтобы не путаться в них
- Добавьте возможность прикреплять теги к задаче
- Добавьте возможность поиска (фильтрации) задач по тегам
- Реализуйте возможность редактирования уже созданной задачи
- Добавьте синхронизацию задач между соседними вкладками — добавление или редактирование задачи в одной вкладке должно отображаться во второй открытой вкладке того же браузера (storage event)
- Предложите и реализуйте свои улучшения пользовательского опыта
При превышении доступного места в localStorage приложение падает с ошибкой
Setting the value of 'todoListState' exceeded the quota.
- Придумайте, как воспроизвести описанный кейс
- Исправьте ошибочное поведение
- Если заметили какой-то баг — опишите и исправьте его
- Подключите и настройте Prettier
- Настройте проверку форматирования кода на pre-commit hook (с помощью husky)
- Избавьтесь от
any
в интерфейсеTodoItemsAction
- Переведите код
todoItemsReducer
на ImmerJS
- Предложите и реализуйте свои технические улучшения (кода, инфраструктуры и т.д.)
Проект был развёрнут с помощью Create React App.
Используйте npm install
для установки зависимостей и npm start
для локального разворачивания проекта.
Больше информации можно найти в документации CRA.
- TypeScript
- React
- Material-UI
- Framer Motion