MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
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.
Read more about the course
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.
Watch Online MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
| # | Title | Duration |
|---|---|---|
| 1 | New update: realTime Notifications | 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 |
Similar courses to MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Zero to Full Stack Heropapareact.com
Python/Django + React QR Digital Menu BuilderPythonYoga
NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)udemyAcademind Pro
MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)udemy
Mastering React With Interview Questions,eStore Project-2024udemy
Shadcn UI & Next JS - Build beautiful dashboards with shadcnudemy
NextJS & OpenAI - 2024 Editionudemy
Node.js, Express, MongoDB & More The Complete Bootcamp 2023udemy
Next.js 14 Real-Time Chat App using Socket IOudemy
