CF

MERN Stack - React Node from Scratch Building Social Network

20h 49m 20s
English
Paid

MERN Stack - React Node from Scratch Building Social Network is a 185-lesson 20 hours 49 minutes self-paced course by Udemy. Welcome to the ultimate course on becoming a FullStack / MERN Stack JavaScript Developer!

Course facts

Lessons
185
Duration
20 hours 49 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches MERN Stack - React Node from Scratch Building Social Network? 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.

What lessons are included in MERN Stack - React Node from Scratch Building Social Network?

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

What courses are similar to MERN Stack - React Node from Scratch Building Social Network?

Frequently asked questions

What prerequisites are required for enrolling in this course?
The course is designed for learners starting from scratch, so no prior experience with Node JS or React JS is required. However, a basic understanding of JavaScript will be beneficial as the course includes in-depth exploration of JavaScript techniques and practices.
What will I build by the end of the course?
By the end of the course, you will have built a complete Social Network application. This includes features like CRUD operations, image uploads, user interactions (follow, unfollow, likes, comments), secure authentication with JWT, and social login integration. The application will also be deployed on Digital Ocean Cloud Hosting.
Who is the target audience for this course?
This course is targeted at aspiring FullStack JavaScript developers who wish to master the MERN Stack. It is suitable for those who want to build robust web applications using React, Node JS, and MongoDB from the ground up.
How does this course compare in depth and scope to similar courses?
The course offers a comprehensive approach to learning the MERN Stack, covering everything from setting up a Node JS environment to deploying a full-stack application. It includes 185 lessons, detailed coverage of Node JS, React JS, MongoDB, advanced authentication, and deployment skills, distinguishing it from more basic or narrowly focused courses.
Which specific tools and platforms are covered in this course?
The course covers tools like Node JS, React JS, MongoDB, and Express for building applications. It also includes the use of npm packages, JSON, Postman for API testing, and Digital Ocean for cloud deployment. Advanced features include JWT for authentication and reCAPTCHA for security.
What topics are not covered in this course?
The course does not cover topics outside the MERN Stack, such as other JavaScript frameworks like Angular or Vue.js, or databases other than MongoDB. It also does not include mobile app development or server-side languages other than JavaScript.
What is the expected time commitment to complete the course?
The course consists of 185 lessons and is structured to accommodate self-paced learning. While the total runtime is not specified, students should anticipate dedicating several hours per week over a few months to complete the course, depending on their previous experience and learning pace.