React Node Mern Stack Learn From Scratch Building 2 Projects

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

What you'll 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

Requirements

Basic Understanding JavaScript or any other programming language

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 ScratchNode JS API Development from ScratchReact JS from ScratchModern JavaScript from ScratchA FullStack Social Network Application from ScratchBuild Rock Solid Authentication with Password Forgot/Password Reset using JWTAuthorizationImplement Social Login using JWTCRUD, Image Upload, User Posts Relationships, follow, unfollow, likes, comments and moreSuper Admin based on RoleCustom reCAPTCHAPaginationReal Time CommunicationSEODeploy FullStack React Node Social Network to Digital Ocean Cloud HostingFull Source Code is available for each major section and lecturesDirect help from Instructor if you ever get stuck!In depth understanding of Modern JavaScript, React and Node JSEach line of code is explained!Easy to understand (Course starts from absolute basic and gradually makes progress)Follow the best practices while codingFully understand the code you are writingBest way of structuring Node Js and React application so that it scales in futureThis 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!

Overview

Section 1: [NEW] Introduction

Lecture 1 Project demo

Lecture 2 Is this course right for you?

Lecture 3 VS Code editor setup

Lecture 4 Source code

Lecture 5 Are you new to JavaScript Programming Language?

Section 2: [NEW] Modern JavaScript

Lecture 6 JavaScript in HTML

Lecture 7 Window object, DOM and Local storage

Lecture 8 Variables using var, let and const

Lecture 9 Const and Object

Lecture 10 Template Strings

Lecture 11 Function and default arguments

Lecture 12 Arrow function and return keyword

Lecture 13 This keyword

Lecture 14 Object destructuring

Lecture 15 Array destructuring

Lecture 16 Spread operator

Lecture 17 Rest operator

Lecture 18 Function and prototype

Lecture 19 Classes

Lecture 20 Extending class

Section 3: [NEW] Learning NodeJs

Lecture 21 NodeJs

Lecture 22 Code execution in nodejs

Lecture 23 Using NPM

Lecture 24 Require and export

Lecture 25 Core nodejs module

Lecture 26 NodeJs event loop (theory)

Lecture 27 Code execution

Lecture 28 Synchronous vs Non-Asynchronous

Lecture 29 Using ExpressJs

Section 4: [NEW] Learn React

Lecture 30 Create react app

Lecture 31 Creating a form

Lecture 32 HTML to JSX

Lecture 33 React state and event handlers

Lecture 34 Making API request using fetch

Lecture 35 Handling CORS error

Lecture 36 Rendering data

Lecture 37 External API request

Lecture 38 Fetch to Axios

Lecture 39 Reusable components

Section 5: [NEW] Styling in React

Lecture 40 CSS in React

Lecture 41 Styled components

Lecture 42 Using Ant Design

Lecture 43 Loading state

Section 6: [NEW] Server Routes, Middlewares and Controllers

Lecture 44 Middlewares

Lecture 45 Routes and controllers

Section 7: [NEW] MongoDB Setup

Lecture 46 MongoDB connection (theory)

Lecture 47 Signup to Mongo Atlas

Lecture 48 Mongoose Version

Lecture 49 Connect to MongoDB

Lecture 50 Dotenv and Gitignore

Lecture 51 Using import export in nodejs

Section 8: [NEW] Routing and Pages

Lecture 52 Creating pages

Lecture 53 React router version

Lecture 54 React router

Lecture 55 SEO and NextJs

Section 9: [NEW] Starting Social Network Project

Lecture 56 Social network project

Lecture 57 NextJs setup

Lecture 58 Bootstrap CSS

Lecture 59 Navigation

Lecture 60 Public folder

Section 10: [NEW] User Registration, Schemas and Bcrypt

Lecture 61 Register page

Lecture 62 React state and onChange event

Lecture 63 Using axios

Lecture 64 Server setup

Lecture 65 Routes and controllers

Lecture 66 User model

Lecture 67 Bcrypt hash and compare

Lecture 68 Register user

Lecture 69 Toast notifications

Lecture 70 Ant design modal

Lecture 71 Env, validation and form cleanup

Lecture 72 Loading state

Lecture 73 Background image

Lecture 74 Auth form component

Section 11: [NEW] User Login, Context and Authorization

Lecture 75 Login page

Lecture 76 User login and JWT token

Lecture 77 Global state using context (theory)

Lecture 78 Context state

Lecture 79 Local storage

Lecture 80 Logout

Lecture 81 Conditional Nav links

Lecture 82 Active links

Lecture 83 Redirect logged in user

Lecture 84 Using Postman

Lecture 85 Verify current user token

Lecture 86 Wrapper component for Authorization

Section 12: [NEW] Axios Configuration

Lecture 87 Axios interceptors

Lecture 88 Axios config

Section 13: [NEW] Forgot Password

Lecture 89 Forgot password page

Lecture 90 Forgot password form

Lecture 91 Forgot password server

Lecture 92 Forgot password client

Lecture 93 Fix the error (cannot read property data of undefined)

Section 14: [NEW] Creating Posts

Lecture 94 Create post form

Lecture 95 Create post request

Lecture 96 Post model

Lecture 97 Save post

Lecture 98 React Quill rich text editor (WYSIWYG)

Section 15: [NEW] Image Upload

Lecture 99 Image upload client

Lecture 100 Using cloudinary

Lecture 101 Upload to cloudinary

Lecture 102 Create post with image

Section 16: [NEW] Rendering Posts

Lecture 103 User posts (server)

Lecture 104 User posts (client)

Lecture 105 Post list component

Lecture 106 Render posts

Lecture 107 Background image

Lecture 108 Ant design icons

Lecture 109 Edit and delete icons

Lecture 110 Load posts on new post create

Section 17: [NEW] Post Update and Delete

Lecture 111 Single post edit

Lecture 112 Post update client

Lecture 113 Can update and delete middleware

Lecture 114 Delete post and image

Lecture 115 Delete post

Lecture 116 What's next?

Section 18: [NEW] User Profile Update

Lecture 117 Dropdown menu

Lecture 118 Adding username

Lecture 119 Profile update page

Lecture 120 Profile update client

Lecture 121 Profile update server

Lecture 122 Update user in local storage and context

Lecture 123 User profile image

Section 19: [NEW] Users Follow and Unfollow

Lecture 124 Find people to follow (server)

Lecture 125 Find people (client)

Lecture 126 People component

Lecture 127 User avatar

Lecture 128 Generate app logo (optional)

Lecture 129 Handle follow click

Lecture 130 User follow (server)

Lecture 131 User follow (client)

Lecture 132 News feed

Lecture 133 List of following

Lecture 134 Following page

Lecture 135 User unfollow

Section 20: [NEW] Post Like and Unlike

Lecture 136 Like and unlike post (client)

Lecture 137 Like and unlike post (server)

Lecture 138 Helper function and likes count

Section 21: [NEW] Post Comments

Lecture 139 Ant design modal

Lecture 140 Comment form

Lecture 141 Add comment (client)

Lecture 142 Add comment (server)

Lecture 143 Comment count link and fixes

Lecture 144 Render comments

Lecture 145 Post comments page

Lecture 146 Render posts with all comments

Lecture 147 Comment remove

Section 22: [NEW] Pagination

Lecture 148 Pagination

Lecture 149 Pagination client

Section 23: [NEW] Users Search and Public Profile

Lecture 150 Search component

Lecture 151 Search result

Lecture 152 Conditional follow and unfollow

Lecture 153 Follow and unfollow searched user

Lecture 154 User profile page

Lecture 155 Public profile page

Section 24: [NEW] Posts Server Side Rendering and SEO

Lecture 156 Parallax image

Lecture 157 Posts SSR (server side rendering)

Lecture 158 SEO and Head section

Lecture 159 Single post and public post component

Lecture 160 Single post view, SEO and head section

Section 25: [NEW] Socket.io and Realtime Posts

Lecture 161 Socker.io server

Lecture 162 Socker.io client

Lecture 163 Broadcasting event

Lecture 164 Realtime posts (server)

Lecture 165 Realtime posts (client)

Section 26: [NEW] Admin Access

Lecture 166 Admin access server

Lecture 167 Is admin middleware

Lecture 168 Admin route

Section 27: [NEW] Wrap Up

Lecture 169 Wrap up

Lecture 170 Deployment explained

Lecture 171 Socker.io path

Section 28: [NEW] Deployment

Lecture 172 Digital ocean setup

Lecture 173 SSH access

Lecture 174 Push code to Github

Lecture 175 Installing NodeJs, NGINX and Git clone

Lecture 176 Running server, MongoDB and commit changes

Lecture 177 Running React and NextJs client

Section 29: Understanding Node JS

Lecture 178 Project demo

Lecture 179 Are you new to JavaScript Programming Language?

Lecture 180 What is node js

Lecture 181 Why learn node js

Lecture 182 Installing node js

Lecture 183 Javascript in browser environment

Lecture 184 Javascript in node js environment

Lecture 185 Getting started with node js

Lecture 186 Writing functions

Lecture 187 Import export

Lecture 188 Using arrow functions

Lecture 189 Object destructuring

Lecture 190 Using node js core modules

Lecture 191 Using npm packages

Lecture 192 Using express

Lecture 193 Node js event loop

Lecture 194 Programming for event loop

Lecture 195 Asynchronous programming

Lecture 196 Synchronous programming

Lecture 197 Functional approach

Lecture 198 Secrets of understanding node js

Section 30: Node JS API Development - First Steps

Lecture 199 Creating server with express

Lecture 200 Separating routes

Lecture 201 Middleware explained

Lecture 202 Using controllers

Lecture 203 Json and postman

Lecture 204 Database Options: mLab vs MongoDB Atlas

Lecture 205 Mongoose version

Lecture 206 Signup with mlab to use mongodb

Lecture 207 Signup with MongoDB Atlas to use mongodb

Lecture 208 Resources to install MongoDB and Robo3T (optional)

Lecture 209 Connecting to database using mongoose

Lecture 210 Source code

Section 31: Node JS API Development - Posts

Lecture 211 Post schema

Lecture 212 Creating a post

Lecture 213 Using the right version of express-validator for the next lecture

Lecture 214 Validation and friendly error messages

Lecture 215 Getting posts

Lecture 216 Whats next and cleanup

Lecture 217 Source code

Section 32: Node JS API Development - Authentication

Lecture 218 Installing and using UUID

Lecture 219 User schema

Lecture 220 Virtual fields and methods

Lecture 221 User signup using async await

Lecture 222 User signin validation and error messaging

Lecture 223 User signin flow

Lecture 224 User signin with jwt

Lecture 225 Testing user signin

Lecture 226 Signout method

Lecture 227 Source code

Section 33: Node JS API Development - Authorization

Lecture 228 Express JWT Error - Algorithms should be set

Lecture 229 Protecting routes

Lecture 230 Handling unauthorized error

Lecture 231 Implementing authorization

Lecture 232 Find user by id and add to req object

Lecture 233 Has authorization method

Lecture 234 Apply require signin to create post

Lecture 235 Source code

Section 34: Node JS API Development - Users

Lecture 236 Showing all users

Lecture 237 Showing single user

Lecture 238 Update user

Lecture 239 Delete user

Lecture 240 Source code

Section 35: Node JS API Development - Users and Posts

Lecture 241 User post relationship with post schema

Lecture 242 Create post with image upload and user

Lecture 243 Testing create post

Lecture 244 Get all posts with user

Lecture 245 Get all posts by user

Lecture 246 Post update delete flow

Lecture 247 Post by id based on route param

Lecture 248 Delete post

Lecture 249 Update post

Lecture 250 Whats next

Lecture 251 Documenting api

Lecture 252 Adding cors

Lecture 253 Source code

Section 36: Modern JavaScript

Lecture 254 Modern javascript

Lecture 255 Creating variables using const

Lecture 256 Creating variables using let

Lecture 257 Template strings

Lecture 258 Default parameters

Lecture 259 Arrow functions

Lecture 260 Arrow functions and this keyword

Lecture 261 Destructuring object

Lecture 262 Destructuring array

Lecture 263 Restructuring

Lecture 264 Spread and rest operators

Lecture 265 Class constructor super

Lecture 266 Source code

Section 37: React JS Basic

Lecture 267 Installing react

Lecture 268 React files and folders introduction

Lecture 269 Storing data in component state via ajax call

Lecture 270 Rendering state data using map

Lecture 271 Conditional rendering

Lecture 272 Imports exports props

Lecture 273 Handling click events

Lecture 274 Destructuring inline styling and keys

Lecture 275 Source code

Section 38: React JS Web App Development (frontend)

Lecture 276 Create react project

Lecture 277 React router version

Lecture 278 Using react router dom

Lecture 279 Adding pages

Lecture 280 Source code

Section 39: React JS - Users signup and signin

Lecture 281 Signup form

Lecture 282 Handling onChange events

Lecture 283 User signup

Lecture 284 Code refactoring

Lecture 285 Showing validation and success message

Lecture 286 Code refactoring signup page

Lecture 287 Signin page

Lecture 288 User signin

Lecture 289 Loading…

Lecture 290 Menu component

Lecture 291 Styling and active link

Lecture 292 Signout

Lecture 293 Conditional rendering of signup signin links

Lecture 294 Show user name

Lecture 295 Code refactoring auth logic

Lecture 296 Source code

Section 40: React JS - Users profile

Lecture 297 Profile page

Lecture 298 Showing user info from local storage

Lecture 299 Using .env variables

Lecture 300 Fetch user profile

Lecture 301 Code refactoring fetch user

Lecture 302 Show edit profile delete profile buttons

Lecture 303 Active link user profile

Lecture 304 Whats next?

Lecture 305 Users component

Lecture 306 Populate users in state

Lecture 307 Loop through users

Lecture 308 Style user cards

Lecture 309 Default profile image

Lecture 310 All users profile page

Lecture 311 Delete profile component

Lecture 312 Users profile based on props change

Lecture 313 Delete account prompt

Lecture 314 Delete user account

Lecture 315 Edit profile component

Lecture 316 Pre profile edit profile form

Lecture 317 Update user profile

Lecture 318 Client side validation on profile update

Lecture 319 Private route for authenticated users only

Lecture 320 Profile photo upload

Lecture 321 Loading… on edit profile

Lecture 322 Node API - Update profile with image

Lecture 323 File size validation

Lecture 324 Node API - Get user photo with separate route

Lecture 325 Display profile image in edit profile page

Lecture 326 Default image and profile image on all pages

Lecture 327 User about field

Lecture 328 Update user info in local storage

Lecture 329 Source code

Section 41: Node JS API Development - Users Follow and Unfollow

Lecture 330 Whats next?

Lecture 331 Following and followers - User schema and userById method

Lecture 332 Following and followers - Routes and controller methods

Lecture 333 Remove following and remove followers - Routes and controller methods

Lecture 334 Source code

Section 42: React Frontend - Users Follow Unfollow

Lecture 335 Follow Profile Buttons Component

Lecture 336 Check follow or not

Lecture 337 Implement follow

Lecture 338 Implement unfollow

Lecture 339 Profile tabs component

Lecture 340 Display followers list

Lecture 341 Display following list

Lecture 342 Node API - Who to follow?

Lecture 343 Find people component

Lecture 344 Find people and follow

Lecture 345 Source code

Section 43: React Frontend - Posts and Users

Lecture 346 Starting with posts

Lecture 347 Create new post

Lecture 348 Show all posts in home page

Lecture 349 Show post's user date and excerpt

Lecture 350 Node API - Post image

Lecture 351 Show posts with image

Lecture 352 Single post component

Lecture 353 Load single post in state

Lecture 354 Display single post

Lecture 355 Show loading on single post and posts

Lecture 356 Posts by user

Lecture 357 Display posts by user

Lecture 358 Show update delete buttons

Lecture 359 Delete post

Lecture 360 Delete post prompt

Lecture 361 Update post component

Lecture 362 Implement update post

Lecture 363 Update post photo and error messaging

Lecture 364 Source code

Section 44: Like and Unlike

Lecture 365 Whats next?

Lecture 366 Node API - Implement like unlike

Lecture 367 React frontend - Like Unlike methods

Lecture 368 Implement like unlike in frontend

Lecture 369 Like unlike styling

Lecture 370 Like signin redirect

Lecture 371 Source code

Section 45: Comments

Lecture 372 Comments backend

Lecture 373 React comment uncomment methods

Lecture 374 Adding comments

Lecture 375 Render comments

Lecture 376 Comment uncomment and validations

Lecture 377 Source code

Section 46: Password forgot and reset

Lecture 378 Whats next?

Lecture 379 Password forgot and reset - Backend

Lecture 380 Forgot password - Frontend

Lecture 381 Reset password - frontend

Lecture 382 Source code

Section 47: Login with Social Network (Login with Google)

Lecture 383 Social login - Backend

Lecture 384 Social Login - Frontend

Lecture 385 Source code

Section 48: Deployment

Lecture 386 Deploying Node JS API to Digital Ocean

Lecture 387 Deploy Node JS API - Signup and super user

Lecture 388 Running API in Digital Ocean

Lecture 389 Using mongoDB in Digital Ocean

Lecture 390 Deploy React SPA to Digital Ocean

Lecture 391 Source code

Section 49: Custom reCAPTCHA

Lecture 392 Own reCAPTCHA?

Lecture 393 Implement your own reCAPTCHA in React

Lecture 394 Source code

Section 50: Super Admin Backend

Lecture 395 Super Admin Overview

Lecture 396 Implementing role to users

Lecture 397 Making a user admin using command line

Lecture 398 Admin can update and delete anyone's post

Lecture 399 Admin can update and delete any user

Lecture 400 Source code

Section 51: Super Admin Frontend

Lecture 401 Create Admin Component

Lecture 402 Admin can update or delete any user

Lecture 403 Admin can update and delete anyone's post

Lecture 404 Source code

Section 52: Pagination

Lecture 405 Implement pagination - Backend

Lecture 406 Implement pagination - Frontend

Lecture 407 Tidy Up - Show edit page conditionally

Lecture 408 Source code

Section 53: Download Source Code and checkout different commits

Lecture 409 How to download source code from Github and checkout different commits

Lecture 410 Download source code from Github

Lecture 411 OPTIONAL - Method to show only posts by yourself and users you are following

Lecture 412 OPTIONAL - Remove user's posts when user is deleted

Lecture 413 Securing Social Login

Section 54: Bonus

Lecture 414 Other courses you may like

Lecture 415 Join my Discord server

A Web Developer looking to build API with Node JS and MongoDB,A Web Developer looking to build web apps with React JS