Challenge 1: Proof of Concept (#100DaysOfGatsby)

Welcome to #100DaysOfGatsby, Gatsby’s guided coding challenge for 2021!

In the BRIEFING story below, you are “Dev”, the newest hire of the (fake) headphone sharing startup, AudioC0RE! You have three weeks to fulfill the requirements given to you. Along the way, the Gatsby team and community will assist you in the following ways:

1. HELP – January 8th – visit Gatsby’s GitHub Discussion forum to share your in-progress work, ask questions, and share resources!
2. SOLUTION – January 21st – Join our coding livestream on YouTube to learn Gatsby best practices and discover ways you could have completed the challenge!
3. BRIEFING 2 – January 22 – Just like in a real startup, one sprint ends and another begins! Move on to Challenge 2.

Briefing 1: Create a Proof-of-Concept

Welcome, “Dev”!

Today is your first day at AudioC0RE, and I’m your manager, Senior Dev!

As you know, AudioC0RE is the leading headphones sharing app in the world! (And by “leading” I mean we’re the only one. And by “world”, I mean 3 cities in California.)

Our users love us because with AudioC0RE you can pick up a pair of premium AudioC0RE headphones on a city street, pay for a rental through our app, then drop them back on the ground when you’re finished!

So far we just have a mobile app, and we need to launch our first website. It’s a high priority, high visibility, very important project that will skyrocket our growth. But it’s “website development”, which I find boring, so I’m assigning it to you!

You’ll see the tickets tagged to you in our project tracker and ranked by due date. In our tracker it’s pretty simple – all of the dates default to ASAP, and there’s no other option. So prioritize your time properly!

For the website project we’ve decided to use Gatsby.

Why? Well, honestly I just like the name and logo. I ordered a Gatsby swag drop for my whole family and it’s all we wear! My spouse loves the JAMstack jammies!

But our CEO wanted a better justification for using Gatsby, so the engineering team did some research:

We considered a traditional CMS because of how rapidly we can build a site with it. But we expect a lot of traffic spikes, and unfortunately, it’s a full-time job just keeping a monolithic CMS fast and secure. So scratch the all-in-one CMS!

Then we considered React frameworks. Since our mobile app is already built with React Native, it’s a library we’re familiar with. We weighed server-side rendering vs static site generation, and we were worried about long build times. But then we learned that Gatsby Cloud has incremental builds, with sub-10 seconds builds! So that satisfied our concern.

We also discovered that Gatsby has over 2600 plugins! Dev, our website is going to start simple, but as soon as we get a Marketing team and a Humans Resources division, believe me – we’re going to have a lot of use cases to support. So instead of coding everything from scratch, with Gatsby we can just install a plugin that gets the job done, while we take credit for the results! That’s free career advice for you, Dev!

Dev, here’s your challenge for your first sprint:

• Build a proof of concept (POC) Gatsby site to test their routing API, builds service, hosting, and Contentful integration
• Use Gatsby’s Contentful plugin and connect to a test Contentful site
• Create the following pages: 
  • home 
  • about
  • and a collection of pages for every city we’re in.
• Build it on Gatsby Cloud and use their preview URL
• Don’t worry about content or styling – this is only a POC. You can display the title of the page on a white background. That is enough for now

Dev, your resume says you’re a little familiar with React, but not with GraphQL. It also looks like you’ve never used a CI/CD tool before. 

That’s fine. Gatsby has great documentation and you can skill up as you go.

Here are a few resources to get you started:

• Create a free Contentful account
  • Retrieve your Contentful API keys from Settings → API Keys
  • The Gatsby wizard will ask you for these keys before scaffolding your site
• Run npm init gatsby in your terminal to quick start a new site
  • Choose Contentful as your CMS and add your API keys
  • Name your site and folder anything you want
  • Choose “responsive images”, “sitemap”, and “metatags”
  • Ignore the other options for now. You will use those features in a later sprint!
  • Now follow the rest of the “quick start” tutorial I linked to above
• After the tutorial, create pages using Gatsby’s File System Route API (/home, /about, and three cities under a /location route)
• Build and deploy the site on Gatsby Cloud. And you’re done!

Dev, if you have a question..

…don’t bother anyone on the team with it. We’re all 10x engineers here, and if we help you we may end up with a blank hole in our GitHub commit graph. 

So ask the Gatsby community. There are thousands of friendly developers in the community, and you’ll find many people willing to help you!

Again, welcome to AudioC0RE, Dev!

Now get working on that Gatsby Proof-of-Concept – ASAP.

Register for #100DaysOfGatsby prompts so you never miss a BRIEFING, HELP, or SOLUTION week!