Welcome to the second phase of #100DaysOfGatsby, Gatsby’s guided coding challenge for 2021!
In the BRIEFING story below, you are “Dev”, the newest hire of the fictional headphone sharing startup, AudioC0RE! You have just completed the first task, building a proof of concept website using Gatsby features like our Route API, CLI wizard, and Contentful source plugin. Ready for your next assignment? You have three weeks to fulfill the requirements given to you in Briefing 2. Along the way, the Gatsby team and community will assist you in the following ways:
HELP – January 29th. Visit Gatsby’s GitHub Discussion forum to share your in-progress work, ask questions, and share resources!
SOLUTION – February 11th. Join our coding livestream on YouTube to learn Gatsby best practices and discover ways you could have completed the challenge!
BRIEFING 3 – February 12th. Just like in a real startup, one sprint ends and another begins! Move on to Challenge 3 on the Gatsby blog.
Briefing 2: Launch the Website
Great work on delivering the proof-of-concept with Gatsby so fast, Dev!
(I would have given you feedback sooner, but I didn’t see the GitHub notification when you tagged me. I also missed your message on Slack and your email and your text. So thank you for your DM on Twitter – it’s the only inbox I pay attention to!)
For this next sprint we need to launch the AudioC0re website live.
As you know, AudioC0re puts users first in every decision we make. And the website is no exception. However, because user experience and accessibility interviews are so slow and expensive, we’ve exchanged our human decision making for automated Lighthouse scores.
Dev, I want the website you develop to have Lighthouse scores in the 90s and above for Performance, SEO, Accessibility, Best Practices, and PWA! Plus, if we get high scores with Lighthouse, maybe a DevRel from Google will tweet about us!
Dev, here are more details on your requirements:
- Use the Chakra UI component library as the basis for the site design
- Create a “contact” page, and add a form using Formium.
- Choose a CDN to deploy the site to, and continue to measure Lighthouse scores as you add features.
- Add an image of headphones for the homepage, and a skyline image for each city page. Use Gatsby’s new gatsby-plugin-image project to optimize the images. Here’s the step-by-step guide.
- Replace React with Preact using this plugin.
- Add Progressive Web App capabilities to the site, including making the site work offline.
- Follow Gatsby’s tutorial for optimizing the site for SEO.
You have 3 weeks in this sprint to complete your tasks! Good luck, Dev!
Learn more about #100DaysOfGatsby and subscribe to the email list for alerts on new challenges!