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