> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/assignment-1/github-battle-app-or-assignment.md).

# Github battle App | Assignment

give it a try

Show List of All Popular Repository in Grid Structure using React Components (without any routing)

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Ligh-mSZwd9bHgD97TE%2F-LighGVsuFTwKikfe5XL%2FScreen%20Shot%202019-07-01%20at%202.05.50%20PM.png?alt=media\&token=b09ff4ed-8815-4451-a223-c40694e05523)

![initial screen , you can skip routing for now](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Ligh-mSZwd9bHgD97TE%2F-LighSUreTo1lh4Vx3z_%2FScreen%20Shot%202019-07-01%20at%202.06.37%20PM.png?alt=media\&token=dae534eb-ffd9-4a4b-b176-acce716ee61f)

![compare screen](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Ligh-mSZwd9bHgD97TE%2F-LighVK_AHe6Tuul4qt0%2FScreen%20Shot%202019-07-01%20at%202.06.27%20PM.png?alt=media\&token=27aa429f-533a-45a0-8db3-798611a50e1a)

http APIs you can trigger to get Github APIs data (rest you can look at Github developer APIs )

```
var axios = require('axios');
var id = "68f7121b3463423d9f90";
var sec = "7501c822adaf89df5e134e85a78d8505e43a054e";
var param = "?client_id=" + id + "&client_secret=" + sec;
function getUserInfo (username) {
  return axios.get('https:/api.github.com/users/' + username + param)
}
function getRepos (username) {
  return axios.get('https:/api.github.com/users/' + username + '/repos' + param + '&per_page=100');
}
```