React: Creating and Hosting a Full-Stack Site

Learn how to combine React, Node.js, and Amazon Web Services (AWS) in a full-stack, full-featured website.

Introduction

• Create a full-stack website
• What you should know
• Installing Node.js and NPM
• Project introduction

1. Creating a React Front End

• Why React?
• Setting up a React project
• Creating the app component
• Creating your blog pages
• Using React Router links
• URL parameters with React Router
• Creating and linking the articles list
• Making your articles list modular
• Creating a 404 page in React

2. Creating a Node.js Back End

• Why Node.js?
• Setting up an Express server
• Testing an Express server with Postman
• URL parameters in Express
• Upvoting articles
• Automatically updating with nodemon
• Adding comments

3. Adding MongoDB to Node.js

• Why MongoDB?
• Downloading and installing MongoDB
• Adding MongoDB to Express
• Rewriting your upvote endpoint
• Rewriting your comments endpoint

4. Connecting the Front End and Back End

• The Axios library
• Adding React hooks
• Calling useEffect at the right time
• Adding data loading to page components
• Displaying comments
• Creating an upvote button
• Creating an add comment form

5. Adding User Authentication with Firebase Auth

• Why Firebase Auth?
• Creating a Firebase project
• Adding Firebase Auth to React
• Build a login form
• Creating a custom auth hook
• Build a create-account page
• Adding Firebase Auth to Node.js
• Protecting endpoints using auth-tokens
• Protecting the upvote and comment endpoints
• Making requests with auth tokens
• Making interface adjustments for authenticated users

6. Hosting a Full-Stack React Application

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

Conclusion

• Next steps