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.

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.

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.

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.

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

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.

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.

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.