Full Stack React & Firebase Tutorial - Build a social media app
25,376In this full tutorial course, you will learn how to create a full stack, fully-featured social media application using React, Firebase, Redux, Express, and Material-UI. This intermediate tutorial covers things such as creating a backend REST API server with Node.js and Express, user login and authentication, image uploads, notifications, cloud functions, deploying to Firebase, and much more.
🎥 Course created by Classsed. Check out their YouTube channel: https://www.youtube.com/classsed
🔗Classsed Discord: https://discord.gg/GUuKyQW
🔗Classsed Patreon: https://www.patreon.com/classsed
⭐️ Code ⭐️
Functions code repo: https://github.com/hidjou/classsed-react-firebase-functions
React code repo: https://github.com/hidjou/classsed-react-firebase-client
Email regular expression: https://pastebin.com/f33g85pd
NoImg: https://pixabay.com/vectors/blank-profile-picture-mystery-man-973460/
API Base URL: https://europe-west1-socialape-d081e.cloudfunctions.net/api
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:07:03) Create & Read Data
⌨️ (0:27:56) Express & formatting response
⌨️ (0:42:37) User Registration
⌨️ (1:03:22) Validation & Login Route
⌨️ (1:19:33) Authentication Middleware
⌨️ (1:33:10) Refactoring & Organizing
⌨️ (1:48:46) Image Upload
⌨️ (2:13:45) Add and Get User Profile Details
⌨️ (2:33:15) Getting and Commenting on Post
⌨️ (2:56:38) Like, Unlike and Delete Post
⌨️ (3:25:42) Create and Get Notifications
⌨️ (3:58:11) Finishing up Cloud Functions
⌨️ (4:23:46) Getting Started With React
⌨️ (4:44:01) Post Card Details
⌨️ (5:11:45) Login Form
⌨️ (5:50:36) Signup and Auth State
⌨️ (6:05:16) Redux Setup
⌨️ (6:41:17) Signup and Auth Route
⌨️ (6:56:35) Profile Section
⌨️ (7:19:48) Image Upload
⌨️ (7:31:24) Logout and Edit profile
⌨️ (7:53:60) Navbar Buttons
⌨️ (8:07:60) Like and Unlike Actions
⌨️ (8:39:11) Delete Button
⌨️ (8:57:45) Add Post Component
⌨️ (9:20:19) Post Dialog
⌨️ (9:47:30) Post Dialog Details
⌨️ (10:01:21) Displaying Comments
⌨️ (10:16:29) Submitting comments
⌨️ (10:37:28) User Page
⌨️ (10:54:30) Notifications
⌨️ (11:31:59) Loading Skeletons
⌨️ (11:59:28) Deployment to Firebase
February 15, 2022 Update: note that we cannot update this video. Here are some updates from @FrankJacquette:
- Firebase no longer offers a free tier. You will have to set up an account and provide a credit card to use Firebase functions.
- The current version of Busboy has broken the API described in the video. I recommend modifying your code to use the current version.
- React-router-dom has API-breaking changes since the video was made. I recommend downgrading to version 5.x.
- The instructor will occasionally introduce a bug in his work and repair it later. If your code isn't working, watch a little longer before assuming it's your issue.
- The Redux code as implemented will cause an infinite page refresh loop under some circumstances. Clearing local storage and reloading the page will bypass this.
- componentWillReceiveProps is deprecated and should be replaced with componentDidUpdate. There are several good pages out there describing how to do this.
- Material UI has gone through a major version release since the video was produced. While everything in the video will continue to work, the documentation you'll find is for the current version of MUI and will be slightly different. Also, Grid has slightly different parameters.
-
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://www.freecodecamp.org/news