React: Creating and Hosting a Full-Stack Site

Course details

You've learned React and can create amazing front-end interfaces. But deploying them requires more. You need logic—and a place to put it. By combining your front-end UI with a back-end solution and cloud hosting, you can build powerful and interactive full-stack applications. In this project-based course, Shaun Wassell shows how to combine React, Node.js, and Amazon Web Services (AWS) in a full-stack, full-featured website, including user-friendly forms for posting articles and comments. Learn how to create an interface from React components, develop a Node.js server, tie in a MongoDB database, add user authentication with Firebase Auth, and deploy your site on Amazon Web Services. Join Shaun in this course to gain the skills to take your client services to the next level: full-stack web applications that are truly interactive.

Concepts

0. Introduction

01 - Build your own full-stack website using React
02 - What you should know

1. Creating a React Front-End

03 - Why React
04 - Setting up a React project
05 - Creating the home page
06 - Adding React Router to an application
07 - Using React Router links
08 - URL parameters with React Router
09 - Creating and linking the articles list
10 - Creating a 404 page in React
11 - Adding styles

2. Creating a Node.js Back-End

12 - Why Node.js
13 - Setting up an Express server
14 - Testing an Express server with Postman
15 - Route parameters in Express
16 - Upvoting articles
17 - Automatically updating with Nodemon
18 - Adding comments

3. Adding MongoDB to Node.js

19 - Why MongoDB
20 - Downloading and installing MongoDB
21 - Adding MongoDB to Express
22 - Rewriting the upvote endpoint
23 - Rewriting the comments endpoint

4. Connecting the Front-End and Back-End

24 - The Axios library
25 - Loading data For React Router routes
26 - Using the useLoaderData hook
27 - Using route parameters in loaders
28 - Displaying comments
29 - Creating an upvote button
30 - Creating an add comment form

5. Adding User Authentication with Firebase Auth

31 - Why Firebase Auth
32 - Creating a Firebase project
33 - Adding Firebase Auth to React
34 - Build a login form
35 - Build a create account page
36 - Making interface adjustments for authenticated users
37 - Creating a custom auth hook
38 - Adding Firebase Auth to Node.js
39 - Protecting endpoints using auth tokens
40 - Protecting the upvote and comment endpoints
41 - Making requests with auth tokens

6. Hosting a Full-Stack React Application

42 - Preparing an app for release
43 - Setting up hosting for MongoDB
44 - Defining environment variables
45 - Deploying a full-stack application
46 - Shutting down a Google Cloud project

Conclusion

47 - Next steps in your React journey