Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up

#100DaysOfGatsby 2021: The Finish Line

Michelle Gienow
April 12th, 2021

It’s the 12th of April, a day which represents two milestones: the 100th day of 2021, and also the finish line for this year’s #100DaysOfGatsby Challenge. Congratulations to all those who made it this far!

(Didn’t get a chance to finish the challenge, or maybe missed the kickoff back on January 1st? No worries, and no need to wait for 2022! This is designed to be a work-at-your-own-pace project, and all the guidelines and support materials are available for you to choose whichever 100 days work best for you).

Recap: The Challenges

This year’s #100DaysOfGatsby challenge took a story approach, where participants assume the role of “Dev” — newest hire in a fictional headphones sharing startup named AudioCORE. The project proceeded in five parts, each spanning three weeks (though some excited participants worked through the challenges in days, in a few cases even hours, instead of weeks). By following along, challengers built a basic Gatsby site and then gradually added features and functionality:

Challenge 1, Proof of Concept: Make a small, unstyled PoC site using Contentful, then build and deploy it with Gatsby Cloud Hosting. This challenge introduced the fundamental architecture and workflow of a Gatsby project, including routing, source plugins, and building/deploying.

Challenge 2, Launch the Site: Use a component library to add style to the site’s pages, and add content and images. Then optimize the site for performance, SEO, and accessibility. Finally, add PWA (progressive web app) to the site, including making the site work offline. This challenge demonstrates how Gatsby’s plugin ecosystem lets developers easily customize sites to handle client requirements.

Challenge 3, WordPress:  Yes, we already have a Contentful CMS, but now Marketing wants you to add a blog section to the site using WordPress! This challenge demonstrates Gatsby’s unique capability to handle multiple data sources, and exposes participants to WPGraphQL and Gatsby’s WordPress source integration plugin.

Challenge 4, Shopify Swag Store: Add a swag store using Gatsby’s Shopify source integration plugin. This challenge demonstrates, again, using Gatsby as frontend to multiple data sources and services, and shows how user authentication and other ecommerce requirements can be achieved with Gatsby.

Challenge 5, Gatsby Theme: Create a Gatsby Theme to make scaling the AudioCORE website a consistent, rapid process. This challenge introduces users to Gatsby Themes — pre-built, installable packages for setting up a site’s default styling, components, plugins, and overall configuration that can be reused across multiple Gatsby sites — and the Gatsby Theme API.

Next Steps

#100DaysOfGatsby participants receive encouragement from the Gatsby team and support each other’s progress in Gatsby’s GitHub Discussions forum and on our Discord community. There are also “Solve” videos to support implementing each of the challenges:

Challenge 1, PoC Solution

Challenge 2, Launch the Site

Challenge 3, Add WordPress Blog

Challenge 4, Shopify Swag Store

Challenge 5, Create a Gatsby Theme (video) and GitHub repo

If you worked your way through all five challenges, our hats are off to you, “Dev”!  🎩  🧢 👒  By making it to the end of #100DaysOfGatsby, you now know the ins and outs of building sites with Gatsby….And had fun doing it with encouragement from the Gatsby team and a community of thousands of other developers.

Completed the challenge? ➡️  Be sure to join us again on January 1, 2022 for the next #100DaysOfGatsby. And, before then, tell us all about it on Twitter!

Missed it this year? ➡️  Well, there’s still plenty of 2021 left to go. Why not get started now?


Share on TwitterShare on LinkedInShare on FacebookShare via Email

Writes things @ GatsbyJS. Chaotic good frontend dev, caffeine addict, backyard chicken wrangler 🐓.

Follow Michelle Gienow on Twitter

Tagged with 100-Days-of-GatsbyView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2023 Gatsby, Inc.