Like many software engineers, I work with a team to build our application, but I also enjoy learning new languages and tools and collaborating with the broader developer community outside of my role at Pinpoint. You can often find me contributing to:

  • Open source projects
  • Forums such as StackOverflow, Reddit, Facebook groups or Hacker News
  • Knowledge-sharing through a blog, podcasts, social networking, or speaking at events
  • Hackathons 

Until now, there really hasn’t been an easy way for developers to showcase their experience and personal brand across all these different mediums. Like me, many have turned to creating and maintaining a portfolio website as an online resume of sorts because traditional resumes and LinkedIn don’t really showcase our work effectively. These personal websites are a better solution but are infrequently updated and often abandoned.

I was tasked with prototyping a better way to showcase a developer’s work where other methods have come up short. The end result is the Pinpoint Profile, a “card” that can be embedded pretty much anywhere and will always have the most up to date information about your work.

Here’s mine as an example. As you can see it's interactive and all tabs and links are clickable.

Read on to see how we approached building the Profile using Next.js. 

Developer profile requirements by… a developer

The Profile was a fun project because the team got to define the requirements based on what we would find valuable for our own “online resume.” I was also able to try out some new technology since this was a completely new functionality. 

These were the requirements I wanted the profile card to meet:

  • Embeddable 
  • Live (or updates in real-time)
  • Easy to edit
  • Easy to share
  • Fast
  • Lightweight

How we built the profile 

We decided to build the Pinpoint Profile as a separate “cards” application that can be embedded almost anywhere on the web via an iframe. Because this was a standalone application, it was the perfect opportunity to experiment with Next.js and start using it in production. The initial prototype took about one day thanks to the flexibility and easy developer experience of Next.js. 

How we met the above requirements:

Embeddable: Embedding is easy via a simple iframe because the profile is built as a standalone application. We used Next.js API routes to serve the metadata when embedding and sharing to sites like Slack, Twitter, LinkedIn, etc.

We open sourced a library that contains some wrapper logic for loading indicators to make it easy to embed your profile in your own React applications.

We also have an API route that returns the profile card rendered as an image for embedding in the README on a GitHub profile, as seen below.

Screen Shot 2020-10-06 at 10.47.59 AM

and on Twitter… 

Screen Shot 2020-10-06 at 9.13.14 AM

Live: The Profile is rendered directly from the user's input in Pinpoint. We cache this data for performance but only briefly, keeping the embedded profile up-to-date almost instantly.

Easy to edit: Users edit their profiles right from within Pinpoint, similar to the above. We did run into a challenge around making the inline editing experience feel natural with the embedded Profile. We used frame messaging and the react wrapper library (pinpt/cards-react) to send messages back-and-forth while editing fields and loading states. 

Pinpoint-Profile-short

 

Fast: We use server-side rendering with Next.js and host the application on Vercel.

Lightweight: goes hand-in-hand with speed. We’re able to get a small bundle with minimal dependencies so the profile card can load as fast as possible.

Grab your username before it’s gone. 

We’ve already received great feedback on the Pinpoint Profile with over 100 profiles created in the first week of launching it. Because it’s a separate application on Next.js, we have a lot of flexibility to continue building on it. In turn, there are many possibilities for how it can be used and shared outside of our application. 

The Pinpoint Profile is free, and you have a good chance of getting your pick of usernames — sorry, I already snagged @k.

You can get your Profile here and then join our Slack Community of developers and let us know what you think. 


Get the data science behind high-performance teams.