Adding "Dev Data" to your Portfolio

When a recruiter checks out your portfolio they’re typically in and out in very quickly. Chances are they’ve got a stack of applicants who all need to get looked at and they simply don’t have the time to spend longer than 1-2 minutes looking at a single portfolio(if that). So it goes without saying that your portfolio needs to stand out to avoid being forgotten in the pile. One way to help a recruiter remember you is to leverage your “developer data” to give them a better sense of who you are as a developer.

Developer Data

Your developer data is basically all of the finger prints you’ve left on the internet while doing dev stuff. Your public commit history, tech blog posts, coding challenges, pull requests, and open source contributions are all great examples. Displaying this data publicly and organized into your portfolio is a great way to show what your skills are and to display that you have verifiable experience with these skills. If you only have a limited amount of time to leave an impression with a recruiter, this is the kind of stuff you want them to see. Below are a few sources of dev data that I wanted to share.

GitHub Data

GitHub API Docs

GitHub is probably the most obvious place to look for developer data so we’ll start there. Thankfully GitHub has a public API and is pretty straight forward if you are just trying to get your commit history and basic user data. Here’s my getGitHubData function from my portfolio site.

// high level wrapper for GitHub API
import GitHub from "github-api";
import axios from "axios";

export default async function getGitHubData() {
  // authenticate with your token - this is your "personal access token" and can
  // be created through your GitHub account dashboard
  var gh = new GitHub({
    token: process.env.GITHUB_TOKEN
  });

  // get profile data
  let me = gh.getUser();
  return me.getProfile().then(userData => {
    return (
      axios
        // get public commits
        .get("https://api.github.com/users/Robp773/events/public")
        .then(events => {
          let filteredCommits = [];

          // events from your GitHub account - these come automatically ordered by most recent
          events.data.map(event => {
            // filtering out events that don't have a commit in their payload
            if (event.payload.commits) {
              event.payload.commits.map(singleCommit => {
                filteredCommits.push({
                  repo: event.repo.name,
                  singleCommit,
                  created_at: event.created_at
                });
              });
            }
          });

          // I also count up my recent commits by repo for a chartjs graph 
          // but I cut that out for simplicity

          return {
            // commit list
            commits: filteredCommits,
            //  user data
            userData: userData.data
          };
        })
    );
  });
}

I eventually use this data on my site to display my commits in a scrollable list below a chart of how my commits break down by repository. I also use the GitHub user data on my home page for my bio and to display how many days I’ve been working as a developer (I basically used my GitHub account creation date as my dev birthday - cheesy I know).

I don’t yet have an impressive list of open source contributions to list but if you do, I’d highly recommend compiling them through the API. This will get you instant brownie points from anyone looking through your portfolio.

DevTo + Dev Blogging APIs

I’ve been trying to make a point of writing articles on tech to both solidify my knowledge on topics and also to show employers that I actually enjoy thinking about code outside normal 9-5 hours. Since I’m mostly using dev.to right now - I used their unofficial API to get my blog articles. Here’s another dev.to article to use as a reference for some of the known endpoints - The state of dev.to v0 api. It looks like an official API has been in the works for a while but has yet to be released. To summarize - https://dev.to/api/articles?username={your user name}&page=0 will get you an array of your blog posts along with comments, reactions, tags, URL, etc.

CodeWars Coding Challenges

CodeWars API Docs

Another way to showcase your skills is by displaying your coding challenge activity. I use CodeWars on my site. My favorite endpoint is /api/v1/users/:id_or_username/code-challenges/completed?page=0 which will return the names of your recently completed challenges along with the time of completion and languages used. For whatever reason, there aren’t many other coding challenge platforms that allow you to access your activity so it might be a struggle getting this data outside of CodeWars. Codewars also gives you access to SVG badges to display your rank and profile info on outside web pages. Here's an example.

Additional Sources

I'll be adding additional sources to this list as I discover them but for now I just wanted to mention Stack Overflow's user API. This is a great place to get data detailing your reputation and badge count and would also help to show your willingness to assist other developers.

Final Thoughts

So here’s what all of this data looks like in my portfolio’s activity page. The UI could use some more work but hopefully you get what I’ve tried to create - a page that a recruiter can quickly look through and instantly get a feel for what I’m doing as a developer. Everything's all in one place so they don’t have to go digging to learn more about me.

The last thing I wanted to mention was the importance of having a fast loading portfolio site since that does play a big role in first impressions. In order to avoid having 5+ loading spinners on my activity page I built my site with React Static + an automated daily webhook from Zapier to keep all of the static data up to date. If you are unfamiliar with static site generators, basically they bundle all of your data into your website’s routes at build time so that your static data is almost instantly available on page load. I’d highly recommend going this route if you plan on pulling in a ton of data for performance reasons. I actually wrote an article on React Static if anyone wants a primer on how to get started with that.

That’s all I’ve got, if anyone has any further ideas for other sources of “developer data” I’d love to hear about them!