React: Creating and Hosting a Full-Stack Site

React: Creating and Hosting a Full-Stack Site

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 4h 44m | 819 MB

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.

Table of Contents

1 Create a full-stack website
2 What you should know
3 Installing Node.js and NPM
4 Project introduction

Creating a React Front End
5 Why React
6 Setting up a React project
7 Creating the app component
8 Creating your blog pages
9 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

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

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

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

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

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

48 Next steps