React: Creating and Hosting a Full-Stack Site

Introduction

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

1. Creating a React Front-End

• Why React?
• Setting up a React project
• Creating the home page
• Adding React Router to an application
• Using React Router links
• URL parameters with React Router
• Creating and linking the articles list
• Creating a 404 page in React
• Adding styles

2. Creating a Node.js Back-End

• Why Node.js?
• Setting up an Express server
• Testing an Express server with Postman
• Route 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 the upvote endpoint
• Rewriting the comments endpoint

4. Connecting the Front-End and Back-End

• The Axios library
• Loading data For React Router routes
• Using the useLoaderData hook
• Using route parameters in loaders
• 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
• Build a create account page
• Making interface adjustments for authenticated users
• Creating a custom auth hook
• Adding Firebase Auth to Node.js
• Protecting endpoints using auth tokens
• Protecting the upvote and comment endpoints
• Making requests with auth tokens

6. Hosting a Full-Stack React Application

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

Conclusion

• Next steps in your React journey