Здесь находится описание тестового задания на позицию Front-End-разработчика в KazanExpress.
Если вы нашли его случайно - попробуйте сделать! Авось и вас к себе возьмём. 😉

RU | EN

Создать одностраничное TODO-приложение с использованием Vue.js,
с возможностью ведения/импорта/экспорта проектов.

Приложение может быть имплементировано в одном из уровней сложности:

• Easy - на данный момент решения этой сложности не принимаются;
• Medium - Easy с дополнительными усложнениями, минимально-оцениваемый функционал;
• Hard - Medium с дополнительными усложнениями;
• Insane - главный челлендж - примем с распростёртыми объятиями, если сделаете! 😉

каждый из которых имеет опциональные задания с более высокой оценкой.

Ниже приведены подробные требования к приложению, разделённые по сложности.
Каждая последующая сложность включает в себя все требования предыдущей как обязательные.

• Каждая новая вкладка в бразуере с приложением - отдельный проект со своим списком задач;
  Система переключения проектов в пределах одной вкладки считается нарушением этого требования!
• Редактируемое название проекта в качестве заголовка страницы;
• Список с задачами:
  • Добавление новой задачи в список;
  • Удаление любой задачи из списка;
  • Возможность пометить любую задачу сделанной и возможность убрать эту пометку (mark as done/not done);
• Вся информация (название проекта, список задач, состояние задач) должна сохраняться при перезагрузке страницы;

Опционально:

• Возможность добавлять подзадачи в любую задачу (с потенциально бесконечной глубиной);
• Поле ввода для поиска/фильтрации задач в списке (фильтр должен сохраняться после перезагрузки страницы);
• Возможность редактирования названия задачи после её создания;

Все требования easy, включая опциональные. А также:

• Возможность перемещать любые задачи (со всем списком подзадач) из любого открытого проекта в любой другой открытый проект;
• Нельзя использовать LocalStorage, Cookies, IndexedDB и WebSQL хранилища;
  Если ваше приложение пишет хоть что-нибудь в одно из этих хранилищ - требование считается невыполненным!
  Это касается и библиотек, которые используют эти типы хранилищ: например - vuex-multi-tab-state.
• Экспорт проекта в файл / импорт проекта из файла;
  • Имя сохраняемого файла должно соответствовать названию проекта.
• Drag-n-drop для перемещения задач в списке;
• Сохранение текущего фильтра для возможности его быстрого применения потом;
• Итоговое приложение должно весить не более 200 KB (сумма всех загружаемых файлов, исключая картинки);

Опционально:

• Наличие CSS-анимаций для drag-n-drop и фильтрации задач;
• Использовать TypeScript для 100% кодовой базы (исключая вёрстку и стили);
• Использовать Vue Composition API или vue@next;
• Использовать ESLint/TSLint для контроля качества кода (приветствуется использование настройки KazanExpress/TSLint);
• Использовать сборщик/бандлер (например, webpack) для сборки приложения в SPA;

Все требования medium, включая опциональные, а также:

• Итоговое приложение должно весить не более 100 KB (сумма всех загружаемых файлов, исключая картинки);
• Drag-n-drop с поддержкой тач-скрина;
• Масштабируемость на мобильные устройства до 320*480px (iPhone 4);
• Возможность быстрого просмотра и редактирования описания у любой задачи;

Опционально:

• SSR;
• PWA;
• Опция фильтрации задач по RegExp;

• Возможность добавлять/удалять именованные списки для задач, между которыми их можно перетаскивать (как в trello);

Мы можем только апплодировать вашим смелости и скиллу, если решитесь делать задание на этой сложности. 👏
Ну и ещё принять вас к себе с распростёртыми объятиями, конечно!

Все требования hard, включая опциональные, а также:

• Нельзя использовать Vue.js или любые другие фреймворки/библиотеки для клиентской части - только нативный JavaScript/TypeScript;
  В том числе:
  • Для реактивности/биндинга данных;
  • Для внесения изменений в DOM;
  • Для бизнес-логики;
  • Да, jQuery/React/Lodash/Underscore/Bootstrap тоже нельзя!
• Документация на JSDoc, по всем стандартам;
• Итоговое приложение должно весить не более 50 KB (сумма всех загружаемых файлов, исключая картинки);
• Итоговый скомпилированный проект должен работать на нативных ES6-модулях с помощью <script type="module">;
• Наличие Source-Maps для итогового приложения и инструкции по их включению;
• Полный набор горячих клавиш для каждого действия в приложении - создание/удаление/редактирование тасок/проектов, экспорт/импорт и прочее;
  (Обязательна инструкция со списком всех горячих клавиш.)
• Оценка качества кода "A" на Code Climate;

Опционально:

• Использовать Conventional Commitlint;
• Использовать CustomElements/WebComponents и Shadow DOM;
• 100% test coverage с использованием Jest/Mocha и Coveralls/Code Climate;
• Использовать travis.ci, now.sh, GitHub Pages или GitHub Actions для CI/CD;
• Использовать Service-Worker для уведомления пользователя о новых версиях;
• Взаимоисключающие пункты:
  • SSR без использования сторонних библиотек;
  • Отсутствие SSR и отсутствие бандлера (webpack, rollup, etc.), node_modules и прочего - т.е. нельзя использовать никакие библиотеки (кроме TypeScript) для обработки кода;

Всё, что не указано в требованиях, остаётся на усмотрение исполнителя задачи.

Опциональные требования сложности, которая выше текущей выполняемой, допустимы к имплементации и дадут дополнительные баллы.
Например, если вы решили выполнять задачу на сложности medium, выполнение опциональных требований из сложности hard даст преимущество при итоговой оценке.

В описании к решению нужно указать:

• Список выполненных требований;
• Инструкцию по запуску/развёртыванию приложения на Windows/Unix.

• 7 дней, с момента получения задания - для сложностей easy, medium и hard.
• 14 дней, с момента получения задания - для сложности Insane - не считая времени на опциональные задачи.