Fullstack Chat App with Advance features using MERN stack
Learn from CodingMonk
12 modules
Certificate of completion
Lifetime access
Master the MERN stack by building a fullstack chat app with advanced features
Overview
Learn how to build a powerful fullstack chat application with advanced features using the MERN (MongoDB, Express.js, React.js, Node.js) stack. This course will guide you through the entire development process, from setting up the backend with a MongoDB database to creating the frontend user interface with React.js. By the end of this course, you will have a fully functional chat application that can handle real-time messaging, user authentication, and other advanced features.
Key Highlights
Build a fullstack chat app using the MERN stack
Implement real-time messaging functionality
Add user authentication and authorization
Learn how to handle advanced features like file uploads and notifications
What you will learn
Learn to set up a MongoDB database
Understand how to configure and connect a MongoDB database to your application, and learn basic database operations.
Create a backend server with Express.js
Use Express.js to build a RESTful API that will handle the communication between the frontend and the database.
Build the frontend with React.js
Develop the user interface of the chat app using React.js and leverage the power of reusable components.
Implement real-time messaging functionality
Integrate a real-time messaging system using technologies like WebSockets or Socket.io for instant communication between users.
Add user authentication and authorization
Learn how to implement user authentication and authorization using technologies like JWT (JSON Web Tokens) for secure access and user management.
Handle advanced features like file uploads and notifications
Extend your chat app by adding functionalities such as file uploads, notifications, and other advanced features to provide an enhanced user experience.
Modules
Introduction
8 attachments • 33 mins
Intro to course
What is Mesh architecture
How webRTC works behind scenes
Signaling Server
STUN server
What is SDP
TURN server
ICE Candidates
Preparing Environment
4 attachments • 17 mins
Node.js Installation
Creating server & Installing dependencies
Initializing Basic server logic
Scaffolding React app
Creating Client Side
16 attachments • 1 hrs
Creating pages & setting up routing
Creating intro page
Creating Join page
Creating Room Page Layout
Creating room label
Creating participants section
Creating group chat section
Creating Video Controls
Microphone Button
Camera Button
Screenshare Button
Hang up Button
Fixing scroll issue
Adding theme
theme folder
Toggle Theme Button
Managing App State
16 attachments • 1 hrs
Adding navigation to intro page buttons
Making Controlled Inputs
Managing user role
Setting up redux store
Creating app slice
Setting roomID in store
Visualizing Redux store
Customising Join Page
Cancel join button
Checking if room exists
Creating JoinRoom Handler
Making API call & handling error
Storing name and meeting ID in redux store
Testing host & join room
Storing themeMode in redux store
Storing connect only with audio preference
Creating signaling server
14 attachments • 1 hrs
Preparing for room connection
Getting local stream
Creating loading overlay
Creating connection with Socket.io server
Connecting to socket.io server from client side
Emitting an event to server to create new room
Testing event emitted for creating new room
Creating create new room handler
Gettting Room ID from server
Showing Real users connected to Room in participants list
Creating join room handler
Testing joining room
Leaving room
Closing room if none user left
Implementing webRTC
17 attachments • 1 hrs
Reacp of webRTC connection
Prepare for connection
Handle connection prepare event
Starting with simple peer
Handling stream event
Handling signal event
Passing signaling data to connected users
Emitting event - connection init
Displaying incoming stream
CSS File
Displaying Incoming Streams
Cannot read property 'call' of undefined
1 page
Testing webRTC Connection
Setting video resolution
Fixing Participants List Bug
Removing Peer Connection when user disconnects
Testing Leave room functionality
Adding room controls
7 attachments • 41 mins
Mute Microphone Functionality
Disable video functionality
Testing audio & video controls
Screen sharing - preview
Fixing bug with disabling screen share
ScreenShareFunctions
1 page
Switching video tracks
Audio Call
3 attachments • 33 mins
Connecting only with audio
Creating only audio label
Fixing small bugs
Creating TURN server
2 attachments • 17 mins
Fetching TURN server credentials from Twilio
Implementing TURN server in Peer Connection
Creating chat functionality
One to One Chat
Codebase
2 attachments
team-chat-app
webRTC-advanced-app
Certification
When you complete this course you receive a ‘Certificate of Completion’ signed and addressed personally by me.
FAQs
How can I enrol in a course?
Enrolling in a course is simple! Just browse through our website, select the course you're interested in, and click on the "Enrol Now" button. Follow the prompts to complete the enrolment process, and you'll gain immediate access to the course materials.
Can I access the course materials on any device?
Yes, our platform is designed to be accessible on various devices, including computers, laptops, tablets, and smartphones. You can access the course materials anytime, anywhere, as long as you have an internet connection.
How can I access the course materials?
Once you enrol in a course, you will gain access to a dedicated online learning platform. All course materials, including video lessons, lecture notes, and supplementary resources, can be accessed conveniently through the platform at any time.
Can I interact with the instructor during the course?
Absolutely! we are committed to providing an engaging and interactive learning experience. You will have opportunities to interact with them through our community. Take full advantage to enhance your understanding and gain insights directly from the expert.
About the creator
Learn from CodingMonk
👨🏫 Expert Instruction: With over 30,000 developers taught since 2022, Shreyansh is a seasoned web developer and top instructor. Benefit from a curriculum blending real-world projects, deep explanations, and theory lectures.
👨💻 Career-Ready Confidence: Gain the knowledge and confidence to ace job interviews and become the sought-after React developer companies are looking for.
Rate this Course
₹ 4999.00
₹9999
Order ID:
This course is in your library
What are you waiting for? It’s time to start learning!
Wait up!
We see you’re already enrolled in this course till Lifetime. Do you still wish to enroll again?
