IIRF Online > Development > Web Development > Node.Js > React Node MERN Stack from Scratch building Social Network
React Node MERN Stack from Scratch building Social Network by Udemy
Master MERN Stack from Scratch while building awesome Social Network. Covers entire Front/Backend Database & Deployment.
Course Highlights
- Understand Modern JavaScript
- Understand Node Js from Scratch
- Understand React Js from Scratch
- Learn Node JS API Development from Scratch
- Learn Frontend Web Development with React
- Understand JavaScript in the Browser Environment
- Understand JavaScript in the Node JS Environment
- How Node JS Event Loop works
- Synchronous vs Asynchronous programming
- Blocking vs Non-Blocking code
- Using Core Node JS Modules
- Using your own Modules
- Using NPM Modules
- MVC Design Pattern
- Learn Mongo DB
- Learn to implement CRUD (create, read, update, delete) on users/posts
- Learn to use Postman
- Implement Authentication using JWT
- Implement Social Login
- Password Forgot/Reset Functionality
- User Post Relationship
- Authorization and Permissions
- Admin Role/Dashboard
- User Profile
- Image Upload
- User Follow/Unfollow
- Post Like/Unlike
- Comments
- Deploy Node JS API to Digital Ocean Cloud Server
- Deploy React JS Web App to Digital Ocean Cloud Server
- Custom ReCaptcha
- Pagination
- Build A Complete Social Network Application
- Real Time with SocketIo
- SEO (Server Side Rendering) with NextJs
Skills you will learn!
Curriculum
5 Topics
Project demo
Is this course right for you?
VS Code editor setup
Source code
Are you new to JavaScript Programming Language?
15 Topics
JavaScript in HTML
Window object DOM and Local storage
Variables using var let and const
Const and Object
Template Strings
Function and default arguments
Arrow function and return keyword
This keyword
Object destructuring
Array destructuring
Spread operator
Rest operator
Function and prototype
Classes
Extending class
9 Topics
NodeJs
Code execution in nodejs
Using NPM
Require and export
Core nodejs module
NodeJs event loop (theory)
Code execution
Synchronous vs Non-Asynchronous
Using ExpressJs
10 Topics
Create react app
Creating a form
HTML to JSX
React state and event handlers
Making API request using fetch
Handling CORS error
Rendering data
External API request
Fetch to Axios
Reusable components
4 Topics
CSS in React
Styled components
Using Ant Design
Loading state
2 Topics
Middlewares
Routes and controllers
6 Topics
MongoDB connection (theory)
Signup to Mongo Atlas
Mongoose Version
Connect to MongoDB
Dotenv and Gitignore
Using import export in nodejs
4 Topics
Creating pages
React router version
React router
SEO and NextJs
5 Topics
Social network project
NextJs setup
Bootstrap CSS
Navigation
Public folder
14 Topics
Register page
React state and onChange event
Using axios
Server setup
Routes and controllers
User model
Bcrypt hash and compare
Register user
Toast notifications
Ant design modal
Env validation and form cleanup
Loading state
Background image
Auth form component
12 Topics
Login page
User login and JWT token
Global state using context (theory)
Context state
Local storage
Logout
Conditional Nav links
Active links
Redirect logged in user
Using Postman
Verify current user token
Wrapper component for Authorization
2 Topics
Axios interceptors
Axios config
5 Topics
Forgot password page
Forgot password form
Forgot password server
Forgot password client
Fix the error (cannot read property data of undefined)
5 Topics
Create post form
Create post request
Post model
Save post
React Quill rich text editor (WYSIWYG)
4 Topics
Image upload client
Using cloudinary
Upload to cloudinary
Create post with image
8 Topics
User posts (server)
User posts (client)
Post list component
Render posts
Background image
Ant design icons
Edit and delete icons
Load posts on new post create
6 Topics
Single post edit
Post update client
Can update and delete middleware
Delete post and image
Delete post
What's next?
7 Topics
Dropdown menu
Adding username
Profile update page
Profile update client
Profile update server
Update user in local storage and context
User profile image
12 Topics
Find people to follow (server)
Find people (client)
People component
User avatar
Generate app logo (optional)
Handle follow click
User follow (server)
User follow (client)
News feed
List of following
Following page
User unfollow
3 Topics
Like and unlike post (client)
Like and unlike post (server)
Helper function and likes count
9 Topics
Ant design modal
Comment form
Add comment (client)
Add comment (server)
Comment count link and fixes
Render comments
Post comments page
Render posts with all comments
Comment remove
2 Topics
Pagination
Pagination client
6 Topics
Search component
Search result
Conditional follow and unfollow
Follow and unfollow searched user
User profile page
Public profile page
5 Topics
Parallax image
Posts SSR (server side rendering)
SEO and Head section
Single post and public post component
Single post view SEO and head section
5 Topics
Socker.io server
Socker.io client
Broadcasting event
Realtime posts (server)
Realtime posts (client)
3 Topics
Admin access server
Is admin middleware
Admin route
3 Topics
Wrap up
Deployment explained
Socker.io path
6 Topics
Digital ocean setup
SSH access
Push code to Github
Installing NodeJs NGINX and Git clone
Running server MongoDB and commit changes
Running React and NextJs client
21 Topics
Project demo
Are you new to JavaScript Programming Language?
What is node js
Why learn node js
Installing node js
Javascript in browser environment
Javascript in node js environment
Getting started with node js
Writing functions
Import export
Using arrow functions
Object destructuring
Using node js core modules
Using npm packages
Using express
Node js event loop
Programming for event loop
Asynchronous programming
Synchronous programming
Functional approach
Secrets of understanding node js
12 Topics
Creating server with express
Separating routes
Middleware explained
Using controllers
Json and postman
Database Options: mLab vs MongoDB Atlas
Mongoose version
Signup with mlab to use mongodb
Signup with MongoDB Atlas to use mongodb
Resources to install MongoDB and Robo3T (optional)
Connecting to database using mongoose
Source code
7 Topics
Post schema
Creating a post
Using the right version of express-validator for the next lecture
Validation and friendly error messages
Getting posts
Whats next and cleanup
Source code
10 Topics
Installing and using UUID
User schema
Virtual fields and methods
User signup using async await
User signin validation and error messaging
User signin flow
User signin with jwt
Testing user signin
Signout method
Source code
8 Topics
Express JWT Error - Algorithms should be set
Protecting routes
Handling unauthorized error
Implementing authorization
Find user by id and add to req object
Has authorization method
Apply require signin to create post
Source code
5 Topics
Showing all users
Showing single user
Update user
Delete user
Source code
13 Topics
User post relationship with post schema
Create post with image upload and user
Testing create post
Get all posts with user
Get all posts by user
Post update delete flow
Post by id based on route param
Delete post
Update post
Whats next
Documenting api
Adding cors
Source code
13 Topics
Modern javascript
Creating variables using const
Creating variables using let
Template strings
Default parameters
Arrow functions
Arrow functions and this keyword
Destructuring object
Destructuring array
Restructuring
Spread and rest operators
Class constructor super
Source code
9 Topics
Installing react
React files and folders introduction
Storing data in component state via ajax call
Rendering state data using map
Conditional rendering
Imports exports props
Handling click events
Destructuring inline styling and keys
Source code
5 Topics
Create react project
React router version
Using react router dom
Adding pages
Source code
16 Topics
Signup form
Handling onChange events
User signup
Code refactoring
Showing validation and success message
Code refactoring signup page
Signin page
User signin
Loading...
Menu component
Styling and active link
Signout
Conditional rendering of signup signin links
Show user name
Code refactoring auth logic
Source code
33 Topics
Profile page
Showing user info from local storage
Using .env variables
Fetch user profile
Code refactoring fetch user
Show edit profile delete profile buttons
Active link user profile
Whats next?
Users component
Populate users in state
Loop through users
Style user cards
Default profile image
All users profile page
Delete profile component
Users profile based on props change
Delete account prompt
Delete user account
Edit profile component
Pre profile edit profile form
Update user profile
Client side validation on profile update
Private route for authenticated users only
Profile photo upload
Loading... on edit profile
Node API - Update profile with image
File size validation
Node API - Get user photo with separate route
Display profile image in edit profile page
Default image and profile image on all pages
User about field
Update user info in local storage
Source code
5 Topics
Whats next?
Following and followers - User schema and userById method
Following and followers - Routes and controller methods
Remove following and remove followers - Routes and controller methods
Source code
11 Topics
Follow Profile Buttons Component
Check follow or not
Implement follow
Implement unfollow
Profile tabs component
Display followers list
Display following list
Node API - Who to follow?
Find people component
Find people and follow
Source code
19 Topics
Starting with posts
Create new post
Show all posts in home page
Show post's user date and excerpt
Node API - Post image
Show posts with image
Single post component
Load single post in state
Display single post
Show loading on single post and posts
Posts by user
Display posts by user
Show update delete buttons
Delete post
Delete post prompt
Update post component
Implement update post
Update post photo and error messaging
Source code
7 Topics
Whats next?
Node API - Implement like unlike
React frontend - Like Unlike methods
Implement like unlike in frontend
Like unlike styling
Like signin redirect
Source code
6 Topics
Comments backend
React comment uncomment methods
Adding comments
Render comments
Comment uncomment and validations
Source code
5 Topics
Whats next?
Password forgot and reset - Backend
Forgot password - Frontend
Reset password - frontend
Source code
3 Topics
Social login - Backend
Social Login - Frontend
Source code
6 Topics
Deploying Node JS API to Digital Ocean
Deploy Node JS API - Signup and super user
Running API in Digital Ocean
Using mongoDB in Digital Ocean
Deploy React SPA to Digital Ocean
Source code
3 Topics
Own reCAPTCHA?
Implement your own reCAPTCHA in React
Source code
6 Topics
Super Admin Overview
Implementing role to users
Making a user admin using command line
Admin can update and delete anyone's post
Admin can update and delete any user
Source code
4 Topics
Create Admin Component
Admin can update or delete any user
Admin can update and delete anyone's post
Source code
4 Topics
Implement pagination - Backend
Implement pagination - Frontend
Tidy Up - Show edit page conditionally
Source code
5 Topics
How to download source code from Github and checkout different commits
Download source code from Github
OPTIONAL - Method to show only posts by yourself and users you are following
OPTIONAL - Remove user's posts when user is deleted
Securing Social Login
1 Topic
Other courses you may like
React Node MERN Stack from Scratch building Social Network
Related Node.Js Courses
Thank You!
Your review has been submitted successfully.