Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

React Clone WhatsApp (w/ React Router, React Hooks) 2021

Name: React Clone WhatsApp (w/ React Router, React Hooks) 2021
Rating: 4.5 (9 reviews)

With Convenient, Amazing and Simple Technologies like Meteor, React Hooks, TypeScript and Styled Component

Created byJulien Kisoni

Last updated 1/2021

English

What you'll learn

Create your own Social Network
Create your own WhatsApp
Build your own social network with instant messaging system, photo uploading, user search, authentication system etc.
Quickly and easily write code to implement real-time communication using Meteor.
Make Meteor, React and TypeScript Work Together and Differentiate Between the 3

Course content

13 sections • 155 lectures • 13h 28m total length

Introduction3:22
Installation Of Necessary Tools2:31
Section Summary0:46

Introduction2:18
Create a login page for a whatsapp-style app with React Router and hooks, implementing static components first, then integrate Meteor-based user management and TypeScript boilerplate.
Clone The Boilerplate2:24
Step #1 - Break Down Login Component2:44
Routes And Theme In App Component10:47
Our FormLogin Component7:39
Our FormLogin Component (part 2)3:52
Build a React login form component (part 2) using styled components, rendering a styled form with labeled inputs for username, telephone, and password, and a connexion button.
Our RightImg Component7:42
Step #2 - Static Version Of Login Component4:43
Build the static login component by wiring RightImg with FormLogin and a text message 'connect to start a conversation', ensuring children render inside RightImg.
Step #3 And #4 - Add State5:11
Set up a three-field login state (username, phone, password) in FormLogin, implement a generic handleChange with TypeScript, and use React useState to manage input values.
Step #5 - Add Inverse Data Flow2:25
Few Words About Account & Password3:16
Learn how to manage accounts and passwords with Meteor packages, create users with username, email, password, and profile, and work with Meteor.user and Meteor.userId.
Create Dummy Users7:31
Create Dummy Users (part 2)5:34
Create a dummy users array in a TypeScript file, export it, and populate a fictitious user table for the WhatsApp clone, then verify with meteor mongo.
User Authentication9:07
User Authentication (part 2)7:45
Section Summary1:44

Introduction1:55
Introduce a two-pane react layout for WhatsApp clone by decomposing main into left and right, focusing on left to render chats and header with styled components, flexbox, moment, and FontAwesome.
Step #1 - Breaking Down Components2:08
Our Left Component3:03
Build left component for the react clone whatsapp app using styled components, creating Left.tsx with a styled left container (flex column, width 35%, height 100%, right border) and exporting.
Our Right Component3:43
Rendering Left & Right Inside Main Component5:33
Our Header Component9:27
Design and implement a reusable header component for a WhatsApp clone, with left icons, a center title and online subtitle, and right icons, using React FontAwesome and styled components.
Our Header Component (part 2)11:26
Our Status Component6:58
Our SearchBar Component4:55
Our ChatList Component6:01
Create Dummy Chats11:10
Create dummy chats by developing a helper to populate the chat collection with dummy chat objects, using moment for timestamps and defining a DummyChat array with participants.
Create Dummy Chats (part 2)3:27
Create the ChatList component for a React WhatsApp clone, style it with styled components, and fetch all chats via meteor publish, planning to add ChatItem in the next video.
Our ChatItem Component6:23
ChatList & ChatItem Together4:07
ChatList & ChatItem Together (part 2)5:07
How To Retreive The List Of Chats9:06
How To Render The List Of Chats2:59
How To Use React Moment8:46
Section Summary1:13

Introduction2:19
Display chats and messages by date with real-time text messaging, using FlipMove and react-meteor-data withTracker to animate and synchronize with the server.
Breaking Down Components2:07
Our MessageView Component5:19
How To Select A Chat6:34
How To Select A Chat (part 2)6:59
How To Display The Header4:35
Our Footer Component5:38
Add State To Footer Component3:12
Our MessageBox Component4:44
Messages Collection10:24
Rendering Messages4:19
Rendering Messages (part 2)5:37
Rendering Messages (part 3)4:44
Rendering Messages (part 4)5:32
First Loop To Display Dates6:48
Create a day component to display dates in the message box, using a blue day container and a day span driven by props.date, ready for rendering a date array.
Nested Loop To Display Messages8:21
Learn to render chat messages under each date with nested maps in a React app, creating reusable MessageText and MessageBox components that distinguish mine from others.
How To Send A Message7:11
How To Send A Message (part 2)5:27
How To Use withTracker For Real Time Communication10:19
How To Scroll Automatically4:19
How To Use React Flip Move3:53
Find And Display The Last Message Of A chat4:19
Create a helper function findLastMessage(chatId) that returns the most recent message by sorting messages by createdAt in descending order. Use it to display each chat's last message.
Sorting Chats5:03

Introduction1:33
Step #1 - Breaking Down Components2:24
Our FABs Component3:04
Define a StyledFABs component with styled.div, apply fabVisible-driven styles and hide the file input, then scaffold FABs.tsx and export default fabs for the React WhatsApp clone.
Our FABItem Component5:04
Create the FABItem React component for the WhatsApp clone, rendering a FontAwesome icon from iconName, supporting children, with a bg prop mapped by setBg to purple, orange, blue, or lightblue.
Render FABItem Whithin FABs5:43
Render FABs With State8:06
Select A File4:40
Select A File (part 2)3:09
Implement a hidden file input in React part 2 of select a file, handle input changes, and log the selected file object to the console to prepare a modal preview.
Our Modal Component8:04
Create a styled modal component in React, including header with an icon and title, body with image preview, and footer sections, plus a floating action button for sending images.
Show And Hide Modal Component8:05
Display Selected File Whithin Modal Component6:29
Images Collection7:09
Upload An Image5:24
Upload An Image (part 2)7:40
Our MessageImage Component7:49
Send A Picture Message10:44
Learn to send image messages by updating the message flow to handle text and image types, upload the image, store its url in Session, and update the message via Tracker.autorun.
Send A Picture Message (part 2)7:23
Fix The Content Of The Last Picture Message3:34
Section Summary0:59

Introduction1:07
Step #1 - Breaking Down Components1:23
Our OtherProfile Component4:44
Rendering The Header3:17
Import the header component and render it with props iconClass and icons, configure a FontAwesome close icon, and display the header title Info.
Display The Avatar Component3:30
Our Actu Component5:20
Our ActuItem Component6:20
Rendering OtherProfile Whithin Main Component9:10
Close OtherProfile Component1:59
Learn how to close the OtherProfile component by clicking the icon, wiring onClick to props.onClose, and implementing handleClose to hide the panel and clear otherId.
Adjust Widths Dynamically5:34
Having A Large Avatar Dynamically5:36

Introduction1:19
Apply the think in React approach to decompose and build the LeftSide profile component, enabling editing of name, news, and profile picture, with a hover overlay for image upload.
Step #1 - Breaking Down Components1:56
Our LeftSide Component5:12
Our LSHeader Component3:11
Display Avatar Component1:03
Our LSForm Component5:36
Create the LSForm component with a styled container and a read-only input. Drive the title from the type prop (news or username) and include a descriptive left-side separator.
Showing And Hiding LeftSide Component3:41
Learn to load and toggle the LeftSide component in a WhatsApp clone using the toggleLS function and LSVisible state, triggered by avatar clicks and LSHeader actions.
Writing In Input Fields3:16
Controlled Input Fields6:51
This lecture demonstrates controlled input fields in React, updating the user name on the server with a username method and handling news edits on the client via onChange and value.
Fix The Issue3:36
Display Overlay Within Avatar Component8:32
Explore how to display a hover-activated avatar overlay in React, using a renderOverlay function, FontAwesome camera icon, and restricting the overlay to the LeftSide component via the inLS prop.
Updating Profile Picture7:54
Updating User' Profile In Real Time1:52

Introduction1:18
Step #1 - Breaking Down Components1:54
Building The Static Version3:24
Our UsersList Component4:05
Our UserItem Component5:19
Group Users In Alphabetical Order5:55
Group Users In Alphabetical Order (part 2)4:17
Rendering UserItem Whithin UsersList5:39
Learn to render a combined users list by mapping users to letters and corresponding UserItem cards, with proper keys and profile data like username and picture.
Close UsersList Component2:28
Start A New Chat6:30
Fixing The Error8:55
Fixes errors in a React WhatsApp clone by replacing the $ in check with $ all for participants, updates the findLastMessage logic, and handles empty messages and new chat creation.

Introduction1:01
Think in React to break down components, manage state, and connect with the Metero server. Build BigOverlay and ImageViewer to display or hide a profile picture via the OtherProfile avatar.
Step #1 - Breaking Down Components1:10
Our BigOverlay Component2:19
Build a static BigOverlay component in a React WhatsApp clone using styled components. Create StyledBigOverlay and BigOverlay.tsx, render children, and apply fixed full-screen, transparent background, and high z-index.
Build A Static Version Of ImageViewer4:24
Build a static version of ImageViewer with styled-components, creating StyledImageViewer and a centered image container with a close icon. Implement the React ImageViewer to accept imageUrl and render an img.
Show And Hide ImageViewer8:59
Show and hide the ImageViewer overlay by clicking avatars, using React state with a BigOverlay and conditional rendering that passes imageUrl and handles onClose.

Introduction0:44
Hour Whithin MessageImage Component0:56
Display The Number Of Unread Messages6:23
Display The Number Of Unread Messages (part 2)6:49
Display The Number Of Unread Messages (part 3)2:27
Display The Favicon1:34
Display the WhatsApp favicon by linking whatsapp.ico in the public folder to the main.html head as a rel icon with image/x-icon, then verify it shows in the app.
How To Search For A User6:27
Challenge #10:28
Our Popup Component4:27
Showing Popup Component5:25
Hiding Popup Component2:03
Hide the popup by wiring the cancel button to onCancel, toggle visibility, and reset the title. Enable deleting messages and images, restricting deletions to the current user's messages.
Delete A Text Message9:26
Learn to delete a text message in a React WhatsApp clone by handling click events, passing the message id, and invoking a Meteor method to remove it.
Delete A Picture Message3:19
Some Other Challenges1:02

Requirements

HTML & CSS (Especially FlexBox)
JavaScript and ES6
React (Components, JSX, State, Props, conditional rendering etc ...)
Install PC and / or Mac software
The resources to learn React Hooks, Meteor, and Styled Components will be provided to you in this course

Description

This course was recorded in French but is subtitled in English.

It's been a long time since you tried to create your Social Network but you do not know where to start?

Well in this training I'll show you how to create a copy of WhatsApp Web.

Did you know that currently the official version of WhastApp Web is built with React and Styled Component?

React is an open source JavaScript framework maintained by Facebook. It allows you to create single page web applications, by creating components.

Styled-component is a javascript library that allows you to increase productivity and facilitate the creation of React visual components (UI components) by writing css code in a javascript file.

You've probably heard it said that in order to progress as a developer (programmer) you have to train on real projects and try to clone (reproduce), with your own code, the applications that you like.

That's how I got into the crazy idea of cloning WhatsApp Web with React and Styled Component. I was quickly stuck with a problem ... With React and Styled Component on the front-end it was the best but the problem is that WhatsApp is an instant messaging system, which means that messages have to arrive in real time. Something that is not easy to implement with javascript (socket) when you want to create an application of the size of WhastApp.

That's when I thought of Meteor which is in short a FullStack Javascript Framework that allows you to create real-time applications. It was a challenge for me, and once I was successful I was so happy that I told myself to share this with the Francophone community.

That's why I created this course which will allow you to create a copy of WhatsApp Web with your own codes. You can even be inspired by this to create your own version of WhatsApp.

I am Julien, web developer and author of the bestseller Ionic 4 - Create a Shopping Application. I love JavaScript and its Frameworks / libraries. I am particularly proficient in JQuery, TypeScript, Angular, Ionic, React, React Native, Meteor, Electron, NodeJs etc. And I have learned from experience that it is easier to learn to program with a project that we like. This is why this course is project oriented. We will learn how to build React web apps in real time by creating a copy (a clone) of WhasApp Web. Thanks also to Meteor, TypeScript, React Hooks and Styled Component. This is a unique opportunity for you. And it doesn't matter if you don't know Meteor or React Hooks or Styled Component because I will explain all of that to you in the training appendix.

"At the root of all success, there is the fact of having dared". So believe in yourself and you will arrive. For my part, I am committed to supporting you and responding to your concerns throughout the course.

Thanks to Udemy, this course is guaranteed satisfied or refunded for 30 days and without any conditions. If you don't like the course, it's easy, we'll reimburse you. So sign up now.

This training will allow you to:

Create a copy (a clone) of WhatsApp web, which will allow you to impress recruiters to get the job of your dreams;
Use React and Meteor together which will allow you to create web applications with real time communication;
To familiarize yourself with React Hooks and Styled Components which will allow you to create flexible and dynamic web designs to create your own social network;
Code in TypeScript instead of basic JavaScript when working with React and Meteor, which will allow you to add a touch of security when programming;
Use the publications / subscription and the Methods in Meteor to secure your application;
Use Tracker and withTracker to set up responsive programming, which will allow you to implement real time in less than 20 seconds for your entire application;
Filter Meteor collections, which will allow you, for example, to implement a user search system;
Use the Meteor ostrio:file package, which will allow you to set up a file upload system (images) for your application;
To master useState and useEffect which will allow you to create controlled inputs and update the DOM reactively;
Use styled components to add style to your components which will allow you to create dynamic styles and themes;

Use the moment javascript library to create and manipulate dates which will allow you to more easily manipulate and manage timezones and date formats according to your needs;
To use the Moment Component made available to us by react-moment, which will allow you to display the dates that have been created from the moment library;
Use the react-flip-move which will allow you in 3 clicks to animate your lists each time an item is added or deleted. To enrich your design for a professional look;
Using react-fontawesome which will allow you to display FontAwesome icons in a React component;

"What would you do if you weren't afraid? " Mark Zuckerberg

So wait no longer, click the button and register now and we'll meet on the other side to get started. Welcome to this React training.

P.S .: If you already have the basics, start directly with the introduction section.

Who this course is for:

React Web Developer who wants to create His Own Social Network with Instant Messaging

React Clone WhatsApp (w/ React Router, React Hooks) 2021

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 7min

Users Authentication16 lectures • 1hr 25min

Create Instant Chat19 lectures • 1hr 47min

Create A Real Time Messaging System23 lectures • 2hr 8min

Create An Image Upload System19 lectures • 1hr 47min

Display The Correspondent's Profile11 lectures • 48min

Display Connected User's Profile13 lectures • 54min

View List Of All Users11 lectures • 50min

Create An ImageViewer Component5 lectures • 18min

Some Edits14 lectures • 52min

Requirements

Description

Who this course is for: