Creating a Developer Portfolio using Next.js, GraphQL, DEV and GitHub

title: Creating a Developer Portfolio using Next.js, GraphQL, DEV and GitHub published: true description: Create a developer portfolio featuring content pulled from your DEV.to blog posts and GitHub profile and projects using Next.js and StepZen. tags: cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itcuzb94qohse16aeoy3.jpg canonical_url: https://stepzen.com/blog/developer-portfolio

In today's job market, developers need to think about how they market themselves. Oftentimes, a portfolio site can be more important for a developer than their resume - but it can also be a lot of work to build and maintain. What if we could use some of the services that developers are already using to share blog posts, like DEV, and post their project portfolio, like GitHub? This would allow you to create a quick and easy developer portfolio site that takes advantage of the services you already use.

In this tutorial, I'm going to show how you can combine the APIs of both DEV and GitHub into a single backend using StepZen to power a developer portfolio built as a Jamstack site using Next.js. By the end of this tutorial, you'll be able to customize and deploy your own version of this site using your own DEV and GitHub accounts.

The Sample Site

Let's take a look at what we'll build. You can see the home page of the sample site below populated with my account information. You can also view this site live and deployed to Netlify here.

Sample blog home page

The site pulls all the blog posts from your DEV account, so the posts you see here are from mine. The profile information attached to those posts as well as the bio and recent projects information on the "About" page are all pulled from GitHub.

The site is built using Next.js and is based upon the Tailwind Nextjs Starter Blog created by Timothy Lin. The key difference is that, rather than pulling from local Markdown and configuration files to populate the site, all the data is pulled via GraphQL queries using a schema deployed to StepZen, which we'll explore in a moment.

What You'll Need

In order to get the blog to work with your details, you'll need the following:

  • You need to have a DEV account with some posts. The site leverages the DEV API, but because it relies upon public methods to gather its data, you do not need an API key. Your DEV account needs to have been connected to your GitHub account. The API we'll build relies upon your GitHub username to link your DEV profile to your GitHub profile. You can connect this via your account settings. If this connection doesn't exist, the queries will fail.
  • You'll need a GitHub account. The site utilizes your name, email, twitter username and bio, so it'll work best if you have these filled out in your profile. If you have some public repositories on your account, those will be used to populate your recent projects on the about page. You will need to get a personal access token, which is used to access the GitHub API. For these purposes, you'll only need basic read permissions.
  • You'll need a StepZen private alpha account. We'll use StepZen to link the two APIs together into a single GraphQL API. Go here to request an alpha invite.

In terms of deployment, you can deploy the site wherever you can host a Next.js Jamstack site. I deployed mine to Netlify and utilized the Netlify Next.js cache plugin to improve the build speed. Utilizing the cache was important in my case as I have a lot of DEV posts and the DEV API is rate limited to 3 rps for reads (1 rps for writes, but that doesn't impact our API). (Note: the code has a short delay built into the blog post rendering to prevent API limit errors during the build on sites with a lot of posts.)

Installing the Sample FrontEnd

Let's begin by pulling the code for the sample frontend. The frontend code is available in this GitHub repository. Let's clone it into a folder named zenblog.

git clone https://github.com/stepzen-samples/zenblog-devto-github.git zenblog
cd zenblog

We'll need to ensure that all the dependencies have been installed.

npm install

Feel free to explore the code, however we can't run the site yet because we haven't created the API it needs to populate the data on the site. Let's get that set up.

Creating the GraphQL API

Creating the GraphQL API that connects both DEV.to and GitHub into a single GraphQL API takes just a few simple steps. Let's start by creating a new directory for our API code within our project.

mkdir stepzen && cd stepzen

If you don't already have the StepZen CLI, you'll need to install it before proceeding.

npm i stepzen -g

While you can build whatever custom GraphQL API you want using StepZen, there is a growing list of sample schemas that you can simply import to get started connecting to popular services like Airtable, Algolia, Cloudinary, Twilio and more. The best part is, the CLI will walk you through getting whatever configuration the schema needs. We're going to use the sample devto-github.

stepzen import devto-github

You'll be asked for your DEV.to username and your GitHub personal access token (in the format of Bearer MY_TOKEN_HERE) . These are written to an environment variable within the schema code. You should see something like this in your console:

Downloading from StepZen...... done
? What is the username of your DEV.to account? [hidden]
? What is your personal access token for github API? (use the format: Bearer XXXX) [hidden]
Successfully imported 1 schemas from StepZen

The schema code is standard GraphQL that includes special directives that tell StepZen how to populate the data from the appropriate REST APIs and how to connect DEV.to and GitHub together. I won't go into depth about the schema code here, but feel free to explore the code yourself and check out StepZen's docs for more details on how this works.

For now, we're ready to deploy the schema and test it out. StepZen provides an easy tool for continuously deploying and testing your schema via a single CLI command: stepzen start. All we need to do is provide a folder name (api in the case below) and schema name (zenblog ) for the schema we are deploying.

stepzen start api/zenblog

A GraphiQL query editor will open that is already connected to your deployed API for you to test. Any changes you make to the API code will be automatically uploaded and deployed until you end the stepzen start process. However, you shouldn't need to make any changes at this point. Let's test that this is working by querying the API with a simple query to get posts:

{
	myArticles {
		title
        user {
			name
        }
    }
}

Here's what my result looks like:

testing the GraphQL API

What may not be immediately obvious is that the title of the articles is coming from DEV.to but the author name is coming from GitHub - and we got both sets of data from both backends via a single query! Feel free to explore the schema yourself by clicking the "Explore" button and creating different queries to see the data that the API makes available. As with any GraphQL API, the API is self-documenting.

Running the Blog

The backend and frontend are ready. There are just a few small steps to get this running. If you go back to your command line, you'll see that stepzen start has published your API and shared the endpoint URL that you can use to access it. For example, see mine below:

http://localhost:5000/api/zenblog
Deploying to StepZen...... done

Successfully deployed api/zenblog at 3:27:21 PM

Your endpoint is available at https://biggs.stepzen.net/api/zenblog/__graphql

We need to tell our blog code what the API endpoint URL is as well as the StepZen API key that will grant access to this endpoint. If you have signed up for StepZen, you can grab your API key on your my account page. Next, create a .env.local file in the root of your site with the following keys, replacing the values with your endpoint URL and API key.

STEPZEN_API_URL=YOUR_ENDPOINT_URL_HERE
STEPZEN_API_KEY=YOUR_API_KEY_HERE

Next.js can read these environment variables automatically. If it's not already, be sure to add this file to your .gitignore so that you do not check your API keys into a public repository.

Now we're ready to run our site! Make sure you are in the root directory of your site and start your Next.js site.

yarn dev

You should be able to go to http://localhost:3000 and view your new blog populated by the data in your DEV posts and GitHub profile information. You're developer portfolio site is built. Congrats! 🏆

Deploy Your Blog and Share!

As I mentioned earlier, you can deploy your site to anywhere including Netlify, Vercel or any other site that can host a Next.js Jamstack site. Feel free to customize the look and feel to suit your needs.

You can also expand upon the pre-built StepZen schema by using stepzen import to import more API templates or creating your own custom schema code to extend the schema we imported. For details on the pre-built schemas available to import, check out the API templates page on StepZen.com or visit the StepZen schemas GitHub repo. For example, you might want to use the Cloudinary schema for serving your media file or the Algolia schema for adding search functionality. For more details on how to write custom schemas, for StepZen, visit the StepZen docs.

If you do post your developer portfolio, please share it with me at @remotesynth - I'd love to see and share what you built!