My Resume Is A Headless Shopify Store

For good times and also to learn some ins and outs and what-have-yous of the Shopify ecosystem ahead of conversations with their Engineering team I built my resume as a headless Shopify store.

 

My resume is Remix site and the backend is a Shopify store;  the backend looks like this:

 

 

 

 

Using the magic of @hydrogen-react and @remix I was able to display this Shopify store as a typical looking resume document that looks like this:

 

 

 

I wish I had some design skills because the whole idea behind having a custom storefront is being able to trick it out. Alas.

Yes, But How Is Headless Shopify Store Based Resume Formed?

 

Shopify has an impressive set of customization tools available for Store operators and Shopify partners. Among these tools is the Shopify GraphQL Api. 

 

You know what can be tough? Operating and scaling a GraphQL Api. Who knows what unholy amalgamation of services and and datastores are lurking behind a GraphQL schema. And who knows what networking demons are disturbed when a query is made. All GraphQL apis should have a warning out of Tolkien that reminds folks of the dangers of mining too greedily and too deep. But by the stars as a developer it sure makes things straightforward to spelunk and query.

 

So using the Shopify GraphQL Api I was able to straightforwardly map data from the Shopify store backend to the things one finds in a resume.

 

Each "section" of the resume, e.g. "Co-Founder, Engineer and CTO @ Vox Media - 04/2007 - 04/2022" is a backed as a Collection in my Shopify store.

 

Each chunk of Experience e.g. "🔥Product Engineering That Propels Business" is a Product in that Collection.  The tags at the end of each Experience chunk are Product Tags.

 

The emojis like 🔥 and 🔒next to Experience chunk titles are determined by custom Metafield Definitions attached to the Product.

 

Even this blog post is zorped from Shopify API (it's a Gift Card).

 

@remix loader functions made it easy to fetch data from the Shopify GraphQL API  e.g.

 

export const loader: LoaderFunction = async() => {
  const response = await fetch(shopify.getStorefrontApiUrl(), {
      body: query,
      headers: shopify.getPublicTokenHeaders(),
      method: 'POST',
  });
  const json = await response.json()
  return json.data
}

 

And, course, Remix makes it delightful to build a component based front-end.

 

Pretty fun! And a neat way to learn a few things about the powerful tools Shopify provides to its customers.