Задание: Используя API реализовать Github Dashboard

Необходимо используя API Github создать Front-end приложение, которое состоит из двух страниц:

1. Главная страница – список репозиториев с возможностью поиска и страницами
2. Карточка репозитория – страница с более детальной информацией по репозиторию

Главная страница

Ключевые элементы страницы:

• Поле для поиска репозиториев
• Список репозиториев
• Paginator – список страниц

При введении текста в Поле для поиска, должен происходить поиск по названию и выводиться его результат в Список репозиториев ниже.

Если в поле ничего не введено, то показывается список 10ти самых популярных репозиториев.

Порядок сортировки репозиториев – по в кол-ву звёзд на github (от большего к меньшему)

Примерная структура элементов списка:

[Название репозитория] - [кол-во звёзд на github] - [дата последнего коммита] - [ссылка на Github]

Внизу страницы есть Paginator вида [1, 2, 3, 4, 5]. Не показывать больше 10ти страниц.

При клике на вторую страницу показываются репозитории с 11 по 20 При клике на третью страницу показываются репозитории с 21 по 30 … и т.д.

Выбранная страница в Paginator должна отличаться по стилю от всех остальных.

При перезагрузке страницы состояние выбранных фильтров (поиска и страницы) должно сохраняться и использоваться для первоначального запроса.

Сохранять ответ от API на тысячи репозиториев в приложении нельзя, поиск должен происходить на стороне API.

При клике на название репозитория происходит переход на Карточку репозитория.

Карточка репозитория

Она должна иметь следующую структуру:

• [Название репозитория] - [кол-во звёзд на github] - [дата последнего коммита]
• [Фото владельца репозитория, если есть] - [Nickname владельца репозитория с ссылкой на него]
• [Список используемых языков в репозитории]
• [Краткое описание репозитория]
• [10 наиболее активных контрибьютеров]

Документация по API Github: https://developer.github.com/v3/

Требования:

• Исходный код решения должен быть выложен c вашего аккаунта на http://github.com/
• Готовые UI библиотеки использовать нельзя. Верстаем сами
• Проект должен запускаться командой npm start в консоли, после чего он должен быть доступен для просмотра по адресу http://localhost:3000/

Дополнительно:

Ограничений по технологиям кроме UI библиотеки нет – выбирайте любые инструменты для выполнения задания. Главное, чтобы вашим приложением можно было пользоваться в рамках описанных сценариев. Насчёт дизайна можете много не думать – ссылок, кнопок и заголовков будет достаточно.

Тем не менее сделайте это так, чтобы этим можно было пользоваться. Ведь в итоге вы будете проектировать интерфейсы для людей.