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 ;)
Click here to check Deployed build
starkblaze01
/
git-stalk
Love stalking GitHub Profile. Then try this out!!
git-stalk
Love stalking GitHub Profile? Check what your peers are upto😈
Build
Blog
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
Author:
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)
But why just simply use React, maybe something different this time, so to cover up that different part I used React Typescript.
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)