Displaying Stackoverflow reputation & badges on your portfolio

Do you want to integrate the stack overflow with your personal portfolio? In other words, do you want to display/show the stack overflow profile on your personal site?

Yes, it is possible to show the stackoverflow profile’s data (reputation, badges, questions, answers etc.) on your private site. Stack overflow provides the Stack Exchange API, through which you can access all your meta information.

Image taken from Google

Stack Exchange API

What is Stack Overflow?
Stack Overflow is a question and answer website for professional and enthusiast programmers. It’s built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we’re working together to build a library of detailed, high-quality answers to every question about programming.
Reference: https://stackoverflow.com/

Stack overflow is not only a website, it’s a feeling for software engineers.

Can’t imagine LIFE without stack overflow.

image taken from Pinterest

Outcome of the article

In this article, my objective is to connect any portfolio/personal site with stack overflow. So here, I am using the simple HTML/CSS profile card code from W3Schools.

W3Schools online HTML editor

Getting started

1. Copy the HTML and CSS code from the W3schools.
2. Open the Visual Studio code.
3. Create new file and paste the code.
4. Save the file as HTML with name ‘profile.html’.

5. Open the ‘profile.html’ file in browser and it looks like as illustrate in figure-1:

Figure-1: Skeleton of the page

Setting-up the Stackoverflow account

Visit your stack overflow profile and copy your user ID from the URL as highlighted in below figure-2. This is the unique ID of your account in stack overflow. We will use this ID to get your metadata through Stack Exchange API.

Figure-2: Stackoverflow profile

Stack Exchange API

Now open the Stack Exchange API documentation. Scroll down the cursor and check the ‘Users’ section. I want to display the user’s name, badges (gold, silver & bronze) and user’s reputation. Click the ‘users/{id}’ option as highlighted in below figure-3.

Stack Exchange API

Figure-3: Stack Exchange API documentation for ‘Users’

It will open the new interface as shown in below figure-4. You need to put your stackoverflow ID that is copied from your profile URL in to ‘ids’ field and click on ‘Run’ button as illustrates.

Figure-4: API interface of ‘Users’

After click on ‘Run’ button, it will return the metadata information as JSON output as shown in below figure-5. It means, the API works fine with your account.

Figure-5: JSON response of Users API

Expand the application with StackOverflow integration

Now, its time to call the API in your ‘profile.html’ file.

1. Add the HTML tags for name, badges and reputation.

<h1 id=”name”></h1>
<p id=”reputation”></p>
<p id=”gold”></p>
<p id=”silver”></p>
<p id=”bronze”></p>

2. Add <script> tag to write JavaScript code to call the Stack Exchange API. The fetch function is used to call the API. In the URL, replace your user’s ID with ‘USER_ID’ keyword.

 https://api.stackexchange.com/2.3/users/{USER_ID}?order=desc&sort=reputation&site=stackoverflow

Reload the ‘profile.html’ page in the browser, and you get your user’s name, reputation and badges(gold, silver and bronze).

You can use the above JS code in your portfolio/personal website and display your stack overflow information.

Figure-6: Final Output

Note: Similarly to user’s tag in Stack Exchange API, you can get all your answers, questions and other information easily and all the details/explanation are present in Stack Exchange API documentation.

Final code