GitHub Profile Stalker
Tags: octograd2020, githubsdp, githubapi, react
Published: 2020-05-20 08:02:11

> Finally my first Blog here and a tribute to [GitHub Student Developer Pack](https://education.github.com/pack) which helped me throughout my college life by providing awesome helpful resources to enhance my skills and gave me a great learning curve.

In this blog, I will be discussing my _GitHub Profile Stalker_ project in brief and will be more of `what` I did rather than `how` I did.
>P.S. Feel free to reach me out in case you face a problem in understanding the `how` part after looking at the code ;)


[Click here to check Deployed build](https://github-profile-stalker.netlify.app)

{% github https://github.com/starkblaze01/git-stalk %}


**Technologies used in this project:** [React-ts](https://create-react-app.dev/docs/adding-typescript/), [Ant Design](https://ant.design/), [GitHub API](https://docs.github.com/en/rest), [JSS](https://cssinjs.org/?v=v10.6.0), [Redux](https://redux.js.org/), [Netlify](https://www.netlify.com/), and ....nah, let's keep it to this only.

I love stalking GitHub profiles and check the activity of awesome developers out there. Yep, you got that right, why not simply go to their GitHub profile check that, ...or maybe recreate something of my own which might help me learn something new along the way. 
The first thought that came to my mind was to create a scraper to get the desired content, but the profile page on GitHub wouldn't have given me all the information I needed and will need to make multiple calls, and eventually, this would have decreased the performance of the desired application. So, then I thought why not use GitHub API, it might be fun exploring it. Hell yeah! it was! You can do a lot of kinds of stuff using it, automate many things and create many applications around it. Now I have the API `end-point` which will give me desired data, let's work on displaying the data in some manner that will be less criticised by developers out there.
So, which one's the most famous Frontend technology to use for displaying the data, any guesses? yeah, you guessed it right! it's React(no not you Angular, please be seated. P.S. apologies to Angular lovers)
![ReactAngular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaynahzf1di48ngucodu.jpg)

But why just simply use React, maybe something different this time, so to cover up that **different** part I used React Typescript.
![ReactTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uxuf1m51gxxg8c066z0.jpg)

The majority of the tech industry believes in using ReactTS over ReactJS, but it's a very subjective topic which one's better to use, so let's save this controversy for some other time.

Next up I added a flavour of CSS in JS style. There are many libraries out there: JSS, Styled Components, Emotion, Styled-JSX... I picked JSS for my project and Ant Design for basic UI components. Then simply mix it up, wrap it up in the Redux store for easy state management and your project is ready.
For deploying I prefer Netlify, it's really easy to set up, though I would point of that I forgot to add _History API fallback_ so whenever I was clicking the back button after searching for a User's profile it was throwing Not Found Error for Netlify Deploy but working fine locally, so, I have to add [_redirects](https://github.com/starkblaze01/git-stalk/blob/master/_redirects) file in the root of my project folder and the problem solved.

That's all folks, and if you are in college go grab your GitHub Student Developer Pack and learn about these awesome technologies with the subscriptions that you can claim along with it.

Cheers! Keep Learning!