Get our free Content Model Template to make it easier to write and manage your content.
Download template
+
+

Project wrap-up: Gatsby's "Silly Site Challenge" (the Jam Slam)

Project wrap-up: Gatsby's "Silly Site Challenge" (the Jam Slam)

5 minute read

Project wrap-up: Gatsby's "Silly Site Challenge" (the Jam Slam)

5 minute read

Project wrap-up: Gatsby's "Silly Site Challenge" (the Jam Slam)

Angus Edwardson

Co-Founder and Product Director, GatherContent

We've been doing "make days" at GatherContent for the past few years. There aren't too many rules involved, but they essentially involve us dropping everything for a day or so to work on random side projects.

The idea is that we can play around with new technologies, do some no-strings experiments, and generally have a bit of a potter around as a team.

Past make days have given the world:

  • ghost hunting computer games
  • really long calendars (infinitely long...)
  • pizza delivery calculators
  • random Strava integrations
  • house plant tracking apps

This time, we decided to enter the Gatsby Silly Site challenge; using it as an excuse to play around with Gatsby, using GatherContent as the CMS and to beta test our new Gatsby Source Plugin.

The idea

After some intense pitches, we settled on the idea of creating a Top Trumps style card game but using jams and preserves. Because, Jamstack, yeah? Good one.

Some of the runner up ideas were:

  • A 'bad' day out generator: Pulling in 1-star reviews of various places from Google and Trip Advisor and creating an agenda for a generally terrible day out
  • Re-creating Myspace: This seemed like quite a lot of work for a day.
  • Jam-sweeper: Like Minesweeper, but jam.
  • Consequences: A choose your own adventure story, as an interactive version of the books.

Anyway, Top Trumps did what it does best, and topped the trumps.

It seemed like a good candidate because we could make the gameplay and content quite ridiculous, we could also use GatherContent as a really great way to create and deliver the content, and Gatsby would work really well to create the front-end experience. A solid plan.

The method

The first thing we did was create the content model. Because that is always the right thing to do. Ok? Yes, ok.

(In reality, we spent quite a long time at the start figuring out how Top Trumps actually worked, how many cards were involved and what the rules were).

The content model

An example content model in GatherContent showing field names, descriptions and character counts.

We handled all of the content design and modelling in GatherContent, because we heard it's a pretty great product for that ;)

We followed these steps:

  • We created a project in GatherContent, which contained a folder of 30 items, one item per card
  • We also had folders and items for the project description and another for the game rules (nice and abstracted), as well as a folder for re-usable SVGs
  • We then created a template for each card, containing fields for the jam name, image (+alt text) and description. Most importantly, it had five range fields (scored from 0 to 10) for each jam stat:
  • Tastiness
  • Spreadability
  • Versatility
  • Trendiness
  • Rarity

How else would you rate a jam?

Once this was agreed, we could move on to building the game logic, starting the designs, writing the content and building the front-end.

The game logic

The Jam Slam rules page with the rules written in text.

The game is quite simple...

  • You play against the computer
  • There are 30 available jam cards in total, you start with 5 each
  • You select a jam stat to play and if you score the highest stat you win both cards
  • The person to win all cards wins the game

But as you would imagine, it's not really that simple, some complications were:

  • How to handle a draw
  • How the final score is calculated.... Spoiler, it's = 20000 - ((timeSeconds * 10) + (rounds * wins))
  • Keeping track of the game state

The content

The GatherContent editor with an example of a comment added to content within a field.

We wrote all the content and got it approved using GatherContent. As you would expect, this resulted in a really fast and simple process, where non-technical people could write about jam using a familiar editing experience. The content was then approved to make sure it was safe and adhered to a few basic tone of voice rules.

Once the content was approved, we used our API and the Gatsby source plugin to pull it into the front-end. This was all set-up using Gatsby components.

The front-end

The round results UI of tje Jam Slam game showing which Top Trumps card won.

It was our first experience using Gatsby on a project and was honestly such a great experience.

We were dealing with complex components, and the Gatsby Source plugin really helped with mapping our content model to use in the UI using GraphQL. This gave us instant parity between GatherContent and the UI.

This was made very easy by Gatsby's GraphQL data model and data querying tools. We carried out the following steps to build the frontend:

  • Created routes using Gatsby's file system routing
  • Grabbed data from GatherContent using our Gatsby Source plugin and the `pageQuery` and `useStaticQuery` methods
  • Built out the pages and interactivity with React and Javascript

Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!

And that's a Jam Slam

You can play Jam Slam online now. Forget about the mess that was 2020, and slam some jams. It's worth it for the music alone 🎵

This project taught us a lot and was a great way to get stuck into more Jamstack technologies and we'll be open-sourcing this code over the next few weeks.

In the meantime, you can register to get access to the GatherContent Gatsby Source Plugin on our product betas page.

We've been doing "make days" at GatherContent for the past few years. There aren't too many rules involved, but they essentially involve us dropping everything for a day or so to work on random side projects.

The idea is that we can play around with new technologies, do some no-strings experiments, and generally have a bit of a potter around as a team.

Past make days have given the world:

  • ghost hunting computer games
  • really long calendars (infinitely long...)
  • pizza delivery calculators
  • random Strava integrations
  • house plant tracking apps

This time, we decided to enter the Gatsby Silly Site challenge; using it as an excuse to play around with Gatsby, using GatherContent as the CMS and to beta test our new Gatsby Source Plugin.

The idea

After some intense pitches, we settled on the idea of creating a Top Trumps style card game but using jams and preserves. Because, Jamstack, yeah? Good one.

Some of the runner up ideas were:

  • A 'bad' day out generator: Pulling in 1-star reviews of various places from Google and Trip Advisor and creating an agenda for a generally terrible day out
  • Re-creating Myspace: This seemed like quite a lot of work for a day.
  • Jam-sweeper: Like Minesweeper, but jam.
  • Consequences: A choose your own adventure story, as an interactive version of the books.

Anyway, Top Trumps did what it does best, and topped the trumps.

It seemed like a good candidate because we could make the gameplay and content quite ridiculous, we could also use GatherContent as a really great way to create and deliver the content, and Gatsby would work really well to create the front-end experience. A solid plan.

The method

The first thing we did was create the content model. Because that is always the right thing to do. Ok? Yes, ok.

(In reality, we spent quite a long time at the start figuring out how Top Trumps actually worked, how many cards were involved and what the rules were).

The content model

An example content model in GatherContent showing field names, descriptions and character counts.

We handled all of the content design and modelling in GatherContent, because we heard it's a pretty great product for that ;)

We followed these steps:

  • We created a project in GatherContent, which contained a folder of 30 items, one item per card
  • We also had folders and items for the project description and another for the game rules (nice and abstracted), as well as a folder for re-usable SVGs
  • We then created a template for each card, containing fields for the jam name, image (+alt text) and description. Most importantly, it had five range fields (scored from 0 to 10) for each jam stat:
  • Tastiness
  • Spreadability
  • Versatility
  • Trendiness
  • Rarity

How else would you rate a jam?

Once this was agreed, we could move on to building the game logic, starting the designs, writing the content and building the front-end.

The game logic

The Jam Slam rules page with the rules written in text.

The game is quite simple...

  • You play against the computer
  • There are 30 available jam cards in total, you start with 5 each
  • You select a jam stat to play and if you score the highest stat you win both cards
  • The person to win all cards wins the game

But as you would imagine, it's not really that simple, some complications were:

  • How to handle a draw
  • How the final score is calculated.... Spoiler, it's = 20000 - ((timeSeconds * 10) + (rounds * wins))
  • Keeping track of the game state

The content

The GatherContent editor with an example of a comment added to content within a field.

We wrote all the content and got it approved using GatherContent. As you would expect, this resulted in a really fast and simple process, where non-technical people could write about jam using a familiar editing experience. The content was then approved to make sure it was safe and adhered to a few basic tone of voice rules.

Once the content was approved, we used our API and the Gatsby source plugin to pull it into the front-end. This was all set-up using Gatsby components.

The front-end

The round results UI of tje Jam Slam game showing which Top Trumps card won.

It was our first experience using Gatsby on a project and was honestly such a great experience.

We were dealing with complex components, and the Gatsby Source plugin really helped with mapping our content model to use in the UI using GraphQL. This gave us instant parity between GatherContent and the UI.

This was made very easy by Gatsby's GraphQL data model and data querying tools. We carried out the following steps to build the frontend:

  • Created routes using Gatsby's file system routing
  • Grabbed data from GatherContent using our Gatsby Source plugin and the `pageQuery` and `useStaticQuery` methods
  • Built out the pages and interactivity with React and Javascript

Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!

And that's a Jam Slam

You can play Jam Slam online now. Forget about the mess that was 2020, and slam some jams. It's worth it for the music alone 🎵

This project taught us a lot and was a great way to get stuck into more Jamstack technologies and we'll be open-sourcing this code over the next few weeks.

In the meantime, you can register to get access to the GatherContent Gatsby Source Plugin on our product betas page.

Ready to get started?
Start your 30-day free trial now
Start free trialBook a demo
No items found.

About the author

Angus Edwardson

Angus is the Product Director and Co-Founder at GatherContent where he spends his time taming the product roadmap and dreaming of a world without Word documents.

Related posts you might like