🧩 freeCodeCamp (Classsed) - Full Stack React & Firebase Tutorial - Build a social media app (Jun 24, 2019)
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
Description
In 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
- 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 & Organising
- 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
- FCCClasssed-ReactJSReduxFirebaseExpressJS-SocialMediaApp-20190624
- 0 - Introduction
- 703 - 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 & Organising
- 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
- NodeJs
- VSCode
- Bracket Pair Colorizer by CoenraadS
- Prettier - Code Formatter by Esben Petersen
- ES7 React/Redux/GraphQL/React-Native Snippets by dszajder
- Postman
@Firebase Console
Details:
- Project name: fccclassed-socialape-20190624
- Analytics location: Select Region/Country
- Cloud Firestore location: Select Region
Accept then create project
-
Go inside project we just created and look for functions tab at sidebar of the project overview.
-
Click Get Started to show install and deploy setup for functions
// Initiate Project // open new terminal npm i -g firebase-tools firebase login //Project Repo Setup mkdir FCCClasssed-ReactJSReduxFirebaseExpressJS-SocialMediaApp-20190624 cd FCCClasssed-ReactJSReduxFirebaseExpressJS-SocialMediaApp-20190624 //funcruibs setup mkdir socialape-functions cd socialape-functions //Inistiate Project firebase init - Proceed: Yes - Which Firebase CLI features you want to setup for this folder? - - Hit space only on functions then enter Select Project Javascript/Typescript: Javascript ESLint: no Install Dependencies with npm now: Yes //Deploy Functions firebase deploy
-
try out a endpoint after firebase deploy using postman/thunder client from vs code
- Go to database tab from the sidebar
- get started with cloud firestore
- then start in test mode
back to socialape-functions/functions/index.js
STOP → Functions now has charge, drop project :<