Martian knapsack: тестовое задание на фронтенд-разработчицу(ка) Злых марсиан

Мотивация

Если вы читаете эти строки, то мы уже проверили ваши знания о мире фронтенда, архитектуре и разработке приложений.

Этот этап посвящен другим вещам. Во-первых, мы проверим ваше понимание интерфейсов, умение с ними работать и улучшать. Проект настроен и содержит всю необходимую бизнес-логику: это позволит не отвлекаться и сфокусироваться на техническом задании.

Во-вторых, мы хотим проверить ваши навыки коммуникации с заказчиком: умеете ли вы задавать вопросы и работать с требованиями бизнеса.

Злые марсиане — extraterrestrial product development consultancy (https://evilmartians.com). Часто всего несколько строк кода могут значительно улучшить продукт клиента. Нам важно, чтобы наши инженеры хорошо разбирались в современных фронтенд-оптимизациях. Поэтому мы разработали тестовое задание, которое дает возможность продемонстрировать знания в этой области.

Что такое Martian knapsack?

Martian knapsack — приложение, идея которого родилась из известной проблемы Knapsack problem. Принцип работы простой — вы собираетесь в путешествие на Марс, в вашем распоряжении склад техники и снаряжения, но вместимость грузового отсека ракеты ограничена. Нужно выбрать ту комбинацию предметов, которая поместится в грузовой отсек и при этом будет максимально полезна при колонизации красной планеты.

Как выполнять тестовое?

1. Ознакомьтесь с репозиторием и Техническим заданием.
2. Не стесняйтесь задавать все интересующие вас вопросы. Это можно делать и по ходу выполнения задания.
3. Назовите сроки выполнения задания: дату, когда все будет сделано, и время в часах, которое потребуется на выполнение задания.
4. Выполните тестовое задание.
5. Запушьте все изменения в отдельную ветку, откройте PR. В PR напишите о том, что вы сделали, как это работает, на что стоит обратить внимание.
6. Дайте нам знать о том, что выполнили задание.

Как работать с репозиторием?

Мы настроили для вас минималистичный и комфортный boilerplate для работы.

Ключевые слова: React, Webpack, PostCSS, CSS Modules, Linting.

На precommit-hook настроены линтеры и prettier.

Установить git hooks: npm run githooks:update

Сборка проекта: npm run build

Запуск development-сервера: npm run start

Development-сервер запускается на: http://localhost:5000/

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

Файлы конфигурации

Редактировать файлы конфигурации и сборки проекта стоит лишь в двух случаях:

• Вы хотите настроить что-то под себя (например, добавить ваше любимое ESLint-правило)
• Вы хотите добавить дешевую (не требующую больших усилий) фронтенд-оптимизацию. Например, вы знаете о каком-то интересном свойстве какого-то модуля, про которое мы забыли, или вам кажется, что какая-то часть конфигурации не соответствует требованиям проекта.
• Если вы делаете какое-то классное изменение, пожалуйста, не забудьте описать его в PR

1. Добавлено eslint-правило `import/prefer-default-export: 1` — т.к. я очень люблю дефолтные импорты

Файлы проекта

• Файлы приложения расположены в директории ./client
• В папке __mock_data__ расположены тестовые данные. Оптимизировать картинки внутри не нужно.
• Application store — наивная имплементация бизнес-логики приложения. Её достаточно для выполнения тестового задания. Вы можете её менять на своё усмотрение.

Дизайн

В папке design лежит макет для Figma с текущим видом страницы Dashboard и некоторыми ассетами

Как работать со Злыми марсианами?

Обычно Злые марсиане выступают в роли консультантов, но в рамках тестового задания мы переворачиваем всё вверх ногами 🙃. Теперь Злые марсиане — заказчик, а вы нас консультируете!

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

Требования проекта:

• Должна быть возможность пользоваться продуктом с клавиатуры
• Продукт должен работать в последних двух версиях десктоп-браузеров (Chrome/Safari/Opera/Firefox/Edge), Android(Chrome/Firefox/Opera) и iOS (Safari)
• Решения по проекту должны быть обусловлены бизнес-требованиями. Старайтесь избегать оптимизаций и продуктовых решений, требующих большого количества времени и усилий

Задание 1: Релиз страницы Dashboard

Сейчас страница Dashboard свёрстана, но ещё не готова к релизу. Ей не хватает некоторых важных UX/UI-решений.

1. Подумайте о следующих вопросах и добавьте недостающие части интерфейса:
   • Всем ли удобно пользоваться функционалом страницы?
   • Всегда ли пользователь понимает, что происходит?
   • Как проблемы с сетью влияют на отображение страницы?
2. В результате должен получиться красивый, удобный и доступный интерфейс для заполнения грузового отсека снаряжением

Задание 1.1: Перемещение предметов между складом и грузовым отсеком

1. От вас требуется придумать интерфейсное решение для перемещения предметов между колонками
2. Бизнес-логика находится в actions — moveItemToStorage и moveItemToCargoHold
3. Не добавляйте drag'n'drop❗️

Задание 2: Интерфейс добавления нового предмета

Задача: добавить модальное окно (попап) с формой создания нового предмета.

1. На странице Dashboard есть кнопка Add new cargo, которая должна вызывать модальное окно с формой создания нового предмета
2. После отправки формы в колонку Storage добавляется новый предмет
3. Бизнес-логика находится в actions — addNewItems
4. Сейчас создание предмета происходит локально. Попробуйте предусмотреть случай, в котором мы действительно отправляем форму на реальный сервер

Задание 3: Мобильная версия

Задача: добавить мобильную версии. Важно сохранить весь функционал и корректное отображение интерфейса

1. Начиная с ширины экрана 375px приложение должно корректно отображаться и не терять в функциональности

Задание 4: Launch

Микрозадача: добавьте на страницу Dashboard кнопку с текстом Launch (это главный Call-to-Action на странице), которая ведёт по адресу /launch ...

... нажмите на неё и отправляйтесь на Марс :)