Challenge: Static site with lots of images and fonts

Solution: gatsby-image to blur in images and gatsby-prefetch-google-fonts to save http requests. DRY up the gatsby-image pattern with a wrapper component that clips the <Img/> with an SVG and runs a GraphQL query that dynamically fetches the passed-in filename.

Challenge: Some <a href=""></a> query strings need to contain secrets to allow one-click login.

Solution: Make a function run onClick which dynamically assembles the query string by fetching the secrets with Netlify lambda functions.

Challenge: Books and Teachers pages should be hidden from public view.

Solution: Simple auth pattern in which the currently guessed password is saved in localStorage, and checked against a sitewide fixed password that the students know, fetched from a cloud function. Even the private routes are pre-rendered using Gatsby's node APIs, and hidden using Reach Router navigation.