From August through September Gatsby ran the internet’s func’y-est ever community competition: FuncJam ‘21. We asked folks from every corner of the globe to get creative with Gatsby Functions on Gatsby Cloud and they did not disappoint!
We had many entries, ranging from the brilliant to the downright bizarre. We’ve known this for many years, but the Gatsby community is jam-packed with truly wonderful and creative folks and we love you all. 💜
In a nutshell, the competition required folks to build and document the use of their Gatsby Function, with each entry consisting of a working in-browser demo and a link to the source code.
There were no restrictions on what the function could do or the way in which the usage was demonstrated. Every entry was judged on the following criteria.
- Code quality and legibility
- Performance
- Live demo available
- Documentation in the README
- Accurate metadata
- Creativity & Originality
You can read the full submission requirements on the Gatsby FuncJam `21 page
The Winners
I interviewed each of the winners to get the low-down on what their function does, the challenges they faced, and what problem it solves — and so, without further ado, the winners (in no particular order) are as follows:
Nico Martin: Oh My Spotify
Oh My Spotify acts like browser history for Spotify. Once logged-in, users are able to review their recently played or currently playing Spotify tracks right there in the browser!
Demo: https://ohmyspotify.gatsbyjs.io/
Repo: https://github.com/njbmartin/gatsby-funcjam-21/tree/project/my-spotify
Nico’s project interacts directly with the Spotify Web API using native HTTP requests, Gatsby Functions and header authentication, “I find the best way to learn an API is to interact directly with it” explains Nico, and with Gatsby Functions it’s entirely possible to work in this way.
The tricker parts of the challenge for Nico however weren’t with writing the function itself but with creating a user interface around it, Nico tells me “the challenging part was marking the Gatsby Function look pretty”, and this is completely understandable!
In the new world of Jamstack the lines between Front-end and Back-end web development are becoming more and more blurred and whilst Gatsby (the framework) and Gatsby Cloud offer solutions for both sides of the stack, it doesn’t mean everybody will be comfortable working in this way. FWIW Nico, I think you did a splendid job with the UI and kudos for using Theme UI 💜
Nico is using his project as an educational piece and has open-sourced it so other folks can learn how to interact with the Spotify API using native HTTP methods.
You can follow Nico on Twitter here: @njbmartin
Congratulations Nico! Personally speaking I’m shocked by the sheer number of Taylor Swift tracks that appear in my recently played list 🤭
Julien C: Gatsboard
Gatsboard is more than a function, it’s a fully functioning React application that allows users to search, group and then save clips of their favorite YouTube videos on a “board” for easy access later on.
Demo: https://gatsboard.gatsbyjs.io/
Repo: https://github.com/flippingmyworld/gatsboard
Boards can then be shared directly on Twitter or Facebook or a link can be copied to share manually.
The application supports light and dark mode, houses a handy search feature along with global volume control and for video playback Julien used ReactPlayer. Gatsboard uses Redux for state management and Gatsby Functions to save changes made to user’s boards to a Firebase database.
“The most difficult part of the FuncJam challenge was coming up with the idea” – says Julien, and we understand, with Gatsby Functions the possibilities are quite frankly endless!
Julien is actively using his project as a soundboard to store his favourite YouTube clips and plays them at opportune moments while on calls with his teammates, Julien says “it’s like a shortcut for jokes, and timing is everything!” — although, I’d hasten to add; a Parrot that sounds like a Turkey = Never not funny!
You can follow Julien on Twitter here: @aHumanDev
Congratulations, Julien! I really enjoyed using Gatsboard!
Queen Raae: Life-changing
Life-changing automates the invitation and secure payment steps required to provide paying customers with access to private a GitHub repository
Demo: https://lifechanging.gatsbyjs.io/
Repo: https://github.com/queen-raae/gatsby-funcjam-21
The Life-changing app connects to both the Stripe API to make secure payments and the GitHub API to grant access to a private repository once a payment is completed.
The method required to make this work is sometimes known as “OAuth Dancing”. Benedicte referenced the following post written by Anabella Spinelli that explains this in more detail: The Beginner’s Guide to OAuth Dancing
For your reading pleasure I asked Benedicte to summarize the approach, and it goes a little something like this:
“The user is redirected from the Life-changing app to a GitHub URL – They login – Then they are redirected back to the Life-changing app – A code is then traded with the GitHub API – which then responds with an access token.” 😰
This access token can then be used when any communication with the Github API is required.
After the payment is complete Benedicted uses a Stripe webhook that contains the GitHub username in the metadata, this is how the app links up a GitHub username with the completed payment process which then finally resolves to the GitHub user being granted access to a private repo. — A dance indeed! It’s for this reason we loved this project. It’s an extremely creative use of technology or should I say technologies
Benedicte plans to use her project for managing access to private repos included with her Gatsby Mini Bootcamps and says “I really like solutions that automate the boring bits”. This approach means Benedicte can focus more on the course content and less on the administrative side of things. You can read more about the courses at https://queen.raae.codes
You can follow Benedicte on Twitter here: @raae
Congratulations, Benedicte! Build it and they will come!
So that just about wraps things up. We’d like to thank everyone who entered, you’ll all be receiving exclusive FuncJam stickers by mail in the coming weeks and if you’d like to share where you’ve been stickin’ em, do let us know on Twitter: @GatsbyJs and don’t forget the hashtag: #FuncJam
Until the next competition, stay func-y friends!
See you around
Paul 🕺