CF

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

13h 2m 12s
English
Paid

If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course is for you. I can guarantee you that with this app on your resume, you will definitely land a great job. This course is NOT FOR ABSOLUTE BEGINNERS. You should have done at least 1 MERN project previously. This course is for someone who wants to get out of his/her comfort zone and build a project which will teach you valuable skills.

This course includes…

  • This is one of the most complex apps you are going to build. 13 hours of video content for a single app, which will look great on your resume.

  • React and NextJs(For Server Side Rendered Pages) for our Frontend and Express with Node on the backend. We are going to use  Socket io for Realtime connection between multiple clients for messaging.

  • Creating complex & interlinked MongoDB Models for storing the info of users, messages they send and receive, their notifications, following and followers of a user,. We are going to store everything in our database.

  • We are going to show the online users in our app to the logged user just like in any big social network .

  • Real time chat with multiple users. So no need to refresh the page to check if there is a new message. Everything is going to happen in real time. Also, we are going to play a notification sound when there is a new message.

  • We are only going to show the posts of the users you are following. So, exactly the same way it happens in big social networks.

  • We are going to have Realtime Notifications. Whenever someone likes your post or comments on your post or starts following you, a new notification will appear.

  • Crop Images before uploading to cloudinary.

  • Infinite Scroll to bring the new posts from the backend automatically on when the user is near the bottom of the page.

  • Semantic-UI as CSS framework.

  • Creating a fully responsive layout on the Frontend, only with JavaScript and No CSS media queries. Also, it is going to be optimized for Server Side Rendering (SSR).

  • Upload Profile Pictures. Also create posts with pictures. We are going to store all the images in CLOUDINARY.

  • Also, we are going to create a root user. That user can delete any post or delete any comment inside the app.

  • We are going to display all the info about your Followers and Following. Make sure to check the intro video. I have talked about this in detail there.

  • Also, we are going to give the user the option to update profile picture or profile info. We are going to have a settings tab, where you can update your password and message popup settings.

  • I am going to teach you how to populate fields inside MongoDB, I am also going to show you how to interlink the models to each other so that we do not have to store fixed values in every model.

  • Also, we are going to add the functionality to reset the password. We are going to use NodeMailer & Sendgrid to send the email with the link to the user to reset the password.

  • At the end we are going to deploy it to HEROKU.

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 89 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: New update: realTime Notifications
All Course Lessons (89)
#Lesson TitleDurationAccess
1
New update: realTime Notifications Demo
00:47
2
Crop Images Before Upload: New Update
01:39
3
Requirements for taking this Course
00:47
4
Introduction to Nextjs
02:32
5
Connecting to MongoDB
01:35
6
Creating Express Server
05:07
7
App.js, Layout and Navbar
10:06
8
Layout for Signup and Login Pages
39:35
9
User, Profile and Follower Models
07:30
10
Api Routes for Signup & Login
14:42
11
Connecting to Cloudinary
03:51
12
Wiring Signup and Login API to the frontend
15:14
13
How getInitialProps works
07:45
14
Authentication in NextJs
14:13
15
_app.js Functional Component
02:50
16
Creating HomePage Grid
05:49
17
Creating SideMenu
10:11
18
Search For Users
11:45
19
Fixing a bug with Search
03:26
20
Creating PostModel
03:45
21
API routes to Create, Get and Delete Post
14:00
22
API routes to Like and Unlike Post
10:23
23
API routes to comment on a Post
11:12
24
Rendering the Posts
30:38
25
CreatePost Component
13:23
26
Adding the Functionality to ADD & DELETE posts
12:45
27
Functionality to LIKE & UNLIKE POST
04:20
28
Functionality to POST & DELETE COMMENTS
06:50
29
LikesList Component
09:02
30
Add Modals for Posts
09:54
31
Implement Infinite Scroll
07:57
32
Quickly Fixing a small bug
01:38
33
API routes to GET profile info and Posts of user
06:51
34
API routes to GET Followers, Follow & Unfollow a User
12:44
35
API to update Profile
03:27
36
API to Update Password & Message Popup Settings
05:21
37
Dynamic Pages in NextJs
08:06
38
Bring Profile Data from Backend
05:52
39
ProfileMenuTabs Component
10:03
40
ProfileHeader Component
15:52
41
Followers & Following Components
14:45
42
Adding Functionality to Follow & Unfollow a User
07:58
43
Create a Root User
02:12
44
UpdateProfile Component
19:19
45
Settings Component
18:19
46
Adding Functionality to update Settings
06:17
47
[LEGACY] Only see the posts of users you are following
07:42
48
[UPDATED] Only see the posts of users you are following
10:26
49
Creating Notification Model
03:07
50
API for newLike Notification
09:18
51
API for newComment Notification
07:56
52
API for newFollower Notification
07:00
53
Fetching Notifications from Backend
06:52
54
Layout for Notifications Page
08:42
55
NewLike & NewComment Components
06:23
56
NewFollower Notification
05:59
57
PostId page
08:06
58
Creating ChatModel
03:45
59
Adding Data inside MongoAtlas
07:52
60
Bringing Chats from Backend
07:36
61
Rendering the Chats
14:58
62
Quickly fixing a bug
01:12
63
ChatListSearch Component
07:04
64
Introduction to Socket.io
07:21
65
Keeping a track of users on server
07:45
66
Displaying Online users
04:11
67
Fetching Messages of a chat
09:31
68
Creating Layout for Messages and Banner
05:56
69
MessageInputField
02:59
70
Creating Message
06:29
71
Sending a new Message
13:45
72
Handling No Chat Found
06:26
73
Receiving the Messages
19:37
74
Scrolling on newMsg
03:13
75
Deleting a Message
07:50
76
Deleting a chat
05:59
77
Receiving Messages on any page
17:39
78
Quick tip to clean up the code a bit
01:23
79
API to Reset Password
13:25
80
Quickly fixing a bug
00:50
81
Working on the frontend
13:26
82
Setting up the components
04:21
83
Making Layout Responsive
10:01
84
Like Posts With Sockets
13:36
85
Implementing RealTime Like Notification
20:11
86
Adding the Cropper
14:12
87
Adding Functionality to Buttons
09:07
88
Deploying to Heroku
06:14
89
Final Thoughts
00:30
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What prior knowledge is required before taking this course?
This course is not for absolute beginners. Prospective students should have completed at least one project using the MERN stack, which includes MongoDB, Express.js, React, and Node.js. This foundational experience is necessary to understand and build upon the advanced concepts covered in the course.
What kind of project will I build during the course?
Students will build a full-stack application that includes real-time features and a comprehensive user interface. Key components include user authentication, real-time notifications, image handling with Cloudinary, and dynamic content rendering with Next.js. The project is designed to be enterprise-grade, providing practical experience in modern web development.
Who is the target audience for this course?
The course is aimed at developers who are already familiar with the MERN stack and are looking to enhance their skills with modern tools like Next.js and Socket.io. It is ideal for those who wish to get out of their comfort zone and work on a challenging project that can significantly enhance their resume.
How does this course compare to other MERN stack courses?
Unlike some introductory MERN stack courses, this course covers advanced topics such as real-time notifications, dynamic pages in Next.js, and integrating Cloudinary for image handling. It also involves creating a sophisticated user interface with functionality for following and unfollowing users, and managing notifications, which provides a deeper dive into full-stack development.
What specific tools and platforms will I learn to use?
The course covers several tools and platforms, including Next.js for server-side rendering, MongoDB for database management, Express.js for building the backend, and Socket.io for real-time communication. Additionally, Cloudinary is used for handling image uploads, and MongoAtlas for database hosting.
What topics are not included in this course?
The course does not cover CSS frameworks or provide introductory content on the MERN stack. Students are expected to have prior knowledge of these areas. It focuses on advanced concepts and practical application development rather than basic tutorials.
How much time should a student expect to commit to this course?
The course comprises 89 lessons, and while the total runtime is not specified, students should be prepared to invest a significant amount of time to complete the coursework. This includes watching lectures, coding along, and applying learned concepts to build the full-stack application.