Today I redesigned a JAMstack application that I wanted to write about. The project is called the Rubber Duck Code Challenge and is Open Source.
- The Projects GitHub repo is here
- The project is hosted at https://rubber-duck-code-challenge.firebaseapp.com
Markup (M): Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps (e.g. Gatsby.js, Webpack).
—direct quote from Astasia Myers post The JAMstack: Its Pretty Sweet.
The Rubber Duck Code Challenge is actually a rewrite of my project overwatch-challenge, which I’ve written about in previous posts:
- Why Building with a JAMstack is Awesome
- Why Firebase Cloud Functions are Awesome
- Building an API with Firebase
Why the name Rubber Duck? The application is a play on the “Debugging with a Rubber Duck” idea where devs talk to a Rubber Duck to work out their programs (here’s the wiki article if you’re not familiar).
The central idea of my project is to gamify learning. I had originally designed it for a team I previously worked with, but decided do a rewrite and open it up to the greater dev community.
- It relies on Firebase’s NoSQL database (firestore)
- It uses an API built with Firebase that is serverless
- It is hosted with Firebase
- In general, it leverages Google’s Firebase services in lieu of me building out all the infrastructure manually myself
Using Firebase Cloud Functions and the ExpressJS library, I built an API to use with the application. The basic endpoints cover the Create, Read, Update, Delete (CRUD) operations that accompany the application. I also created database triggers which send notifications to the associated Slack Channel for team interactions, and sends notifications based on database triggers when:
- Users are registered
- Activities are created
- High Scores are tallied
For more details on how to build an API with Firebase, I recommend checking out my Angular-In-Depth post on Building an API with Firebase.
The project also makes use of CircleCI for deployment and includes a multi stage pipeline with:
- unit testing with Karma
- e2e testing with Cypress
By leveraging Firebase and the associated services, I was able to focus my efforts on the design and architecture of the application. This made it easier and saved me the headache of having to work on infrastructure etc.
I know this post is relatively short, but just wanted to highlight how cool (and fun) working with the JAMstack Architecture is. Hope you check out my application, and learn more about the JAMstack architecture!
If you’d like to participate in the Rubber Duck Code Challenge , feel free to register yourself with the links above. I plan to tally scores every Friday!
Feel free to leave comments or connect with me on Twitter at: https://www.twitter.com/andrewevans0102