Udemy

Platform

English

Language

Web Development

Category

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.78 (140 reviews)

Students

13 hours

Content

May 2021

Last Update
Regular Price

WES BOS
Wes Bos
Build 30 things in 30 days with 30 tutorials
FREE COURSE

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.


Description

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
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

Content

Introduction To Nextjs and Connecting to MongoDB

Requirements for taking this Course

Introduction to Nextjs

Connecting to MongoDB

Signup and Login

Creating Express Server

App.js, Layout and Navbar

Layout for Signup and Login Pages

User, Profile and Follower Models

Api Routes for Signup & Login

Connecting to Cloudinary

Wiring Signup and Login API to the frontend

Working on HomePage

How getInitialProps works

Authentication in NextJs

Creating HomePage Grid

Creating SideMenu

Search For Users

Creating PostModel

API routes to Create, Get and Delete Post

API routes to Like and Unlike Post

API routes to comment on a Post

Rendering the Posts

CreatePost Component

Adding the Functionality to ADD & DELETE posts

Functionality to LIKE & UNLIKE POST

Functionality to POST & DELETE COMMENTS

LikesList Component

Add Modals for Posts

Implement Infinite Scroll

Working on ProfilePage

API routes to GET profile info and Posts of user

API routes to GET Followers, Follow & Unfollow a User

API to update Profile

API to Update Password & Message Popup Settings

Dynamic Pages in NextJs

Bring Profile Data from Backend

ProfileMenuTabs Component

ProfileHeader Component

Followers & Following Components

Adding Functionality to Follow & Unfollow a User

Create a Root User

UpdateProfile Component

Settings Component

Adding Functionality to update Settings

Only see the posts of users you are following

Fixing Duplicate Posts bug

Working on Notifications

Creating Notification Model

API for newLike Notification

API for newComment Notification

API for newFollower Notification

Fetching Notifications from Backend

Layout for Notifications Page

NewLike & NewComment Components

NewFollower Notification

PostId page

Working on Messages

Creating ChatModel

Adding Data inside MongoAtlas

Bringing Chats from Backend

Rendering the Chats

Quickly fixing a bug

ChatListSearch Component

Introduction to Socket.io

Keeping a track of users on server

Displaying Online users

Fetching Messages of a chat

Creating Layout for Messages and Banner

MessageInputField

Creating Message

Sending a new Message

Handling No Chat Found

Receiving the Messages

Scrolling on newMsg

Deleting a Message

Deleting a chat

Receiving Messages on any page

Quick tip to clean up the code a bit

Reset Password Functionality

API to Reset Password

Quickly fixing a bug

Working on the frontend

Making Layout Responsive

Setting up the components

Making Layout Responsive

Deploying To Heroku

Deploying to Heroku

Final Thoughts


Reviews

A
Asya17 April 2021

The best value for money course ever. I've taken other courses in the past, but this one trumps them all. In terms of features and functionality, the instructor has left no stone unturned. Would have paid thrice the asking price if asked.

I
Ivon30 March 2021

Amazing. Loved every minute of it. This is a really complex app explained thoroughly and with attention. This course shows how to build an enterprise level app. Also, source code is available before each section, so that helps a lot, helps me to understand the code better.

J
Jaime28 March 2021

Geweldig. Ik genoot van elke minuut. Het accent was gemakkelijk te begrijpen. Bovendien is de ondersteuning van de instructeur snel en zijn de antwoorden gemakkelijk te begrijpen. Ik heb al een heleboel nieuwe dingen geleerd over realTime-gegevensoverdracht tussen meerdere klanten. Moeilijk te geloven dat dit de eerste cursus van de instructeur is. Ga zo door!

J
Jill25 March 2021

Erstaunlicher Kurs. Sie müssen darauf achten, dass Sie genau wissen, wie eine App mit MERN STACK entwickelt wird. Dieser Kurs ist nicht zum Erlernen von NodeJS oder ReactJS von Grund auf gedacht. Sie sollten über Grundkenntnisse verfügen, bevor Sie mit diesem Kurs beginnen. Manchmal geht der Ausbilder ein bisschen schnell, aber dennoch ist dieser Kurs weitaus besser als andere.

A
Allie25 March 2021

Tot nu toe is het goed! hoewel ik denk dat het een beetje snel is, en gelukkig heb ik een beetje achtergrondinformatie over NodeJS en Javascript, daarom kan ik het volgen

V
Viktor23 March 2021

детальное объяснение. инструкторская поддержка отличная. Реализация уведомлений была отличной. Пожалуйста, продолжайте делать такие курсы.

I
Isla23 March 2021

Bester Kurs da draußen, Erklärung ist ausgezeichnet und gründlich. Auch die Unterstützung durch den Instruktor ist großartig und schnell. Ich habe die Antwort auf jede meiner Fragen innerhalb von 2 Stunden erhalten.

H
Hassan22 March 2021

Thanks please make these kinda courses, these are so helpful you don’t know how much i was struggling for that from long time. You made everything easy like Notifications and other things, I would like to say once again thank you & keep connecting with us! ❤️

P
Phil19 March 2021

I wanted to learn how to create Notifications System with MERN stack. Great Course.... Highly recommended

O
Olivia18 March 2021

Certainly this course deserves more students.. Deducting half star, becuase sometimes instructor goes a little bit fast while creating layout. Other than that, this course deserves more recognition

J
Joe17 March 2021

It is my first course on Udemy and it is really great. It's the most complex MERN app I've seen on Internet. How all things come together, in an enterprise level app, shows how much I have still to learn...

E
Elle16 March 2021

Outstanding Course. I was surprised to see how data models could be interlinked to each other and how this information can be used on the frontend..

R
Robie16 March 2021

I wanted to learn about Nextjs implementation with MERN stack and Socket io. There was no course about it previously on Udemy. This is what i was looking for.

N
Nisha16 March 2021

The instructor has explained everything with detail, makes it easy for even beginners to grasp the information..

S
Sehaj13 March 2021

Great So Far.. Already learnt a lot of new things. Just Sometimes the instructor goes a little fast. Otherwise, great.. The explanation is good.


3887432

Udemy ID

3/3/2021

Course created date

3/12/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram