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

Build a socialMedia with MERN- React, Nextjs, socket io for realTime chat & Notifications, Infinite Scroll & much more..

4.30 (356 reviews)
Udemy
platform
English
language
Web Development
category
instructor
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
2,808
students
13 hours
content
Feb 2023
last update
$69.99
regular price

What you will learn

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.

Why take this course?

⭐ 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.

Screenshots

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs - Screenshot_01MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs - Screenshot_02MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs - Screenshot_03MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs - Screenshot_04

Reviews

Alessandro
October 14, 2022
Very detailed. The instructor is super helpful! Recommended if you already have some knowledgeable with React and Node.js
Yogesh
July 24, 2022
This course unveiled the most sought-after features by the developer community i.e. control of real-time activity. I liked the quality stuff and pace.
Hema
July 19, 2022
Exceptional Course by Instructor. Answers to queries is almost instant. The packages in starter folder are deprecated, but the readme file in github repo explains all the changes/updates made.
Mosh
June 15, 2022
Such an amazing course with one of the most helpful instructors I've had the chance to interact with. Whatever questions/concerns one might have will be answered if not already during the thorough and concise lectures! Thank you Inder!
Alper
May 26, 2022
It was a great match for my expectations. Though some of the libraries used in the video are outdated, so far they have been easy to fix.
Omer
May 3, 2022
Course is very clear and well structured but above all the instructor is super helpful and really goes out of his way to help! I will definitely purchase more courses of his in the future
Luke
April 18, 2022
This was a very interesting course, a lot is showed to learn about the full aspect of a full stack MERN web application with a few interesting libraries in bonus. If I had to give recommandations for improvement: it would be great to go a bit more slower and speak louder for better understanding, in short, you can try to put more effort on your speaking ability! At any rate, that was a great course, I'm now more confident in developing my own project with the MERN stack, thank you!
Ashley
March 28, 2022
I think Inder does a good job and he is a good teacher. Breaking down hard concepts into small understandable chunks. He covers quiet complex and covers may be not so much addressed topics. He is very active in answering queries and questions. seems to go out of the way to answer certain questions and to engage with the student to help the student out. I am new to MERN so can't explain a lot about many features but from what I understand this MERN course that covers Server side rendering using NextJS (this was the main reason for me to get this course) is very valuable. Well done Inder and all the best
Pradyumna
March 27, 2022
I think this is the best course available if you want to learn server side rendering with next js. Also this can be the best real-world Social-app project on entire udemy. He has covered every small thing. Besides this Inder is very responsible teacher. He solves the queries within 3 to 4 hours and also corrects the code on github. Thank you very much for this wonderful course and waiting for next full stack courses from you.!
Judy
March 17, 2022
It was a great Course. Had a great time. Also, got the replies to my questions within hours. That never happens
Ankit
February 9, 2022
The best course for learning the full-stack process step by step covers almost all the topics, if it is not much to ask can you provide a method to upload multiple images to Cloudinary on one click, like if the user wants to upload multiple images in one post. Waiting for your next course.
Khunt
January 9, 2022
Amazing Course As I expected. I have learn real time chat and notification features with complete understanding. Also learn image cropping features. Instructor explanation is also good.
Bérénice
January 6, 2022
Very very complete tutorial, straight to the point, and the tutor Inder makes himself available for questions in a nice patient manner
Siklér
December 16, 2021
The course is very Goood! Very fast response my question! I offer every people who want make Node social app
Jens
July 1, 2021
Excellent course, cool topic, pretty thoroughly covered. I can totally recommend. Update: The only critique is the socket.io messages part with user messages. Thats why half star removal.

Charts

Price

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

Rating

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

Enrollment distribution

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs - Distribution chart
3887432
udemy ID
3/3/2021
course created date
3/12/2021
course indexed date
Bot
course submited by