React Node MERN Stack from Scratch building Social Network

Master MERN Stack from Scratch while building awesome Social Network. Covers entire Front/Backend Database & Deployment.

4.35 (1010 reviews)
Udemy
platform
English
language
Web Development
category
instructor
9,527
students
46 hours
content
Feb 2024
last update
$74.99
regular price

What you will learn

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

Description

Welcome to Become a FullStack / MERN Stack JavaScript Developer from Scratch with React, NextJs, Node JS, SocketIo and MongoDB. In this updated course you will Learn React with Node JS from Absolute Scratch - Build A Complete MERN Stack Social Network from Scratch and Deploy to the Cloud Hosting.

In this course you will learn:

  • Node JS From Scratch

  • Node JS API Development from Scratch

  • React JS from Scratch

  • Modern JavaScript from Scratch

  • FullStack Social Network Application from Scratch

  • Build Rock Solid Authentication with Password Forgot/Password Reset using JWT

  • Authorization

  • Implement Social Login using JWT

  • CRUD, Image Upload, User Posts Relationships, follow, unfollow, likes, comments and more

  • Super Admin based on Role

  • Custom reCAPTCHA

  • Pagination

  • Real Time Communication

  • SEO

  • Deploy FullStack React Node Social Network to Digital Ocean Cloud Hosting

  • Full Source Code is available for each major section and lectures

  • Direct help from Instructor if you ever get stuck!

  • In depth understanding of Modern JavaScript, React and Node JS

  • Each line of code is explained!

  • Easy to understand (Course starts from absolute basic and gradually makes progress)

  • Follow the best practices while coding

  • Fully understand the code you are writing

  • Best way of structuring Node Js and React application so that it scales in future


This course has so much more, It does not make sense to write them all here. But I can guarantee that this course is your gateway to become a FullStack JavaScript Developer.

Enroll into this course. This is revolutionary :)

You will master your JavaScript skills, Understand Core Node JS programming, Build fast, flexible and scalable API with Node JS.

Not only that, you will also learn React JS from scratch. You will learn to build lightning fast frontend web app that will consume the data from the API you build.

This course is unlike any other course you have seen online. This course first focuses on giving you the deep understanding of the topic before diving into building practical projects.

This course shows you how to master the most in demand technologies of present time in easy, fast and effective way. Grab this opportunity, don't let it go!

* Full support from the instructor himself on each lesson, if you ever get stuck!

* Even though I called this project A Social Network, It is much more than that. The skill you learn from this course can be applied to build various kinds of applications.

So what are you waiting for :) Let me take you on A Wonderful Journey to Learn Node JS and React JS from Scratch and build A MERN Stack Node React Social Network Project along the way!

Content

Understanding Node JS

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

Node JS API Development - First Steps

Creating server with express
Separating routes
Middleware explained
Using controllers
Json and postman
Database Options: mLab vs MongoDB Atlas
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

Node JS API Development - Posts

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

Node JS API Development - Authentication

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

Node JS API Development - Authorization

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

Node JS API Development - Users

Showing all users
Showing single user
Update user
Delete user
Source code

Node JS API Development - Users and Posts

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

Modern JavaScript

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

React JS Basic

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

React JS Web App Development (frontend)

Create react project
Using react router dom
Adding pages
Source code

React JS - Users signup and signin

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

React JS - Users profile

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

Node JS API Development - Users Follow and Unfollow

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

React Frontend - Users Follow Unfollow

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

React Frontend - Posts and Users

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

Like and Unlike

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

Comments

Comments backend
React comment uncomment methods
Adding comments
Render comments
Comment uncomment and validations
Source code

Password forgot and reset

Whats next?
Password forgot and reset - Backend
Forgot password - Frontend
Reset password - frontend
Source code

Login with Social Network (Login with Google)

Social login - Backend
Social Login - Frontend
Source code

Deployment

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

Custom reCAPTCHA

Own reCAPTCHA?
Implement your own reCAPTCHA in React
Source code

Super Admin Backend

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

Super Admin Frontend

Create Admin Component
Admin can update or delete any user
Admin can update and delete anyone's post
Source code

Pagination

Implement pagination - Backend
Implement pagination - Frontend
Tidy Up - Show edit page conditionally
Source code

Download Source Code and checkout different commits

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

BONUS LECTURES

REFERAL LINKS
MERN STACK - React Node Ecommerce from Scrach to Cloud Servers
MERN Stack - React Node Web Development with Ultimate Authentication
MERN Stack - React Node NextJs SEO Multi User Blogging Platform

Screenshots

React Node MERN Stack from Scratch building Social Network - Screenshot_01React Node MERN Stack from Scratch building Social Network - Screenshot_02React Node MERN Stack from Scratch building Social Network - Screenshot_03React Node MERN Stack from Scratch building Social Network - Screenshot_04

Reviews

Ramesh
September 11, 2023
A Guru is needed in software engineering also A) In spirituality they tell, you need a guru to reach god. B) I observed software also needs a guru. C) I am going through this course since 2 months. Still did not finish 1/10th also D) Most of it i know, but still i find it amazing. Every 5 minutes video i am spending 1 hr. E) The reason i found was - My knowledge/experience was scattered - To reach destination, i need a music, i need beauty, then mind enjoys the moment - Then relishes the journey F) In this course i found a guru of React.js /Node.js training https://www.udemy.com/course/node-react/
Wilson
September 5, 2023
Very clear and well organized. Presenter makes occasional mistakes, which is INVALUABLE because he also teaches how to diagnose and recover from mistakes which is worth almost as much as the actual material
Emeka
June 11, 2023
This course is EXCELLENT! This is the most comprehensive MERN course I've experienced so far in Udemy, and I've purchased plenty programs from Udemy
Ken
March 6, 2023
Step by step course. Better to understand some Javascript & React concepts before taking this course. Some code is not working , maybe outdated, but it's good to learn how to debug since you will face TONS of bugs when you develope any kind of apps. Overall recommanded.
Vithursan
April 14, 2022
This is a very good course, but I was expecting react 18 with hooks. The instructor does a good job of explaining material and also the possible errors. He also does a good job of answering questions and resolving issues that students post.
Arun
February 8, 2022
The course is 100 percent hands on. Instructor replies to our queries very quickly. This has to be THE best course on udemy for someone new to node. Looking to complete his all courses.
Kevin
October 27, 2021
Every course I take from Ryan are usually good and this is one of the best ones. Even if you're an experiences programmer, there are still some tricks you can learn from his courses.
Celine
September 24, 2021
I like how he introduces new topics and makes it look very easy. The trainer has a nice voice to listen to (to the point and not to fast). The examples are easy to follow.
John
September 15, 2021
Waste of money because MongoDB has changed alot and the lecture to show you how to connect is still out of date.
Munish
August 7, 2021
till now it has been helpful. But I think at some of points should have been explained(as it was missed). Overall till now it very good, I learned a lot.
Great
August 2, 2021
So far so good... The intro to the basics of node js isn't indepth.. but it does cover the basics.. I am already familiar with node js and react.. and i'm taking this course due to the project that we get to build
Gautam
July 25, 2021
The author has very good knowledge of the subject and the most important part is that I am able to understand from this course. Thank you. It would be much helpful if you can provide sidenotes on using the latest changes in bootstrap as the many of the bootstrap features mentioned here are old and obsolete and I have to struggle to upgrade to bootstrap 5.
Maher
January 30, 2021
Great course, encountered some errors but you can always copy his code as long as you use the same versions of dependencies/node modules
Jeremy
October 9, 2020
Ryan is one of my favorite instructors :) He does a great job makings things easy to understand! I plan to purchase more courses from him in the future! Thank you :)
William
April 3, 2019
I typically don't write reviews until the end of the course but this is one of the best courses I have taken to date. I am about 20% complete and I have already learned a ton. I will definitely be checking to see what other courses this instructor has to offer.

Coupons

DateDiscountStatus
11/7/201950% OFF
expired
12/14/202050% OFF
expired
4/25/202150% OFF
expired
5/25/202250% OFF
expired

Charts

Price

React Node MERN Stack from Scratch building Social Network - Price chart

Rating

React Node MERN Stack from Scratch building Social Network - Ratings chart

Enrollment distribution

React Node MERN Stack from Scratch building Social Network - Distribution chart
2143416
udemy ID
1/11/2019
course created date
3/12/2019
course indexed date
Bot
course submited by