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:
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.
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:
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 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).
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:
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 is quite simple...
But as you would imagine, it's not really that simple, some complications were:
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.
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:
Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!
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:
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.
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:
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 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).
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:
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 is quite simple...
But as you would imagine, it's not really that simple, some complications were:
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.
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:
Overall, we loved the frontend experience and found it very intuitive - we particularly liked how easy it was to create a 404 page!
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.
Angus is Co-founder and VP of Product at GatherContent, where he focusses on the product and research areas of the business – looking into the future of content management, and trying to improve the way organisations create and deliver information. A board member of the European Information Architecture Summit, he has been heavily involved with the Content Strategy, CMS, and product management communities for several years, and frequently writes and speaks around the intersection of these disciplines.