CourseFlix

MERN Stack - React Node from Scratch Building Social Network

20h 49m 20s
English
Paid

Welcome to the ultimate course on becoming a FullStack / MERN Stack JavaScript Developer! This course takes you on a journey from Absolute Scratch to building a complete Social Network application using React, Node JS, and MongoDB. You'll also learn how to deploy the application to the Cloud Hosting.

Course Highlights

Throughout this comprehensive course, you will gain the following skills:

  • Node JS Mastery: Learn the fundamentals of Node JS from scratch and develop robust API solutions.

  • React JS Development: Discover modern practices for building React JS applications from the ground up.

  • Hands-On with JavaScript: Gain an in-depth understanding of modern JavaScript techniques and practices.

  • Complete FullStack Application: Build a Social Network Application incorporating a full stack approach.

  • Advanced Authentication: Implement secure authentication with password recovery using JWT.

  • Dynamic User Operations: Engage with features like CRUD operations, image uploads, and user interactions (follow, unfollow, likes, comments).

  • Social Login Integration: Set up social logins easily using JWT.

  • Role-Based Access Control: Understand and implement Super Admin roles.

  • Custom Features: Incorporate custom reCAPTCHA and pagination in your app.

  • Deployment Skills: Deploy your FullStack React Node Social Network onto Digital Ocean Cloud Hosting.

  • Comprehensive Resources: Access full source code for each major section and lecture.

  • Expert Guidance: Receive direct help from the Instructor whenever you're stuck.

  • Best Coding Practices: Learn to follow the best practices in coding, ensuring future scalability of your applications.

  • Detailed Code Explanation: Each line of code is thoroughly explained for a comprehensive understanding.

  • Progressive Learning: The course is tailored to start from the basics and progress gradually, ensuring ease of learning.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 185 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 185 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What is node js
All Course Lessons (185)
#Lesson TitleDurationAccess
1
What is node js Demo
02:19
2
Why learn node js
02:21
3
Installing node js
02:40
4
Javascript in browser environment
03:16
5
Javascript in node js environment
02:27
6
Getting started with node js
02:55
7
Writing functions
03:44
8
Import export
06:27
9
Using arrow functions
05:38
10
Object destructuring
02:02
11
Using node js core modules
03:30
12
Using npm packages
08:16
13
Using express
05:29
14
Node js event loop
03:07
15
Programming for event loop
04:29
16
Asynchronous programming
08:14
17
Synchronous programming
04:25
18
Functional approach
03:47
19
Secrets of understanding node js
02:38
20
Creating server with express
07:16
21
Separating routes
05:05
22
Middleware explained
06:50
23
Using controllers
07:14
24
Json and postman
04:33
25
Signup with mlab to use mongodb
11:32
26
Connecting to database using mongoose
05:42
27
Post schema
04:53
28
Creating a post
12:59
29
Validation and friendly error messages
14:27
30
Getting posts
06:37
31
Whats next and cleanup
03:04
32
User schema
05:08
33
Virtual fields and methods
12:49
34
User signup using async await
12:16
35
User signin validation and error messaging
09:49
36
User signin flow
09:41
37
User signin with jwt
13:33
38
Testing user signin
03:43
39
Signout method
03:27
40
Protecting routes
06:39
41
Handling unauthorized error
02:59
42
Implementing authorization
05:23
43
Find user by id and add to req object
06:35
44
Has authorization method
03:59
45
Apply require signin to create post
02:01
46
Showing all users
08:49
47
Showing single user
07:49
48
Update user
10:51
49
Delete user
06:22
50
User post relationship with post schema
06:46
51
Create post with image upload and user
11:13
52
Testing create post
09:34
53
Get all posts with user
02:36
54
Get all posts by user
07:31
55
Post update delete flow
02:53
56
Post by id based on route param
03:51
57
Delete post
10:39
58
Update post
05:59
59
Whats next
03:59
60
Documenting api
09:11
61
Adding cors
03:41
62
Modern javascript
01:54
63
Creating variables using const
04:06
64
Creating variables using let
03:48
65
Template strings
05:10
66
Default parameters
03:25
67
Arrow functions
05:58
68
Arrow functions and this keyword
10:11
69
Destructuring object
08:14
70
Destructuring array
02:09
71
Restructuring
04:57
72
Spread and rest operators
07:32
73
Class constructor super
14:23
74
Installing react
05:24
75
React files and folders introduction
06:23
76
Storing data in component state via ajax call
10:59
77
Rendering state data using map
05:48
78
Conditional rendering
04:18
79
Imports exports props
09:36
80
Handling click events
07:40
81
Destructuring inline styling and keys
04:24
82
Create react project
04:45
83
Using react router dom
09:30
84
Adding pages
02:51
85
Signup form
04:25
86
Handling onChange events
08:46
87
User signup
11:02
88
Code refactoring
06:03
89
Showing validation and success message
08:48
90
Code refactoring signup page
03:57
91
Signin page
08:07
92
User signin
10:56
93
Loading...
05:05
94
Menu component
04:20
95
Styling and active link
08:49
96
Signout
13:00
97
Conditional rendering of signup signin links
08:09
98
Show user name
02:48
99
Code refactoring auth logic
05:29
100
Profile page
07:07
101
Showing user info from local storage
05:40
102
Using .env variables
03:51
103
Fetch user profile
13:46
104
Code refactoring fetch user
08:19
105
Show edit profile delete profile buttons
06:45
106
Active link user profile
02:42
107
Whats next?
01:45
108
Users component
02:30
109
Populate users in state
04:22
110
Loop through users
06:08
111
Style user cards
06:18
112
Default profile image
03:39
113
All users profile page
08:37
114
Delete profile component
02:15
115
Users profile based on props change
03:25
116
Delete account prompt
03:58
117
Delete user account
07:35
118
Edit profile component
07:09
119
Pre profile edit profile form
05:30
120
Update user profile
09:51
121
Client side validation on profile update
09:18
122
Private route for authenticated users only
08:58
123
Profile photo upload
11:00
124
Loading... on edit profile
03:53
125
Node API - Update profile with image
13:44
126
File size validation
04:22
127
Node API - Get user photo with separate route
05:45
128
Display profile image in edit profile page
05:18
129
Default image and profile image on all pages
09:21
130
User about field
04:52
131
Update user info in local storage
07:34
132
Whats next?
03:03
133
Following and followers - User schema and userById method
05:54
134
Following and followers - Routes and controller methods
09:46
135
Remove following and remove followers - Routes and controller methods
03:44
136
Follow Profile Buttons Component
04:41
137
Check follow or not
08:08
138
Implement follow
10:55
139
Implement unfollow
04:49
140
Profile tabs component
06:02
141
Display followers list
07:34
142
Display following list
05:22
143
Node API - Who to follow?
06:49
144
Find people component
08:55
145
Find people and follow
10:19
146
Starting with posts
02:58
147
Create new post
18:32
148
Show all posts in home page
08:39
149
Show post's user date and excerpt
12:38
150
Node API - Post image
03:45
151
Show posts with image
04:52
152
Single post component
03:25
153
Load single post in state
06:15
154
Display single post
06:40
155
Show loading on single post and posts
03:04
156
Posts by user
08:15
157
Display posts by user
04:29
158
Show update delete buttons
06:48
159
Delete post
07:24
160
Delete post prompt
01:52
161
Update post component
04:48
162
Implement update post
17:23
163
Update post photo and error messaging
05:36
164
Whats next?
02:13
165
Node API - Implement like unlike
09:45
166
React frontend - Like Unlike methods
03:21
167
Implement like unlike in frontend
15:28
168
Like unlike styling
04:38
169
Like signin redirect
04:46
170
Comments backend
08:56
171
React comment uncomment methods
03:21
172
Adding comments
14:54
173
Render comments
12:04
174
Comment uncomment and validations
13:04
175
Deploy Node JS API - Signup and super user
13:44
176
Running API in Digital Ocean
12:09
177
Using mongoDB in Digital Ocean
07:02
178
Deploy React SPA to Digital Ocean
10:15
179
Own reCAPTCHA?
02:18
180
Super Admin Overview
01:27
181
Implementing role to users
11:44
182
Making a user admin using command line
11:40
183
Admin can update and delete anyone's post
06:44
184
Admin can update and delete any user
12:45
185
How to download source code from Github and checkout different commits
07:30
Unlock unlimited learning

Get instant access to all 184 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

185 lessons · 20h 49m 20s
Show all 185 lessons
  1. 1 What is node js 02:19
  2. 2 Why learn node js 02:21
  3. 3 Installing node js 02:40
  4. 4 Javascript in browser environment 03:16
  5. 5 Javascript in node js environment 02:27
  6. 6 Getting started with node js 02:55
  7. 7 Writing functions 03:44
  8. 8 Import export 06:27
  9. 9 Using arrow functions 05:38
  10. 10 Object destructuring 02:02
  11. 11 Using node js core modules 03:30
  12. 12 Using npm packages 08:16
  13. 13 Using express 05:29
  14. 14 Node js event loop 03:07
  15. 15 Programming for event loop 04:29
  16. 16 Asynchronous programming 08:14
  17. 17 Synchronous programming 04:25
  18. 18 Functional approach 03:47
  19. 19 Secrets of understanding node js 02:38
  20. 20 Creating server with express 07:16
  21. 21 Separating routes 05:05
  22. 22 Middleware explained 06:50
  23. 23 Using controllers 07:14
  24. 24 Json and postman 04:33
  25. 25 Signup with mlab to use mongodb 11:32
  26. 26 Connecting to database using mongoose 05:42
  27. 27 Post schema 04:53
  28. 28 Creating a post 12:59
  29. 29 Validation and friendly error messages 14:27
  30. 30 Getting posts 06:37
  31. 31 Whats next and cleanup 03:04
  32. 32 User schema 05:08
  33. 33 Virtual fields and methods 12:49
  34. 34 User signup using async await 12:16
  35. 35 User signin validation and error messaging 09:49
  36. 36 User signin flow 09:41
  37. 37 User signin with jwt 13:33
  38. 38 Testing user signin 03:43
  39. 39 Signout method 03:27
  40. 40 Protecting routes 06:39
  41. 41 Handling unauthorized error 02:59
  42. 42 Implementing authorization 05:23
  43. 43 Find user by id and add to req object 06:35
  44. 44 Has authorization method 03:59
  45. 45 Apply require signin to create post 02:01
  46. 46 Showing all users 08:49
  47. 47 Showing single user 07:49
  48. 48 Update user 10:51
  49. 49 Delete user 06:22
  50. 50 User post relationship with post schema 06:46
  51. 51 Create post with image upload and user 11:13
  52. 52 Testing create post 09:34
  53. 53 Get all posts with user 02:36
  54. 54 Get all posts by user 07:31
  55. 55 Post update delete flow 02:53
  56. 56 Post by id based on route param 03:51
  57. 57 Delete post 10:39
  58. 58 Update post 05:59
  59. 59 Whats next 03:59
  60. 60 Documenting api 09:11
  61. 61 Adding cors 03:41
  62. 62 Modern javascript 01:54
  63. 63 Creating variables using const 04:06
  64. 64 Creating variables using let 03:48
  65. 65 Template strings 05:10
  66. 66 Default parameters 03:25
  67. 67 Arrow functions 05:58
  68. 68 Arrow functions and this keyword 10:11
  69. 69 Destructuring object 08:14
  70. 70 Destructuring array 02:09
  71. 71 Restructuring 04:57
  72. 72 Spread and rest operators 07:32
  73. 73 Class constructor super 14:23
  74. 74 Installing react 05:24
  75. 75 React files and folders introduction 06:23
  76. 76 Storing data in component state via ajax call 10:59
  77. 77 Rendering state data using map 05:48
  78. 78 Conditional rendering 04:18
  79. 79 Imports exports props 09:36
  80. 80 Handling click events 07:40
  81. 81 Destructuring inline styling and keys 04:24
  82. 82 Create react project 04:45
  83. 83 Using react router dom 09:30
  84. 84 Adding pages 02:51
  85. 85 Signup form 04:25
  86. 86 Handling onChange events 08:46
  87. 87 User signup 11:02
  88. 88 Code refactoring 06:03
  89. 89 Showing validation and success message 08:48
  90. 90 Code refactoring signup page 03:57
  91. 91 Signin page 08:07
  92. 92 User signin 10:56
  93. 93 Loading... 05:05
  94. 94 Menu component 04:20
  95. 95 Styling and active link 08:49
  96. 96 Signout 13:00
  97. 97 Conditional rendering of signup signin links 08:09
  98. 98 Show user name 02:48
  99. 99 Code refactoring auth logic 05:29
  100. 100 Profile page 07:07
  101. 101 Showing user info from local storage 05:40
  102. 102 Using .env variables 03:51
  103. 103 Fetch user profile 13:46
  104. 104 Code refactoring fetch user 08:19
  105. 105 Show edit profile delete profile buttons 06:45
  106. 106 Active link user profile 02:42
  107. 107 Whats next? 01:45
  108. 108 Users component 02:30
  109. 109 Populate users in state 04:22
  110. 110 Loop through users 06:08
  111. 111 Style user cards 06:18
  112. 112 Default profile image 03:39
  113. 113 All users profile page 08:37
  114. 114 Delete profile component 02:15
  115. 115 Users profile based on props change 03:25
  116. 116 Delete account prompt 03:58
  117. 117 Delete user account 07:35
  118. 118 Edit profile component 07:09
  119. 119 Pre profile edit profile form 05:30
  120. 120 Update user profile 09:51
  121. 121 Client side validation on profile update 09:18
  122. 122 Private route for authenticated users only 08:58
  123. 123 Profile photo upload 11:00
  124. 124 Loading... on edit profile 03:53
  125. 125 Node API - Update profile with image 13:44
  126. 126 File size validation 04:22
  127. 127 Node API - Get user photo with separate route 05:45
  128. 128 Display profile image in edit profile page 05:18
  129. 129 Default image and profile image on all pages 09:21
  130. 130 User about field 04:52
  131. 131 Update user info in local storage 07:34
  132. 132 Whats next? 03:03
  133. 133 Following and followers - User schema and userById method 05:54
  134. 134 Following and followers - Routes and controller methods 09:46
  135. 135 Remove following and remove followers - Routes and controller methods 03:44
  136. 136 Follow Profile Buttons Component 04:41
  137. 137 Check follow or not 08:08
  138. 138 Implement follow 10:55
  139. 139 Implement unfollow 04:49
  140. 140 Profile tabs component 06:02
  141. 141 Display followers list 07:34
  142. 142 Display following list 05:22
  143. 143 Node API - Who to follow? 06:49
  144. 144 Find people component 08:55
  145. 145 Find people and follow 10:19
  146. 146 Starting with posts 02:58
  147. 147 Create new post 18:32
  148. 148 Show all posts in home page 08:39
  149. 149 Show post's user date and excerpt 12:38
  150. 150 Node API - Post image 03:45
  151. 151 Show posts with image 04:52
  152. 152 Single post component 03:25
  153. 153 Load single post in state 06:15
  154. 154 Display single post 06:40
  155. 155 Show loading on single post and posts 03:04
  156. 156 Posts by user 08:15
  157. 157 Display posts by user 04:29
  158. 158 Show update delete buttons 06:48
  159. 159 Delete post 07:24
  160. 160 Delete post prompt 01:52
  161. 161 Update post component 04:48
  162. 162 Implement update post 17:23
  163. 163 Update post photo and error messaging 05:36
  164. 164 Whats next? 02:13
  165. 165 Node API - Implement like unlike 09:45
  166. 166 React frontend - Like Unlike methods 03:21
  167. 167 Implement like unlike in frontend 15:28
  168. 168 Like unlike styling 04:38
  169. 169 Like signin redirect 04:46
  170. 170 Comments backend 08:56
  171. 171 React comment uncomment methods 03:21
  172. 172 Adding comments 14:54
  173. 173 Render comments 12:04
  174. 174 Comment uncomment and validations 13:04
  175. 175 Deploy Node JS API - Signup and super user 13:44
  176. 176 Running API in Digital Ocean 12:09
  177. 177 Using mongoDB in Digital Ocean 07:02
  178. 178 Deploy React SPA to Digital Ocean 10:15
  179. 179 Own reCAPTCHA? 02:18
  180. 180 Super Admin Overview 01:27
  181. 181 Implementing role to users 11:44
  182. 182 Making a user admin using command line 11:40
  183. 183 Admin can update and delete anyone's post 06:44
  184. 184 Admin can update and delete any user 12:45
  185. 185 How to download source code from Github and checkout different commits 07:30

Related courses

Frequently asked questions

What is MERN Stack - React Node from Scratch Building Social Network about?
Welcome to the ultimate course on becoming a FullStack / MERN Stack JavaScript Developer! This course takes you on a journey from Absolute Scratch to building a complete Social Network application using React, Node JS, and MongoDB. You'll…
Who teaches MERN Stack - React Node from Scratch Building Social Network?
MERN Stack - React Node from Scratch Building Social Network is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is MERN Stack - React Node from Scratch Building Social Network?
MERN Stack - React Node from Scratch Building Social Network contains 185 lessons with a total runtime of 20 hours 49 minutes. All lessons are available to watch online at your own pace.
Is MERN Stack - React Node from Scratch Building Social Network free to watch?
MERN Stack - React Node from Scratch Building Social Network is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch MERN Stack - React Node from Scratch Building Social Network online?
MERN Stack - React Node from Scratch Building Social Network is available to watch online on CourseFlix at https://courseflix.net/course/mern-stack-react-node-from-scratch-building-social-network. The page hosts every lesson with the integrated video player; no download is required.