React and Serverless - Fullstack Web Development by James Quick

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
My Setup
6 mins
1.1 What We'll Build and Resources
4 mins
1.2 Create Starter React Project
7 mins
1.3 Add Routing with React Router
8 mins
1.4 Create the Navbar
5 mins
2. Styling with Styled Components
2.1 Introduction to Styled Components
4 mins
2.2 Create Base Styled Components
10 mins
2.3 Style the Navbar
12 mins
2.4 Style the Home Page
7 mins
2.5 Style the Game Page
12 mins
3. Game Functionality with React Hooks
3.1 Introduction to React Hooks
4 mins
3.2 First Hook To Track User's Score
8 mins
3.3 Implement the Timer
20 mins
3.4 Listen for User Input
4 mins
3.5 Update User Score Based on Input
10 mins
4. React Context API to Share State Between Components
4.1 Introduction to React Context
3 mins
4.2 Tracking User's Score Between Components
10 mins
5. Airtable API and Setup
5.1 Introduction to Airtable
4 mins
5.2. Airtable Workspace and API
11 mins
6. Serverless Functions for Storing High Scores
6.1 Introduction to Serverless Functions
7 mins
6.2. Netlify Init and Setup
12 mins
6.3. Creating Your First Serverless Function
14 mins
6.4. Serverless Function to Retrieve High Scores
13 mins
6.5. Setup Environment Variables
8 mins
6.6 Displaying High Scores
19 mins
6.7. Create Save High Score Serverless Function
15 mins
6.8 Refactoring Common Airtable Code
10 mins
6.9. Save Score on Game Over
11 mins
6.10. Game Over Bug Fix and Extra Styling
9 mins
7. Add Authentication with Auth0
7.1 Introduction to Authentication
3 mins
7.2. Sign up and Create Tenant in Auth0
5 mins
7.3. Add Authentication in React
16 mins
Logout Update
Auth0 Dashboard Updates
7.4. Require Username on Sign Up
5 mins
8. Add Security Serverless Functions
8.1 introduction to Authorization (JWTs and Access Tokens)
5 mins
8.2 Include Access Token in Save Score Request
11 mins
8.3. Retrieve and Parse Access Token
8 mins
8.4. Validate Access Token (Updated)
16 mins
9. Create Light/Dark Mode with Context API and Hooks
9.1 Introduction to Theming with CSS
1 min
9.2. Create CSS Variables for Theming
9 mins
9.3. Use the Styled Components Theme Provider
9 mins
9.4. Create UseTheme Hook
10 mins
9.5. Persist Theme Choice in Local Storage
6 mins
10 Final Touches
10.1. Styling and Clean Up
10 mins
10.2. Final Deploy Configurations in Netlify
6 mins
11. Course Wrap Up
11.1 What's Next
4 mins
11.2 Wrap Up
2 mins

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.