MERN STACK 2022 UPDATE React Node from Scratch + 2 Projects

Focused View

Ryan Dhungel

24:29:02

123 View

1 - Introduction

1 - Project Demo.mp4

02:33

2 - Is this bootcamp right for you.mp4

02:09

3 - VSCode editor setup.mp4

02:15

4 - Source code.html

5 - Are you new to JavaScript Programming Language.html

2 - Modern JavaScript

6 - JavaScript in HTML.mp4

06:11

7 - Window object DOM and local storage.mp4

11:10

8 - Variables using var let and const.mp4

09:28

9 - Const and object.mp4

08:48

10 - Template strings.mp4

06:55

11 - Function and default arguments.mp4

06:43

12 - Arrow function and return keyword.mp4

10:48

13 - This keyword.mp4

06:00

14 - Object destructuring.mp4

08:25

15 - Array destructuring.mp4

02:22

16 - Spread operator.mp4

03:52

17 - Rest operator.mp4

06:17

18 - Function and prototype.mp4

06:30

19 - Classes.mp4

04:46

20 - Extending class.mp4

08:19

3 - Learning Node

21 - Nodejs.mp4

04:43

22 - Code execution in nodejs.mp4

05:59

23 - Using NPM.mp4

05:44

24 - require and export.mp4

09:57

25 - Core nodejs module.mp4

05:54

26 - Nodejs event loop in theory.mp4

05:50

27 - Code execution.mp4

11:40

28 - Synchronous vs nonasynchronous.mp4

04:55

29 - Using express.mp4

11:53

4 - Learning React

30 - Create react app.mp4

08:25

31 - Creating a form.mp4

10:08

32 - HTML to JSX.mp4

04:24

33 - React state and event handlers.mp4

13:04

34 - Making API request using fetch.mp4

10:09

35 - Handling CORS error.mp4

09:02

36 - Rendering data.mp4

13:37

37 - External API request.mp4

07:57

38 - Fetch to axios.mp4

07:43

39 - Reusable components.mp4

12:21

5 - Styling in React

40 - CSS in react.mp4

08:25

41 - Styled components.mp4

04:32

42 - Using ant design.mp4

06:24

43 - Loading state.mp4

06:40

6 - Routes Middlewares and Controllers

44 - Middlewares.mp4

05:09

45 - Routes and controllers.mp4

08:47

7 - MongoDB Setup

46 - MongoDB connection theory.mp4

03:12

47 - Signup to mongo atlas.mp4

07:05

48 - Mongoose version.html

49 - Connect to mongodb.mp4

05:46

50 - Dotenv and gitignore.mp4

07:09

51 - Using import export in nodejs.mp4

03:39

8 - Routing and Pages

52 - Creating pages.mp4

07:43

53 - React router version.html

54 - React router.mp4

09:12

55 - SEO and nextjs.mp4

07:20

9 - Starting Social Network Project

56 - Social network project.mp4

04:37

57 - Nextjs setup.mp4

08:28

58 - Bootstrap CSS.mp4

03:54

59 - Navigation.mp4

09:22

60 - Public folder.mp4

06:29

10 - User Registration Schemas and Bcrypt

61 - Register page.mp4

11:19

62 - React state and onchange event.mp4

06:20

63 - Using axios.mp4

03:50

64 - Server setup.mp4

15:06

65 - Routes and controllers.mp4

11:15

66 - User model.mp4

10:15

67 - Bcrypt hash and compare.mp4

06:19

68 - Register user.mp4

15:14

69 - Toast notifications.mp4

11:08

70 - Ant design modal.mp4

06:08

71 - Env validation and form cleanup.mp4

07:17

72 - Loading state.mp4

06:00

73 - Background image.mp4

03:12

74 - Authform component.mp4

09:25

11 - User Login Context and Authorization

75 - Login page.mp4

10:47

76 - User login and JWT token.mp4

14:28

77 - Global state using context theory.mp4

02:41

78 - Context state.mp4

08:26

79 - Local storage.mp4

08:48

80 - Logout.mp4

05:01

81 - Conditional nav links.mp4

04:22

82 - Active links.mp4

11:06

83 - Redirect logged in user.mp4

04:09

84 - Using postman.mp4

10:08

85 - Verify current user token.mp4

09:21

86 - Wrapper component for authorization.mp4

16:35

12 - Axios Configuration

87 - Axios interceptors.mp4

09:35

88 - Axios config.mp4

05:39

13 - Forgot Password

89 - Forgot password page.mp4

08:09

90 - Forgot password form.mp4

06:30

91 - Forgot password server.mp4

10:54

92 - Forgot password client.html

93 - Fix the error cannot read property data of undefined.mp4

09:46

14 - Creating Post

94 - Create post form.mp4

08:00

95 - Create post request.mp4

09:38

96 - Post model.mp4

07:26

97 - Save post.mp4

12:52

98 - React quill rich text editor WYSIWYG.mp4

09:38

15 - Image Upload

99 - Image upload client.mp4

13:45

100 - Using cloudinary.mp4

10:33

101 - Upload to cloudinary.mp4

07:13

102 - Create post with image.mp4

14:23

16 - Rendering posts

103 - User posts server.mp4

07:02

104 - User posts.mp4

06:58

105 - Post list component.mp4

07:34

106 - Render posts.mp4

11:56

107 - Background image.mp4

04:54

108 - Ant design icons.mp4

06:45

109 - Edit and delete icons.mp4

10:52

110 - Load posts on new post create.mp4

03:35

17 - Post Update and Delete

111 - Single post edit.mp4

13:41

112 - Post update client.mp4

12:06

113 - Can update delete middleware.mp4

15:43

114 - Delete post and image.mp4

04:58

115 - Delete post.mp4

05:55

116 - Whats next.mp4

03:03

18 - User Profile Update

117 - Dropdown menu.mp4

09:43

118 - Adding username.mp4

07:52

119 - Profile update page.mp4

13:36

120 - Profile update client.mp4

10:48

121 - Profile update server.mp4

17:43

122 - Update user in local storage and context.mp4

09:02

123 - User profile image.mp4

11:17

19 - Users follow and unfollow

124 - Find people to follow server.mp4

06:28

125 - Find people client.mp4

08:02

126 - People component.mp4

10:00

127 - User avatar.mp4

07:25

128 - Generate app logo optional.mp4

04:09

129 - Handle follow click.mp4

06:51

130 - User follow server.mp4

16:07

131 - User follow client.mp4

07:16

132 - News feed.mp4

12:01

133 - List of following.mp4

08:16

134 - Following page.mp4

10:35

135 - User unfollow.mp4

10:24

20 - Post Like and Unlike

136 - Like and unlike client.mp4

06:54

137 - Like and unlike server.mp4

09:37

138 - Helper function and likes count.mp4

06:35

21 - Post Comments

139 - Ant design modal.mp4

10:10

140 - Comment form.mp4

06:09

141 - Add comment client.mp4

04:54

142 - Add comment server.mp4

09:36

143 - Comment count link and fixes.mp4

05:55

144 - Render comments.mp4

09:10

145 - Post comments page.mp4

07:47

146 - Render posts with all comments.mp4

13:33

147 - Comment remove.mp4

11:48

22 - Pagination

148 - Pagination.mp4

05:36

149 - Pagination client.mp4

15:44

23 - Users Search and Public Profile

150 - Search component.mp4

13:10

151 - Search result.mp4

10:49

152 - Conditional follow and unfollow.mp4

08:29

153 - Follow and unfollow searched user.mp4

05:02

154 - User profile apge.mp4

09:48

155 - Public profile page.mp4

10:16

24 - Posts Server Side Rendering and SEO

156 - Parallax image.mp4

12:05

157 - Posts server side rendering SSR.mp4

11:27

158 - SEO and head section.mp4

12:52

159 - Single post and public post component.mp4

10:37

160 - Single post view SEO and head section.mp4

12:24

25 - Socketio and Realtime Posts

161 - Socketio server.mp4

10:28

162 - Socketio client.mp4

06:46

163 - Broadcasting event.mp4

11:11

164 - Realtime posts server.mp4

11:01

165 - Realtime posts Client.mp4

09:18

26 - Admin Access

166 - Admin access server.mp4

12:39

167 - Is admin middleware.mp4

09:45

168 - Admin route.mp4

09:52

27 - Wrap Up

169 - Wrap up.mp4

05:24

170 - Deployment explained.mp4

03:30

171 - Socketio path.mp4

08:15

28 - Deployment

172 - Digital ocean setup.mp4

05:45

173 - SSH access.mp4

08:55

174 - Push code to github.mp4

05:36

175 - Installing nodejs NGINX and git clone.mp4

13:17

176 - Running server mongodb and commit changes.mp4

15:48

177 - Running react and nextjs client.mp4

04:58

29 - Bonus

178 - Other courses you may like.html

Description

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

Who is this for?

A Web Developer looking to build API with Node JS and MongoDB

A Web Developer looking to build web apps with React JS

What You Need to Know?

Basic Understanding JavaScript or any other programming language

More details

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
AÂ 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!
Who this course is for:
A Web Developer looking to build API with Node JS and MongoDB
A Web Developer looking to build web apps with React JS

User Reviews

Rating

average 0

Total votes0

Focused display

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.