First you need to get token from github account with read access to repositories,
then you should paste its value to .env
file in VITE_APP_GITHUB_ACCESS_TOKEN
variable. After this you should move to
the root folder of project in console (for example cd github-graphql
) and then install dependencies(npm install
).
To run project in dev mode run this in console npm run dev
In the project directory, you can run:
В приложении используется Github GraphQL API, приложение состоит из 4 страниц:
- Home – имя, логин пользователя, фото и общая информация
- My repositories – страница со списком репозиториев пользователя
- Search – здесь отображается список репозиториев при поиске
- Repository – страница с детальной информацией о репозитории (карточка репозитория).
Ключевые элементы страницы: • Список репозиториев • Paginator – список страниц
При клике на название репозитория происходит переход на "Карточку репозитория". Внизу страницы есть "Paginator" вида [1, 2, 3, 4, 5].
При клике на вторую страницу показываются репозитории с 11 по 20. При клике на третью страницу показываются репозитории с 21 по 30 … и т.д.
При перезагрузке страницы состояние выбранных фильтров (поиска и страницы) сохраняется и используется для первоначального запроса.
При введении текста в Поле для поиска, происходит поиск по названию среди всех репозиториев GitHub и выводиться его результат в "Список репозиториев" . (при запросе не организована анимация при загрузке, данные приходят не мгновенно, приложение не виснет, просто пару секунд нужно подождать)
Карточка имеет следующую структуру: • [Название репозитория] - [кол-во звёзд на github] - [дата последнего коммита] • [Фото владельца репозитория, если есть] - [Nickname владельца репозитория с ссылкой на него] • [Список используемых языков в репозитории] • [Краткое описание репозитория]