Проект построен на стеке React - Redux , для маршрутизации использовался react-router-dom .
Для демонстрации навыков создания UI с нуля - сторонии UI библиотеки не использовались .
Для получения данных использовался GitHub API .
состоит из двух страниц:
- Главная страница – список репозиториев с возможностью поиска и страницами
- Карточка репозитория – страница с более детальной информацией по репозиторию
Ключевые элементы страницы:
- Поле для поиска репозиториев
- Список репозиториев
- Paginator – список страниц
При введении текста в Поле для поиска, происходит поиск по названию и выводиться его результат в Список репозиториев ниже.
Если в поле ничего не введено, то показывается список 10ти самых популярных репозиториев.
Порядок сортировки репозиториев – по в кол-ву звёзд на github (от большего к меньшему).
Структура элементов списка:
[Название репозитория] - [кол-во звёзд на github] - [дата последнего коммита] - [ссылка на Github]
Для получения данных используется комбинация запросов :
- поиска по репозиториям
- получения коммитов по конкретному репозиторию
Paginator сделан без использования стороних UI библиотеки .
При перезагрузке страницы состояние выбранных фильтров (поиска и страницы) сохраняеться и используеться для первоначального запроса.
Ответ от API на тысячи репозиториев в приложении не хранится, поиск происходит на стороне API.
При клике на название репозитория происходит переход на Карточку репозитория.
имеет следующую структуру:
- [Название репозитория] - [кол-во звёзд на github] - [дата последнего коммита]
- [Фото владельца репозитория, если есть] - [Nickname владельца репозитория с ссылкой на него]
- [Список используемых языков в репозитории]
- [Краткое описание репозитория]
- [10 наиболее активных контрибьютеров]
Для получения данных используется комбинация запросов :
- поиск репозитория по id
- получения языков репозитория
- получения контрибьюторов репозитория
- получения коммитов репозитория
Проект запускаеться в консоли командой npm start после чего он доступен для просмотра по адресу http://localhost:3000/