This morning I had the opportunity to chat with software engineers and data scientists at the AI Dev World Conference on a topic I just happen to be v...
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:
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.
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:
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.
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.
and on Twitter…
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.
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.
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.
Automating data science is hard, and we do a lot of it.
As part of our latest release, our Agent underwent a complete transformation in order to simplify the installation of in...