Тестовое задание: React, Front dev middle
Благодарим за проявленный интерес!
Ниже представлено тестовое задание на позицию одного из разработчиков Frontend React.
GET https://test2.sionic.ru/api/{model}
Где {model}— название сущности (например, Products или Categories).
Запрос на получение конкретной записи по ID
GET https://test2.sionic.ru/api/{model}/{id}
Доступные параметры запроса:
Параметрыпередаются в JSON-кодированной строке. –Фильтрация (filter)
Позволяет отфильтровать данные по любому свойству сущности.
?filter={"category_id":20}
Этот запросдля модели Products вернет все товары с category_id = 20. Можно передавать несколько значений в массиве:
?filter={"category_id":[20,21,22]}
Такой запрос вернет товарыиз категорий с id = 20, 21, 22.
– Выборка (range)
Позволяет запрашивать данные в диапазоне.
Пример запроса: &range=[0,24] Вернет 25 записей(с 0-й по 24-ю).
Ограничение не более 50 записей за один запрос
1.2. Методы API
Ниже представлено тестовое задание на позицию одного из разработчиков Frontend React.
Тестовое задание
1 Описание
Необходимо разработать простое приложение на React.js с TypeScript, используя MobX. Приложение должно получать список товаров и категорий по сети, отображать их на экране и предоставлять возможность добавлять товары в корзину и оформлять заказ.Корзина и заказ, для упрощения реализации, должны храниться локально.
1.1 Данные
Данные - несколько категорий, содержащие товары.
Для получения данных реализован REST API, к которому отправляются запросы по следующему шаблону:GET https://test2.sionic.ru/api/{model}
Где {model}— название сущности (например, Products или Categories).
Запрос на получение конкретной записи по ID
GET https://test2.sionic.ru/api/{model}/{id}
Доступные параметры запроса:
Параметрыпередаются в JSON-кодированной строке. –Фильтрация (filter)
Позволяет отфильтровать данные по любому свойству сущности.
?filter={"category_id":20}
Этот запросдля модели Products вернет все товары с category_id = 20. Можно передавать несколько значений в массиве:
?filter={"category_id":[20,21,22]}
Такой запрос вернет товарыиз категорий с id = 20, 21, 22.
– Выборка (range)
Позволяет запрашивать данные в диапазоне.
Пример запроса: &range=[0,24] Вернет 25 записей(с 0-й по 24-ю).
Ограничение не более 50 записей за один запрос
1.2. Методы API
Описание методов:
Получение категорий:
GET https://test2.sionic.ru/api/Categories
Получение списка товаров:
GET ..api/Products?range=[0,24]&filter={"category_id":20}
Свойства товара (Products)
● name — название товара
● category_id — ID категории
● description — описание товара
Получение изображений товаров:
GET ..api/ProductImages?filter={"product_id":[1,2]}
Получение вариаций товара (для определения цены):
Каждый товар может иметь несколько вариаций, но отображать нужно только первую.
GET ..api/ProductVariations?filter={"product_id":[1,2]}
Свойства вариации (ProductVariations)
● product_id — ID товара
● price — цена товара
● stock — количество в наличии
1.3 Приложение
Внешний вид приложениядолжен соответствовать макету в Figma:Обратите внимание:
- Макет может содержать дополнительные интерактивные элементы,но они не требуют реализации механики взаимодействия.
- В правой части расположены баннеры,которые должны быть видны на любом разрешении экрана, но не предполагают переходов.
- Иконка профиля, адреси нижняя частьмакета должны быть сверстаны, но без активных переходов.
Обязательные требования
- Использование MobX в качестве state-менеджера.
- Вывод товаровс подгрузкой (infinite scroll).
- Адаптивная версткадля мобильных устройств (обязательно для страницыс товарами, страница с корзиной – по возможности).
Приложение должно быть написано на React, запускаться в современных браузерах и при старте отображать экран со списком категорий и товаров.
2.1 Категории
На экране категорий должны отображаться:
- Все категории, полученные с сервера.
- Кнопка "Все товары" (показывает список товаров без учета категорий).
- Возможность выбора категории для отображения товаров только из этой категории.
2.2 Товары
На экране товаров отображается список товаров выбранной категории.
Каждый товар содержит:
- Название
- Описание
- Цена
- Кнопку "Добавить в корзину" (добавляет товар в корзину).
2.3 Корзина
Отдельная страница с отображением выбранных товаров.
Функциональность:
- Изменение количества каждого товара.
- Удаление товаров из корзины.
- Очистка всей корзины.
- Кнопка "Оформить заказ" (открывает модальное окно для оформления).
2.4 Оформление заказа
При оформлении переход на страницу с заполнением необходимых полей:
- Имя
- Адрес
- Телефон
- Время
После успешного заполнения и нажатия кнопки "Сделать заказ":
- Корзина очищается.
- Пользователь перенаправляется обратно на страницу со списком товаров.
Готовое тестовое задание необходимо отправить по e-mail:
📩 egor@sionic.ru
или Telegram
Проверяет тестовое задание:
👨💼 CEO проекта – Зубов Егор
Сроки выполнения
- Продолжительность выполнения задания – около 8 часов.
- Ожидаем выполнения в течение недели с момента отправки задания.
- Рассмотрение результатов – до 5 рабочих дней.
- В письме обязательно укажите время, потраченное на выполнение задания.
Оформление отправки
✅ Тема письма: "10002-1 Frontend JS"
✅ В письме должен быть архив с исходным кодом или ссылка на приватный репозиторий.
✅ Если требуется пояснение по реализации, приложите файл README.txt в корневую папку проекта.
Интересно кандидатам ✅
Процесс оценки тестового задания на позицию разработчика React JS включает несколько ключевых аспектов, чтобы всесторонне оценить квалификацию и умения кандидата. Вот основные шаги этого процесса:
- Функциональность приложения: Оценка начинается с проверки, удовлетворяет ли созданное приложение всем поставленным функциональным требованиям. Это включает в себя проверку всех пользовательских сценариев и требований к функционалу, описанных в задании.
- Качество кода: Внимание уделяется чистоте и структурированности кода. Оценивается, насколько код легко читается, следует ли он принципам DRY (Don't Repeat Yourself) и KISS (Keep It Simple, Stupid), а также использование современных функций и практик ECMAScript.
- Адаптивность и визуальное оформление: Проверяется, насколько хорошо интерфейс адаптирован для различных устройств и размеров экранов. Также оценивается общий визуальный стиль приложения и его соответствие современным стандартам дизайна.
- Производительность: Анализируется, насколько эффективно приложение использует ресурсы, скорость его работы и отзывчивость интерфейса.
- Документация и комментарии: Проверяется, насколько полно и понятно кандидат описал свою работу в комментариях в коде. Если есть отдельное описание оно также проверяется.
Тех, которые доказывают свою ценность через дело; чьи результаты говорят сами за себя, делая неизбежным признание вклада и повышение роли в команде.
Текущий состав разработки включает в себя 2 бэкенд-разработчика, специалиста по UX, бизнес-аналитика, а также 2 фронтенд-разработчика на React. Сейчас идёт усиление направления Fronend разработки.
Планируется выход бэкенд-разработчиков. В бизнес-процессе также участвуют специалисты по финансовому и бухгалтерскому учету, директор в роли Product Owner.
Планируется выход бэкенд-разработчиков. В бизнес-процессе также участвуют специалисты по финансовому и бухгалтерскому учету, директор в роли Product Owner.
Отдаём приоритет при оформлении самозанятым и ИП, но базовой формой оформления служит оформление по трудовой в рамках законодательства.
Гибридный график для работы является основным для сотрудников внутри офиса. Большинство сотрудников работают в компании 3 дня в офисе и 2 дня из дома
Компания гибко подходит к сотрудникам в плане графика и выбора рабочего времени. Основным критерием оценки служит выполнение поставленных перед ним задач
Спринты в OpenProject, общие созвоны - раз в неделю (при необходимости чаще), оперативное общение в Telegram. Работа по большей части самостоятельная в выборе оптимальных решений. Важным качеством выделяется возможность и умение обосновать выбор того или иного решения. Обязательное покрытие проекта тестами при высокой скорости разработки.
Документация - Notion
Документация - Notion
Мы ищем человека, который разделяет наши ценности: быстрое решение вопросов, открытость в коммуникации и стремление к общей цели. Нам важно, чтобы каждый член команды мог общаться на "ты", создавая атмосферу доверия и коллективной работы. Мы ценим прямоту и инициативу, не любим тратить время на бюрократию и ритуалы, которые могут замедлить наши процессы.
Если ты готов внести свой вклад в наше командное усилие, где каждый человек ценен и где главное - это решение задач, то мы ждем именно тебя.
Если ты готов внести свой вклад в наше командное усилие, где каждый человек ценен и где главное - это решение задач, то мы ждем именно тебя.
Наша компания создает продукты, которые будут полезны вашим детям или родителям - качественные и простые в использовании. Мы основываемся на инновационной бизнес-модели B2P, где потребитель становится активным участником процесса производства товаров и услуг, которыми он пользуется. Этот подход сочетает в себе две эффективные модели бизнеса: B2B (бизнес для бизнеса) и B2C (бизнес для клиентов). Поэтому мы ищем разработчиков, которые будут также активными участниками нашего продукта, будь то как поставщики или потребители.
Децентрализованный маркетплейс, где логистические партнеры обеспечивают доставку, производители предоставляют достоверную информацию о товарах, поставщики получают уникальные инструменты для дистрибуции. Комиссия составляет до 1%, а рекламы и маркетинга нет. В проекте реализована модель социальной коммерции как для B2B, так и для B2C, а также полностью реализована модель B2P. Покупатель становится неотъемлемой частью маркетплейса, получая деньги как просьюмер.
Проект содержит серию приложений и интерфейсов.
Проект содержит серию приложений и интерфейсов.
После успешного прохождения тестового задания кандидаты получают приглашение на техническое интервью с CEO компании. Интервью проводится в формате видеозвонка и занимает около 30 минут. Этот этап позволяет оценить глубину технических знаний кандидата и его способность к решению практических задач.
В дополнение к техническому интервью, также запланирован отдельный диалог с непосредственным куратором или руководителем внутри команды. Это обсуждение нацелено на выяснение способностей кандидата к командной работе и его профессиональных интересов в контексте задач, которые предстоит решать.
Оба этапа интервью являются ключевыми для окончательного решения о приеме на работу и помогают обеим сторонам лучше понять потенциал для успешного сотрудничества.
В дополнение к техническому интервью, также запланирован отдельный диалог с непосредственным куратором или руководителем внутри команды. Это обсуждение нацелено на выяснение способностей кандидата к командной работе и его профессиональных интересов в контексте задач, которые предстоит решать.
Оба этапа интервью являются ключевыми для окончательного решения о приеме на работу и помогают обеим сторонам лучше понять потенциал для успешного сотрудничества.
Проект амбициозный. Мы уже создали компании в Европе, чтобы начать расширение проекта. Наши планы на будущее включают преодоление границ стран и работу на международном уровне.
Планируемый срок старта проекта - конец 2025 года в форме релизной версии с ограниченным количеством поставщиков, которые будут участвовать в проекте.
Мы предлагаем зарплату в рамках указанной суммы по вакансии, однако, окончательный уровень оплаты труда может быть обсужден после того, как вы выполните тестовое задание и мы оценим ваши возможности в рамках интервью. Это позволит нам лучше понять ваш уровень компетенций и соответствующим образом оценить ваш возможный вклад в нашу компанию. Кандидаты, которые обладают навыками коммерческой разработки React Native обладают дополнительными возможностями для профессионального роста.
=