Тестовое задание ReactJS Developer

Тестовое задание. Разработка интерактивного IPad / IPhone. Адаптация сторон девайса в зависимости от разрешения экрана с использованием фреймворка ReactJS.

Тестовое задание содержит:

1. Папку с изображениями устройств и иконками.
2. Текстовое описание задания и требования.

Описание задания и требования:

1. Тестирование компетенции верстки. Верстка устройств (IPad/IPhone) . Всего 4 варианта: IPad вертикально, IPad горизонтально, IPhone вертикально, IPhone горизонтально. Устройства расположены по центру экрана, если высота экрана маленькая, устройство не должно прилипать к верхней границе окна, должен быть минимальный отступ. Размеры произвольные, но в рамках допустимых разрешений экрана (см. пункт 2).

2. Адаптация устройств происходит при изменении разрешения экрана. IPad горизонтально мы видим при разрешении более 1024px. От 768px и до 1024px ориентация IPad становится вертикальной. При разрешении менее 768px происходит смена IPad на IPhone. Соответственно IPhone горизонтально мы видим при разрешении от 568px до 768px и IPhone вертикально от 320px до 568px.

3. Экран IPad/IPhone содержит background. Внутри экрана находятся 2 окна с группами кнопок. В активном окне в зависимости от ориентации девайса мы видим всего 20 произвольных иконок (для горизонтальной ориентации 4 ряда по 5 иконок в каждом, и 5 рядов по 4 иконки в каждом для вертикальной). Смена окон происходит при клике на нужный переключатель, расположенный ниже активного окна. Снизу экрана расположено меню на размытом фоне с 4 произвольными иконками. При клике на иконку в меню должен всплывать попап с этой иконкой. Расположение областей можно увидеть в файле ipad.png.

4. Тестирование компетенции React.
   Иконки на экране девайсов должны быть перетаскиваемыми. Можно использовать сторонние библиотеки;
   Отображение текущего времени;
   Приложение должно конфигурироваться из json файла (список приложений);
   Возможность перемещать иконки на экране и выносить их в отдельный экран;
   Сохранять позиции и экраны в localStorage в зависимости от текущего типа устройства (IPad/IPhone).

5. Требования к приложению:

   • Сборка приложения через webpack с подключением contenthash;
   • Использовать SCSS для написания стилей;
   • Server Side Rendering.

Установка и запуск

Проект на основе Create React App. Так как в нем из коробки поддерживаются SCSS, contenthash.
После клонирования репозитория нужно сделать yarn install.

Запуск в режиме разработки, просмотр доступен по адресу http://localhost:3000/.

yarn start

Собрать production версию в папку build.

yarn build

Запустить SSR-сервер, просмотр доступен по адресу http://localhost:4000/.

yarn ssr