github-dashboard

Live demo

Проект построен на стеке React - Redux , для маршрутизации использовался react-router-dom .

Для демонстрации навыков создания UI с нуля - сторонии UI библиотеки не использовались .

Для получения данных использовался GitHub API .

GitHub Dashboard

состоит из двух страниц:

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

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

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

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

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

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

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

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

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

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

• поиска по репозиториям
• получения коммитов по конкретному репозиторию

Paginator сделан без использования стороних UI библиотеки .

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

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

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

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

имеет следующую структуру:

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

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

• поиск репозитория по id
• получения языков репозитория
• получения контрибьюторов репозитория
• получения коммитов репозитория

Проект запускаеться в консоли командой npm start после чего он доступен для просмотра по адресу http://localhost:3000/