React: Creating and Hosting a Full-Stack Site (2022)

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 - Create a full-stack website
02 - What you should know
03 - Installing Node.js and NPM
04 - Project introduction

1. Creating a React Front End

05 - Why React
06 - Setting up a React project
07 - Creating the app component
08 - Creating your blog pages
09 - Using React Router links
10 - URL parameters with React Router
11 - Creating and linking the articles list
12 - Making your articles list modular
13 - Creating a 404 page in React

2. Creating a Node.js Back End

14 - Why Node.js
15 - Setting up an Express server
16 - Testing an Express server with Postman
17 - URL parameters in Express
18 - Upvoting articles
19 - Automatically updating with nodemon
20 - Adding comments

3. Adding MongoDB to Node.js

21 - Why MongoDB
22 - Downloading and installing MongoDB
23 - Adding MongoDB to Express
24 - Rewriting your upvote endpoint
25 - Rewriting your comments endpoint

4. Connecting the Front End and Back End

26 - The Axios library
27 - Adding React hooks
28 - Calling useEffect at the right time
29 - Adding data loading to page components
30 - Displaying comments
31 - Creating an upvote button
32 - Creating an add comment form

5. Adding User Authentication with Firebase Auth

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

6. Hosting a Full-Stack React Application

44 - Preparing an app for release
45 - Setting up hosting for MongoDB
46 - Releasing a full-stack application
47 - Shutting down a Google Cloud project

Conclusion

48 - Next steps

React: Creating and Hosting a Full-Stack Site (2022)

Authors

Shaun Wassell