Name: Create Your Own React Live Web Chat Application Zero to Hero
Rating: 3.7 (7 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byTech CodingCamp

Last updated 2/2021

English

What you'll learn

React Chat Application
Nice Explanation For Beginners
React Live Cycle Methods-Separately Explained
Live Chat With Other Users
No 3rd Party Api Every Thing Is Handled Manually
Login/Signup Screens
Update Profile
Send Emojis and Pictures
Will Be Updating With New Features In Every First 6-Months

Course content

4 sections • 27 lectures • 6h 20m total length

Project Demo7:22
Build a real-time web chat application with login, sign-up, profile management, and messaging using Firebase. Share images and stickers with a responsive design.
Don't Know How to install Setup? See this video7:00
Install Visual Studio Code and Node with npm on Windows, verify versions, then create your project and start the React app with npm start.
Coding Flow Overview4:07
Creating Firebase & React Project7:35
Creating Projects Files4:00
Writing Firebase Config File5:45
Install and configure Firebase for a React live web chat app. Copy the Firebase config, export it as default, and integrate it into the app entry.
Creating Routes21:44

Creating Home Component23:08
Create a home component for a react chat app. Use a grid layout with a left image and a right login card and sign-up navigation, styled with material ui core.
Writing Login Component37:49
Completing Login Component9:51
Learn to complete the login component for a React live web chat, integrating Firebase authentication and storage, handling input changes, sign-in with email and password, and local storage data.
Writing Signup Component15:58

Writing Side Panel Component45:08
Writing Welcome Component7:19
Build a welcome component that renders the current user's name and avatar using props, excludes the current user from the list, and gracefully handles missing profile images.
Update Profile Part-117:17
update profile part-1 walks you through editing user name and status, uploading avatars, and handling profile data with local storage and firebase in a react live web chat app.
Update Profile Part-217:40
Finalizing Update Profile Component11:09

Adding states11:29
Add and manage component states in a React live chat app, including loading and sticker states, while wiring local storage and Firebase image uploads.
Writing Render Function8:30
Completing Render Function15:50
Writing Render List Function8:32
Writing Send Message Function11:18
Get List messages From Firebase21:57
Render Messages On Screen Part-117:07
Render Messages On Screen Part-216:56
Upload Photos For Messages7:57
Adding Last Functionalities4:43
Add the last functionalities to the React live web chat app by wiring up message rendering, bottom auto-scroll, keyboard press handling, sending messages, and opening the sticker panel.
Finalizing And Removing Errors13:41

Requirements

Little Bit understanding of Html/CSS and React

Description

Build ReactJS Chat Real time chat application. Facebook Messenger or Build WhatsApp Web App clone with Firebase/Firestore Features

1.SignIn Form/Page

2.Home Page

3. SignUp Form/Page

4. Real Time chat

5. Search Feature

6. Change Profile Image

7. Change Profile Description

8. Send Images

9. Send Stickers Emojis

10. Responsive React Chat Application

11. Logout

12. Will Update Online Feature in Chat Application with React

This Chat Application is a benefit for beginners, Every thing is explained clearly in simple words, if you are a beginner then this course is for you fell free to join and it will take you to the level where you will feel comfortable while working with Reactjs

Benefits:

I will update course every month

Will be adding Online Users Feature, Group Chat Component, Push Notifications and more.

Sections Descriptions:

In the first Section we will install react environment and Firebase configuration file we will also be writing routes so that we can navigate throughout our application components. Then, We will write Home component

In the Second section on update I will be adding React Life Cycle Methods used in this project

In the Third Section will write login and Signup components

In the Fourth Section we will be writing Side Panel and Profile Settings

In the Fifth Section we will write React Time Chatting Features

Next Section Will be updated in every month with new features........coming soon

Stay Blessed!

Who this course is for:

ReactJS Developers
Firebase Users

What you'll learn

Explore related topics

Course content

Understand Our Application7 lectures • 58min

Create Account Settings4 lectures • 1hr 27min

Side Panel & Profile Update5 lectures • 1hr 39min

React Time Chat Component11 lectures • 2hr 18min

Requirements

Description

Who this course is for: