+- Forum Rockoldies (https://rockoldies.net/forum)
+-- Forum: Fotobearbeitung - Photoshop (https://rockoldies.net/forum/forumdisplay.php?fid=16)
+--- Forum: E-Learning, Tutorials (https://rockoldies.net/forum/forumdisplay.php?fid=18)
+--- Thema: React Node Mern Stack Learn From Scratch Building 2 Projects (/showthread.php?tid=80579)
React Node Mern Stack Learn From Scratch Building 2 Projects - Panter - 12.02.2024
![[Bild: cee411071ff3b743860566245ad62b13.jpg]](https://i123.fastpic.org/big/2024/0207/13/cee411071ff3b743860566245ad62b13.jpg)
React Node Mern Stack Learn From Scratch Building 2 Projects
Last updated 11/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 21.23 GB | Duration: 46h 4m
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
![[Bild: 444161812_react_node_mern_stack_learn_fr...ojects.jpg]](https://img92.pixhost.to/images/678/444161812_react_node_mern_stack_learn_from_scratch_building_2_projects.jpg)