James Q Quick/React and Serverless - Fullstack Web Development

  • $40

React and Serverless - Fullstack Web Development

Sign up to get an exclusive course launch discount!

Course Overview

In this course, you will build a secure and production-ready fullstack typing application from start to finish. Along the way, you will learn core concepts of developing modern web applications like React, authentication/ authorization, Serverless Functions, and continuous integration. By the end of this course, you will have the knowledge you need to build amazing applications to share with the world!

Here's what you will learn.

  • Modern React including Hooks and the Context API
  • Source Control with Git/Github
  • CSS in JSS using Styled Components
  • Store Data using the Airtable API
  • Secure applications using JSON Web Tokens
  • Build and Deploy Serverless Functions in Netlify
  • Create a Light/Dark Mode
  • Deploy to Netlify using Continuous Integration


Who is This Course For

The beginner to intermediate developer who wants to learn how to build secure fullstack applications!
This course is perfect for developers who are interested in building real-world applications with React and love to learn new things. Although most React concepts will be covered in detail, it is expected that you already have basic knowledge of both JavaScript and React. Everything else, you'll learn along the way!

What You'll Get

You'll get full access to the videos and source code for life. You'll also get...

  • full access to the source code (broken down by video)
  • exclusive live Q&A sessions
  • exclusive discord channel
  • lifetime access and updates

FAQs

Do these videos expire?

Nope, you'll have lifetime access 😀

How do I login and view the course?

You can login at learn.jamesqquick.com. Use the login button in the top right.

Is this course for beginners?

Although most concepts will be covered in detail, it is expected that you already have basic knowledge of JavaScript and React. If you are looking for more beginner resources, shoot me and email and I'll point you in the right direction.

Is there a student discount?

Sure thing! Send me an email at me@jamesqquick.com with a picture of your student ID, and I'll send you a 50% off link.

Other questions?

Feel free to reach out in chat or send me an email at me@jamesqquick.com.

Contents

1. Course Overview and Project Setup

Welcome
  • 3 mins
  • 110 MB
My Setup
  • 6 mins
  • 237 MB
1.1 What We'll Build and Resources
  • 4 mins
  • 164 MB
1.2 Create Starter React Project
  • 7 mins
  • 118 MB
1.3 Add Routing with React Router
  • 8 mins
  • 183 MB
1.4 Create the Navbar
  • 5 mins
  • 95 MB

2. Styling with Styled Components

2.1 Introduction to Styled Components
  • 4 mins
  • 157 MB
2.2 Create Base Styled Components
  • 10 mins
  • 258 MB
2.3 Style the Navbar
  • 12 mins
  • 263 MB
2.4 Style the Home Page
  • 7 mins
  • 142 MB
2.5 Style the Game Page
  • 12 mins
  • 304 MB

3. Game Functionality with React Hooks

3.1 Introduction to React Hooks
  • 4 mins
  • 178 MB
3.2 First Hook To Track User's Score
  • 8 mins
  • 158 MB
3.3 Implement the Timer
  • 20 mins
  • 518 MB
3.4 Listen for User Input
  • 4 mins
  • 79 MB
3.5 Update User Score Based on Input
  • 10 mins
  • 264 MB

4. React Context API to Share State Between Components

4.1 Introduction to React Context
  • 3 mins
  • 132 MB
4.2 Tracking User's Score Between Components
  • 10 mins
  • 203 MB

5. Airtable API and Setup

5.1 Introduction to Airtable
  • 4 mins
  • 158 MB
5.2. Airtable Workspace and API
  • 11 mins
  • 135 MB

6. Serverless Functions for Storing High Scores

6.1 Introduction to Serverless Functions
  • 7 mins
  • 279 MB
6.2. Netlify Init and Setup
  • 12 mins
  • 249 MB
6.3. Creating Your First Serverless Function
  • 14 mins
  • 284 MB
6.4. Serverless Function to Retrieve High Scores
  • 13 mins
  • 355 MB
6.5. Setup Environment Variables
  • 8 mins
  • 169 MB
6.6 Displaying High Scores
  • 19 mins
  • 480 MB
6.7. Create Save High Score Serverless Function
  • 15 mins
  • 461 MB
6.8 Refactoring Common Airtable Code
  • 10 mins
  • 308 MB
6.9. Save Score on Game Over
  • 11 mins
  • 299 MB
6.10. Game Over Bug Fix and Extra Styling
  • 9 mins
  • 238 MB

7. Add Authentication with Auth0

7.1 Introduction to Authentication
  • 3 mins
  • 132 MB
7.2. Sign up and Create Tenant in Auth0
  • 5 mins
  • 46.8 MB
7.3. Add Authentication in React
  • 16 mins
  • 500 MB
Logout Update
    Auth0 Dashboard Updates
      7.4. Require Username on Sign Up
      • 5 mins
      • 75.1 MB
      New React Auth0 SDK

        8. Add Security Serverless Functions

        8.1 introduction to Authorization (JWTs and Access Tokens)
        • 5 mins
        • 199 MB
        8.2 Include Access Token in Save Score Request
        • 12 mins
        • 345 MB
        8.3. Retrieve and Parse Access Token
        • 8 mins
        • 258 MB
        8.4. Validate Access Token (Updated)
        • 16 mins
        • 494 MB

        9. Create Light/Dark Mode with Context API and Hooks

        9.1 Introduction to Theming with CSS
        • 1 min
        • 40.8 MB
        9.2. Create CSS Variables for Theming
        • 9 mins
        • 245 MB
        9.3. Use the Styled Components Theme Provider
        • 9 mins
        • 270 MB
        9.4. Create UseTheme Hook
        • 10 mins
        • 294 MB
        9.5. Persist Theme Choice in Local Storage
        • 6 mins
        • 135 MB

        10 Final Touches

        10.1. Styling and Clean Up
        • 10 mins
        • 284 MB
        10.2. Final Deploy Configurations in Netlify
        • 6 mins
        • 120 MB

        11. Course Wrap Up

        11.1 What's Next
        • 4 mins
        • 173 MB
        11.2 Wrap Up
        • 2 mins
        • 67.3 MB

        Hi! I'm James

        I'm a developer, speaker, and teacher with a passion for web development, design, and developer tools. I have taught tens of thousands of students online/in-person and am excited to share with you. 

        In my spare time, I run a YouTube channel, play co-ed soccer with my wife, spend time with my dogs, and can solve a Rubik's cube in under two minutes.