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
howpart after looking at the code ;)
Love stalking GitHub Profile? Check what your peers are upto
How to Start the Project
- Create a .env in the root folder and Set Environment Variable:
REACT_APP_OAUTH_TOKEN = Your GitHub OAUTH Token
- 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?
Liked the project? Hit the star button to support!
What to Contribute?
Create an Issue here
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)
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!