WhatsApp Web Clone from Scratch with ReactJS

Name: WhatsApp Web Clone from Scratch with ReactJS
Rating: 4.3 (14 reviews)

Learn to build WhatsApp Web Clone with ReactJS, & Firebase

Created byKamran Wajdani

Last updated 3/2020

English

What you'll learn

Modern Javascript (ES6, ReactJS)
Firebase Advance Concepts
Firebase Firestore Database

Course content

4 sections • 11 lectures • 4h 30m total length

App Setup20:18
Start a React app for a WhatsApp web clone, install dependencies, and scaffold the UI with a sidebar, message tools, and a splash screen powered by a context-driven loader.
Basic Layout12:16
Design the basic layout of a WhatsApp web clone using React, creating a messenger screen, a sidebar, and a chat area with responsive styling, flex layout, and positioning.

Sidebar UI (Conversation List)38:34
Design the sidebar UI for a WhatsApp web clone in ReactJS, featuring a header with avatar and icons, a search box, and a scrollable inbox conversation list.
Chatbox UI (Chat Messages)42:19
Design a chat box UI for a WhatsApp Web clone using ReactJS, implementing chat headers, chat logs, message bubbles, attachments, icons, input area, and message status indicators.

Signin UI29:28
Build the signin UI for a WhatsApp web clone by integrating Firebase, configuring the web app, initializing Firebase, and routing users through the sign-in flow.
Loading Cover Design13:41
This lecture guides building a loading cover for a WhatsApp web clone using React, implementing a three-line loading indicator with animated keyframes, color props, and a reusable loading component.
Custom Toast Notifications44:26
Create and integrate custom toast notifications in the sign-in flow of a WhatsApp Web clone built with ReactJS, using firebase sign-in, a notification container, and configurable timing.
Phone Authentication with SMS33:01
Explore phone authentication with sms in a React app, implementing sending and verifying sms codes using firebase, reCAPTCHA, and user input handling for secure sign-in.
Phone Authentication with SMS (Verification)2:03
Demonstrates phone authentication with SMS verification, including test code entry, invalid and valid code handling, and signing in. The next video continues with the firestorm Daedalus connection.

Load Inbox from Firestore26:54
Learn how to load the inbox from Firestore in a ReactJS WhatsApp web clone, including configuring Firestore rules, creating the inbox collection, and rendering loading placeholders in the sidebar.
Connect Chat with Inbox from Firestore7:34
Connect the chat to Firestore to display actual messages, set a default state, and enable selecting conversations from the left list to render the inbox and chat box.

Requirements

Basic HTML, CSS, Javascript

Description

This is a front to back `WhatsApp Web Clone` course for absolutely everybody. We are going to build complete WhatsApp Web with these features:

1. Advance UI Concepts: Design front end easily without thirdparty libraries.

2. Custom Notifictaion System (Toasts): We will setup Android like Toasts Notifications with Animation.

3. Firebase Phone Authentication: We will inetgrate Firebase Phone Authentication Out of the box

4. Conversation / Inbox System

5. Advance Chat with Text, Images, Audio Messages, File sharing, Typing Indicator, Last Seen and all that.

6. Audio / Video Calls using WebRTC

7. Advance Search System

and more.

There are lot more than that in this course and can't be enclosed in here! Whether you are beginner or an experienced programmer. There is something for everyone :)

Who this course is for:

Front-end & Back-end Developers

WhatsApp Web Clone from Scratch with ReactJS

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 33min

UI Design2 lectures • 1hr 21min

Firebase OAuth5 lectures • 2hr 3min

Inbox & Chat (Firebase Setup)2 lectures • 34min

Requirements

Description

Who this course is for: