Startup Summer 2021 – задание
🌞

Startup Summer 2021 – задание

⚠️

Приём заявок окончен

Для того, чтобы попасть на Startup Summer 2021, тебе предстоит выполнить тестовое задание.

Когда задание будет готово, пройди регистрацию. Регистрация открыта до 1-го июня.

Подготовка

Мы собрали Материалы, которые помогут тебе сделать тестовое задание 😎

🧐
Материалы для подготовки

📞

Если будут вопросы или проблемы, связывайся с нами через startup-summer@paralect.com

🕊️

Чат в телеграме, где можно обсуждать задание и задавать вопросы: Paralect Chat

Задание

Написать приложение для отображения информации о пользователе GitHub и списка его репозиториев в соответствии с дизайном.

Дизайн

🎨🎨🎨🎨 Дизайн в Figma 🎨🎨🎨🎨

Дизайн тестового задания с комментариями
Дизайн тестового задания с комментариями
🔲

Figma — это инструмент для создания дизайнов, с ним ты будешь часто сталкиваться в своей работе. Больше о ней — здесь. Зарегистрируйся в Figma, чтобы просматривать параметры компонентов.

Требования

  • Используй create-react-app для создания приложения .
  • Храни код своего приложения в GitHub. Инструкция.
  • Чтобы твоё приложение было доступно по ссылке, как и любой другой сайт, его нужно задеплоить. Используй Vercel. Инструкция.

Функциональность

  • На странице должна быть поисковая строка для ввода username пользователя.
  • При вводе username и нажатии кнопки Enter происходят запросы на API GitHub. При получении ответов от сервера необходимо отобразить данные пользователя и список его репозиториев.
  • 💡

    Для выполнения тестового задания тебе понадобятся эти эндпоинты GitHub: – List repositories for a userGet a user

  • При нажатии на username пользователя, должен открыться его профиль в новой вкладке.
  • 💡

    Используйте поле html_url из полученного профиля пользователя в качестве ссылки.

  • При нажатии на имя репозитория, должна открыться его страница в новой вкладке.
  • 💡

    Используйте поле html_url из полученного списка репозиториев в качестве ссылки.

Дополнительная функциональность

  • Отображать loader (пример) во время ожидания ответа сервера
  • Показывать отдельную страницу (empty state), если у пользователя нет репозиториев
  • Показывать отдельную страницу (empty state), если пользователя с username не существует.
  • Реализовать постраничный просмотр репозиториев. Можно использовать react-paginate.
  • Минимальная ширина страницы, при которой она отображается корректно – 320 рх. Все указанные в задании элементы присутствуют как на десктопной, так и на мобильной версии

На что мы будем смотреть

  • Вёрстка соответствует дизайну
  • Основной функционал реализован
  • Дополнительный функционал реализован
  • Код разбит на React компоненты
  • Чистота кода