DEV Community

Cover image for GitHub Profile Stalker
Mayank Pathela
Mayank Pathela

Posted on • Updated on

GitHub Profile Stalker

Finally my first Blog here and a tribute to GitHub Student Developer 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

GitHub logo starkblaze01 / git-stalk

Love stalking GitHub Profile. Then try this out!!

git-stalk

Love stalking GitHub Profile? Check what your peers are upto😈


Build

Netlify Status

Blog

devto

How to Start the Project

  • npm i
  • Create a .env in the root folder and Set Environment Variable: REACT_APP_OAUTH_TOKEN = Your GitHub OAUTH Token
  • npm start
  • Note: You can still run the project without setting the environment varibale. It's just to increase Rate Limit

To Create Optimized Build

npm run build

Why I made this?

Because I wanted to explore GitHub API and have fun with it. And also I was inspired by this awesome telegram bot made by Aashutosh Rathi for which he had to pay monthly bill of 1 INR because of me😓.

Special Thanks

GitHub API

Author:

Mayank Pathela - Website

Liked the project? Hit the star button to support!

What to Contribute?

Create an Issue here




Technologies used in this project: React-ts, Ant Design, GitHub API, JSS, Redux, Netlify, 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

But why just simply use React, maybe something different this time, so to cover up that different part I used React Typescript.
ReactTS

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 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!

Top comments (0)