Mô tả

⭐ COURSE UPDATE IN PROGRESS..


Who should take this course?

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.


Welcome to “MERN Social Media with Socket io for Real time chat and Notifications”.

This is the most complex MERN app you are ever going to create.

(Source Code available to download before every section.)

I am going to explain all the features below but make sure to check the intro video because no matter how much I write, there are so many features in this app, I might miss something. Also all the videos are in 1080p so make sure to turn on the auto mode in video quality settings.


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.


This is the one of the most complex project you are going to create, and it will look really great on your resume. So, what are you waiting for, just enroll in the course and start learning.

You can ask me all the questions in Udemy Q/A.

Bạn sẽ học được gì

Create a complex real-world App that will actually get you a Job. (make sure to check intro video)

Build a full stack complex Social Network app with React, NextJs (for SSR), Express with Node for backend , MongoDb as database.

Socket io for REALTIME CHAT with multiple authenticated users. STORE every message a user sends and receives in MongoDB.

Showing users who are ONLINE on your app.

Receive Messages anywhere inside the app.

REALTIME NOTIFICATIONS whenever someone LIKES or COMMENTS on your posts. Also when someone FOLLOWS you.

Only see the posts of Users you are FOLLOWING on the homepage, just like it happens in big social networks

Crop Images Before Uploading to Cloudinary.

Create INTERLINKED MongoDB models for storing all the INFO of Users, MESSAGES, NOTIFICATIONS. Learn how big social media companies do this kind of stuff.

Create a root user to delete any post or any comment which he/she finds inappropriate

SEARCH for users inside your Db .

Easily implement INFINITE SCROLL in your app.

Toast Notifications with React-Toastify

FULLY RESPONSIVE Layout for Mobile, Tablet and Desktop Screens.

Modals for posts.

POSTMAN for API testing

RESETTING The Password using Sendgrid and Nodemailer.

CLOUDINARY For Image Uploads

Deployment to Heroku.

Source Code available to download before every section.

Semantic-ui-react as CSS framework.

Yêu cầu

  • This course is NOT FOR ABSOLUTE BEGINNERS. You should have done at least 1 MERN project.
  • This is NOT an "Intro to React" or "Intro to Node" course.
  • You need to know the basics of React and Node. I have taken care of everything else in the course. I have explained properly how NextJs and Socket io works.
  • Good Understanding of JavaScript and ES6 syntax (object de-structuring && arrow functions).
  • React hooks mainly useRef, useEffect & useState
  • Will to Learn.

Nội dung khoá học

13 sections

Introduction To Nextjs and Connecting to MongoDB

7 lectures
Buy this course at the Lowest Price
00:11
Download Updated Project Source Code
00:09
New update: realTime Notifications
00:46
Crop Images Before Upload: New Update
01:38
Requirements for taking this Course
00:46
Introduction to Nextjs
02:31
Connecting to MongoDB
01:34

Signup and Login

8 lectures
Creating Express Server
05:06
Add BodyParser
00:20
App.js, Layout and Navbar
10:05
Layout for Signup and Login Pages
39:34
User, Profile and Follower Models
07:29
Api Routes for Signup & Login
14:41
Connecting to Cloudinary
03:50
Wiring Signup and Login API to the frontend
15:13

Working on HomePage

21 lectures
How getInitialProps works
07:44
Authentication in NextJs
14:12
_app.js Functional Component
02:49
Creating HomePage Grid
05:47
Creating SideMenu
10:10
Search For Users
11:44
Fixing a bug with Search
03:25
Spaces bug in search bar
00:13
Creating PostModel
03:44
API routes to Create, Get and Delete Post
13:59
API routes to Like and Unlike Post
10:22
API routes to comment on a Post
11:11
Rendering the Posts
30:37
CreatePost Component
13:21
Adding the Functionality to ADD & DELETE posts
12:44
Functionality to LIKE & UNLIKE POST
04:18
Functionality to POST & DELETE COMMENTS
06:49
LikesList Component
09:00
Add Modals for Posts
09:53
Implement Infinite Scroll
07:56
Quickly Fixing a small bug
01:37

Working on ProfilePage

17 lectures
API routes to GET profile info and Posts of user
06:50
API routes to GET Followers, Follow & Unfollow a User
12:43
API to update Profile
03:26
API to Update Password & Message Popup Settings
05:20
Dynamic Pages in NextJs
08:05
Bring Profile Data from Backend
05:51
ProfileMenuTabs Component
10:02
ProfileHeader Component
15:51
Followers & Following Components
14:44
Adding Functionality to Follow & Unfollow a User
07:57
Create a Root User
02:10
UpdateProfile Component
19:18
Settings Component
18:18
Adding Functionality to update Settings
06:15
[LEGACY] Only see the posts of users you are following
07:41
[UPDATED] Only see the posts of users you are following
10:25
Code for previous lecture
00:34

Working on Notifications

12 lectures
Creating Notification Model
03:06
API for newLike Notification
09:17
Use MongoDb operator to removeLikeNotification
00:13
API for newComment Notification
07:55
Use MongoDb operator to removeCommentNotification
00:06
API for newFollower Notification
06:59
Use MongoDb operator to removeFollowerNotification
00:05
Fetching Notifications from Backend
06:51
Layout for Notifications Page
08:41
NewLike & NewComment Components
06:22
NewFollower Notification
05:58
PostId page
08:05

Working on Messages

22 lectures
Creating ChatModel
03:44
Adding Data inside MongoAtlas
07:51
Bringing Chats from Backend
07:35
Rendering the Chats
14:57
Quickly fixing a bug
01:11
ChatListSearch Component
07:03
Introduction to Socket.io
07:20
Keeping a track of users on server
07:44
Displaying Online users
04:10
Fetching Messages of a chat
09:29
Creating Layout for Messages and Banner
05:55
MessageInputField
02:58
Creating Message
06:28
Sending a new Message
13:44
Handling No Chat Found
06:25
Receiving the Messages
19:36
Scrolling on newMsg
03:12
Deleting a Message
07:49
Deleting a chat
05:58
Receiving Messages on any page
17:37
Updating to socket.io v4.x.x
00:25
Quick tip to clean up the code a bit
01:22

Reset Password Functionality

3 lectures
API to Reset Password
13:24
Quickly fixing a bug
00:49
Working on the frontend
13:25

Making Layout Responsive

3 lectures
IMPORTANT!
00:14
Setting up the components
04:20
Making Layout Responsive
10:00

RealTime Notifications

2 lectures
Like Posts With Sockets
13:35
Implementing RealTime Like Notification
20:10

Crop Images Before Upload

3 lectures
Download Updated Project Source Code
00:09
Adding the Cropper
14:11
Adding Functionality to Buttons
09:05

Deploying To Heroku

2 lectures
Deploying to Heroku
06:13
Final Thoughts
00:29

Migrating to getServerSideProps

1 lectures
Migrate to getServerSideProps
00:37

Join Discord

2 lectures
Buy this course at Best Price
00:11
Share the link to this Course to your friends & family.
00:21

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.