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.