Every few months Showpass hosts an internal Hackathon. This time around I wanted to try and generate city specific landing pages so people searching the web for events and things to do "this week" or "this weekend" could see a condensed list of whats happening around them. I wanted to try and utilize the JAM (Javascript, APIs, and Markup) stack to render the content. I decided to use GatsbyJS to help improve SEO and content serving speeds.
Gatsby made this project easy to complete in 3 days. First I created a source plugin that sources events and remote files from Showpass's API. The plugin will look at a list of city names, fetch relevant events from these cities, then generate static landing pages.
While loading the event thumbnails, gatsby will also generate modern formats for the images including WebP. Each image is served in an optimal format depending on the client and it will show a SVG stencil of the image while it is loading - neat!
SEO was also a big concern here as you want the events to show up in search results in search engines like Google. Serving static content makes SEO easy as you do not need to worry about the usual framework constraints or server side rendering - another plus!
I decided to host this project on Netlify as they have many great features for modern web flows. I used the Netlify CMS plugin for Gatsby which turns your git repository into your content store. Non devs can login to the CMS admin and add new city pages and featured images with ease, and deploys take seconds to minutes.
Netlify also has great features like a/b testing and branch deploy previews meaning iterations can be done quickly and shared in a live environment with other team members. The marketing department can try new content and wordings and optimize these pages for the biggest impact.
Every so often Showpass's main web servers ping Netlify to redeploy the landing pages meaning no server load or requests besides the initial build process touches Showpass's main infrastructure. This allows the pages to scale independently on traffic load from Showpass's own demands.
All in all I was really happy how this few day project turned out, I got to learn the Gatsby node API and stretch my legs more with React and Typescript
(Here is a video showcasing simulated slow network to show loading transitions between SVG stencil + full quality image. No main thread blocking and page is responsive immediately)