React and Serverless - Fullstack Web Development

Explore styled components and how they enable dynamic styling in JavaScript using props, including light and dark theming. Install the VNS code styled components extension for color coding and IntelliSense.

Install styled-components and create a styled container and main components to center content and apply full-page height and background color. Implement a global style with createGlobalStyle for resets and typography.

Build a responsive navbar using styled components, defining a grid layout with a brand and links, styling the brand, links, hover effects, and a reusable accent component.

Style the home page by building a title and a call-to-action component with styled components, featuring a full-width link to the game page and a hover underline.

Style the game page using styled components and a responsive grid to display score, timer, and a large random character, with precise layout and typography.

Learn how React hooks enable state in functional components with useState, and manage side effects with useEffect, including dependency arrays and component did mount behavior.

Track the score with the useState hook and update it on a timer using setInterval, while useEffect with a dependency array cleans up to prevent exponential growth.

Implement a countdown timer in a React app by tracking start time and elapsed milliseconds, updating a two-digit seconds and three-digit milliseconds display, and navigating to the game over page.

listen for user input in a react game component by using a use effect with an empty dependency array to attach a document keyup listener, log keys, and clean up.

Display a random character from a set, and update the user score when the typed key matches the current character, then generate a new random character after each input.

Explore how the React Context API solves prop drilling by providing a central state via a context provider and the useContext hook.

Create and use a React score context to share and initialize the score across components, guard the game over screen with a negative-one starter, and display navigation options.

Learn how Airtable offers a flexible base for storing simple high scores, using grid views and fields, and access it via the Airtable API and JS SDK in serverless functions.

Create an Airtable base, define name and score fields, and interact with the Airtable API using GET, POST, and PATCH requests; explore API keys, authentication, and serverless functions.

Explore how serverless functions protect secrets and power backend logic for a static React site with Netlify and Airtable. Retrieve high scores and conditionally save top 10 using serverless backend.

Initialize and configure Netlify to host a full stack app with functions. Set up continuous deployment via GitHub using a build command npm run build and netlify.toml configuration.

Create and test a hello world serverless function locally, configure a functions directory, export a handler, and deploy.

Build a serverless function to fetch high scores from an Airtable table using the Airtable npm package. Use async/await and return simplified records with id and fields, including error handling.

Load api keys and configuration locally with the dotenv package from a .env file, keep credentials out of source control, and share variable names via a .env.sample.

Query AirTable records with AirTable npm package, filtering nonempty names and scores above zero; fetch scores via serverless function and display in React in descending order using useState and useEffect.

Create a save high score serverless function that accepts a post request, validates a score and name, and updates the lowest top-ten record.

Refactor common Airtable API logic into a shared utils module, exporting getHighScores with an optional filter, and reuse it across serverless functions to reduce duplication.

Save a game score using a serverless function, display high-score status on game over, and handle success or failure messages through a one-time effect and fetch post request.

Fix a zero score bug on the game over page by correctly checking score undefined, then apply styling improvements across pages for a cleaner React fullstack experience.

Implement authentication and authorization using a dedicated identity service, starting with email or username and password login. Use JSON Web Tokens (JWT) for access control and social providers.

Sign up for a free Auth0 account, create a tenant to group your front-end single-page app and serverless API, and configure a single-page web app with the built-in database login.

Add authentication in React by configuring domain and client id with Auth0, set callback and logout URLs, wrap the app with the Auth0 provider, and use useAuth0 to manage login.

Enable a username on sign up by setting a username requirement and minimum length. Add the username to the ID token via a custom rule in the serverless authentication flow.

Learn to secure serverless endpoints with JWT authorization after authentication; decode and validate access tokens (header, payload, signature) using secret and public keys to verify users and save high scores.

Learn to obtain a self-contained JWT access token with getTokenSilently, then send it in the save score request's authorization header as a bearer token for serverless validation.

Retrieve and validate the access token from the Authorization header in a serverless function, handle unauthorized cases, and test saving high scores with Postman.

Decode and validate the incoming jwt using the kid in the header to fetch the correct public key from a json web key set and verify the signature.

Toggle between light and dark themes using CSS variables and React context providers; persist user theme choice in local storage to restore on refresh.

Define CSS variables on the root for a three-color theme—main background, main text color, and accent—and apply them globally, enabling a dark theme toggle and local storage persistence.

Implement a styled components theme provider with light and dark theme objects, updating global styles for background, text, and accent colors. Use a theme flag and ternary to switch themes.

Create a useTheme hook in React to track and toggle light and dark themes using useState, initially light, apply in the app and navbar, and persist the choice in localStorage.

Persist the user's theme choice with local storage, defaulting to light and updating both memory and storage when the user toggles dark or light.

Apply styling and cleanup in a React app by converting login/logout to link-style buttons, adding a theme toggle with inverted colors, and centering a full-screen loader overlay using styled components.

Update the app's hosted configuration on Netlify, fix callback URL mismatch, and securely supply environment variables for serverless functions. Then deploy, test login and high-score features, and verify Airtable integration.