Workshop Playbook

# Workshop Playbook

This document is a high-level overview of what we’ll cover in the workshop.

## Legend

- 👨‍🏫 **Presentation** — I’ll show slides, talk about concepts, and other teacher-ey things
- 👀 **Watch (or code-along)** — I’ll build something and explain as I go. I’ll commit and push my changes after each of these steps, so you can watch this step, then pull the changes. Or, if you want extra practice, you can code along.
- 💪 **Exercise** — you’ll build something on your own to practice a skill we just learned. We’ll go over the solution together after each exercise.
- 🤝 **Code-Along** — we’ll build something together.

## Section 1: Static Sites, No Tools

Build a plain HTML and CSS site with no build tools or CLIs and get it live on the internet.

Move into the `01-really-static` directory. The CSS for this exercise has already been created.

- 👨‍🏫 Introduce the Jamstack architecture
- 👀 Build `index.html`, load it in the browser
- 💪 Build `about.html` 
  - NOTE: the nav on `index.html` will be out of date! 😱
- 🤝 Add active nav item logic
- 👀 Deploy to Netlify by dragging and dropping the folder with our website
- 💪 Create or log into your Netlify account, then deploy the site

## Section 2: Build Time Rendering

Build a website using 11ty, then deploy it using Netlify’s CLI.

Move into the `02-static-site-generator` directory. The CSS for this exercise has already been created.

- 👨‍🏫 Introduce static site generators
- 👨‍🏫 Build Time Rendering vs. Request Time Rendering
- 👀 Confugure 11ty: create `.eleventy.js`, a layout file, and `index.md`
- 💪 Create `about.md`
- 🤝 Add active nav item logic
- 🤝 Initialize this directory as a new git repo and put it on GitHub
- 🤝 Install the Netlify CLI and deploy the site

## Section 3: Handle User Input

Add a contact form and a serverless function to handle form submissions.

Stay in the 11ty site. We’ll add this here.

- 👨‍🏫 What are serverless functions?
- 👀 Build a comment form in the layout (GitHub username, comment, page)
- 👀 Build a serverless function that echoes the comment form data
- 💪 Build a contact page with a contact form (name, email, message)
- 💪 Build a serverless function that echoes the contact form data

## Section 4: Save User Input to a Database

Create a database and have our serverless functions send data there for storage.

- 👨‍🏫 How do databases work on the Jamstack?
- 🤝 Create Fauna account
- 👀 Define a schema for the comment form
  - Import GraphQL schema
  - Create a server key
  - Add to Netlify site env vars
- 👀 Write a utility to send queries to Fauna
  - ntl dev
  - Submit a comment
  - Check in Fauna that it saved
- 💪 Add a Contact schema to the database
- 💪 Update the serverless function to save entries to the database

## Section 5: Load and Display Data from a Database

Read from the database using a serverless function and return the data for display.

- 👨‍🏫 Why do we use serverless functions to retrieve data?
- 🤝 Modify the schema to add a query for comments by page
- 🤝 Write a serverless function to query for comments
- 🤝 Write the JavaScript to call the serverless function and display comments

## Section 6: Protect Routes

This is a rudimentary setup for auth, but it shows the principals of how to protect a route.

- 👨‍🏫 How does authentication work on the Jamstack?
- 👨‍🏫 What are we *not* going to cover in this workshop?
- 🤝 Deploy the Gatsby site
- 🤝 Create Dashboard and Login pages
- 🤝 Create a Secret Stuff component that redirects to login if not logged in
- 🤝 Create a login form to “log in”

## Section 7: Load User-Specific Data Asynchronously

Once our users can identify themselves, we can customize the app’s content based on who they are.

- 👨‍🏫 Loading content based on user-specific data
- 💪 Update the DB schema to query comments by user
- 💪 Write a serverless function to load comments by user
- 💪 Create a new component to call the serverless function and display the data
- 💪 Add the new component to the secret stuff component