Javascript React Nextjs Nodejs Mongodb Socketio Full Stack

Learn JavaScript React NextJS NodeJS MongoDB SocketIO FullStack Web Development from Beginner to Advance Level.

What you'll learn
Understand MERN (MongoDB Express React Node) Stack
Become a Professional Full Stack / MERN Stack Web Developer
Understand Core JavaScript React and Node
Understand Modern JavaScript 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
Learn Socket io to add realtime features
How Node JS Event Loop works
Synchronous vs Asynchronous programming
Using Core Node JS Modules
Using your own Modules
Using NPM Modules
Learn Mongo DB
Learn to implement CRUD (create, read, update, delete) on users/posts
Implement Authentication using JWT
Password Forgot Workflow
Admin Role and Access
User Profile
Image Upload
User Follow Unfollow
Post Like Unlike
Comments
Deploy MERN Stack App to Digital Ocean Cloud Server
Pagination
Search
Realtime
Requirements
Basic Understanding JavaScript or any other programming language
Description
Student's response on this course:I don't have any other thing to say than to thank God I found this course. If I am to recommend a course to get anyone started from basics to advanced and being able to build industry standard courses, this course is and will always be my number 1 choice. Best course, nothing beats it for me ?. I love the tutor and his approach to teaching, he takes it step by step and explains every little detail. You can never go wrong with this course. I have become a professional in the MERN stack thanks to this course. I can confidently take up any idea whether it's a startup or client's project and turn it into real world web apps thanks to this course. - Solomon AkinbiyGreat explanation, keeping everything short and understandable. Much better than those 40+ hours tutorials, trying to explain one concept for an hour and overcomplicating it.I like how he makes mistakes, I believe purposefully, to later show how to debug that error.Recommending to buy this course if you would like to grasp the core knowledge of MERN stack. - Nikoloz MIntroductionDo you want to learn Modern JavaScript, ReactJs, NextJS, NodeJS, MongoDB and SocketIO FullStack Web Development all in one course? This course has everything you want to know to start building your next full stack project with confidence.Learn Modern JavaScriptYou will never fully understand React and NodeJs if your modern JavaScript knowledge is not up to date. With short, easy and to the point lectures, my introduction of Modern JavaScript will enable to write React code with full understanding and confidence.Learn ReactJSOnce you understand Modern JavaScript, learning React is much easier. You don't need to take 40+ hour long React course and spend years to build fast and responsive react apps. I will get you up and running in very short time.Learn NextJSNextJs is a production ready framework for react. JavaScript and React apps are super fast but not SEO (Search Engine Optimization) friendly. That's where NextJs comes in. With NextJS, A production ready react app with SEO is absolutely possible.Learn NodeJSWhy learn another backend language like PHP, Python and their frameworks etc just to build your Server/API when you can do all that with few lines of code using the language you love and know very well, JavaScript. I will help you learn NodeJs so that you can build extremely powerful backend for your sleek react apps.Learn MongoDBEver since I learned MongoDB, I have fallen in love with it. Connecting your backend with MongoDB and making database queries is extremely fast and easy. It's a dream come true. I will help you learn and master the art of working with MongoDB, so that you can perform complex tasks nice and easy.Learn SocketIOBuilding Full stack apps are great but making them Real time is even better. Almost all the web apps you see in the web could use some kind of real time features to take user experience to a whole new level right? I will show you how easy it is to add realtime capabilities using SocketIO in your React and NodeJS apps.Learn Full Stack (MERN Stack) Web DevelopmentWhen I was new to Web Development, my dream was to be able to build an application of my dream. I wish I could have a plan in my mind and be able to code that plan to reality by building full stack app from back to front. Well, that's how you learn in this course. A step by step process of thinking, planning and building a Full Stack / MERN Stack (MongoDB ExpressJS React Node) app from scratch.ConclusionThere are many courses in Udemy. Many of them are great. Some are life changing and eye opening. This course is one of them. Experience it yourself by enrolling into this course and fell the awesomeness of being able to build full stack JavaScript apps using React Node and their ecosystem. I can help you reach your goal.Your InstructorRyan

Overview

Section 1: Introduction

Lecture 1 Project Demo

Lecture 2 Is this bootcamp right for you?

Lecture 3 VSCode editor setup

Lecture 4 Source code

Lecture 5 Are you new to JavaScript Programming Language?

Section 2: 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: Learning Node

Lecture 21 Node.js

Lecture 22 Code execution in node.js

Lecture 23 Using NPM

Lecture 24 require and export

Lecture 25 Core node.js module

Lecture 26 Node.js event loop in theory

Lecture 27 Code execution

Lecture 28 Synchronous vs non-asynchronous

Lecture 29 Using express

Section 4: Learning 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: Styling in React

Lecture 40 CSS in react

Lecture 41 Styled components

Lecture 42 Using ant design

Lecture 43 Loading state

Section 6: Routes, Middlewares and Controllers

Lecture 44 Middlewares

Lecture 45 Routes and controllers

Section 7: 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 node.js

Section 8: Routing and Pages

Lecture 52 Creating pages

Lecture 53 React router version

Lecture 54 React router

Lecture 55 SEO and next.js

Section 9: Starting Social Network Project

Lecture 56 Social network project

Lecture 57 Next.js setup

Lecture 58 Bootstrap CSS

Lecture 59 Navigation

Lecture 60 Public folder

Section 10: 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 Authform component

Section 11: 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: Axios Configuration

Lecture 87 Axios interceptors

Lecture 88 Axios config

Section 13: 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: Creating Post

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: Image Upload

Lecture 99 Image upload client

Lecture 100 Using cloudinary

Lecture 101 Upload to cloudinary

Lecture 102 Create post with image

Section 16: Rendering posts

Lecture 103 User posts server

Lecture 104 User posts

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: Post Update and Delete

Lecture 111 Single post edit

Lecture 112 Post update client

Lecture 113 Can update delete middleware

Lecture 114 Delete post and image

Lecture 115 Delete post

Lecture 116 What's next?

Section 18: 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: 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: Post Like and Unlike

Lecture 136 Like and unlike client

Lecture 137 Like and unlike server

Lecture 138 Helper function and likes count

Section 21: 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: Pagination

Lecture 148 Pagination

Lecture 149 Pagination client

Section 23: 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 apge

Lecture 155 Public profile page

Section 24: Posts Server Side Rendering and SEO

Lecture 156 Parallax image

Lecture 157 Posts server side rendering (SSR)

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: Socket.io and Realtime Posts

Lecture 161 Socket.io server

Lecture 162 Socket.io client

Lecture 163 Broadcasting event

Lecture 164 Realtime posts server

Lecture 165 Realtime posts Client

Section 26: Admin Access

Lecture 166 Admin access server

Lecture 167 Is admin middleware

Lecture 168 Admin route

Section 27: Wrap Up

Lecture 169 Wrap up

Lecture 170 Deployment explained

Lecture 171 Socket.io path

Section 28: Deployment

Lecture 172 Digital ocean setup

Lecture 173 SSH access

Lecture 174 Push code to github

Lecture 175 Installing node.js, NGINX and git clone

Lecture 176 Running server, mongodb and commit changes

Lecture 177 Running react and next.js client

Section 29: Bonus

Lecture 178 Other courses you may like

A Full Stack / MERN Stack Web Developer Bootcamp to anyone with basic understanding of programming