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

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

4.00 (7 reviews)
Udemy
platform
English
language
Web Development
category
instructor
1,037
students
13.5 hours
content
Jan 2021
last update
$19.99
regular price

What you will 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

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.

Content

Introduction

Introduction
Installation Of Necessary Tools
Section Summary

Users Authentication

Introduction
Clone The Boilerplate
Step #1 - Break Down Login Component
Routes And Theme In App Component
Our FormLogin Component
Our FormLogin Component (part 2)
Our RightImg Component
Step #2 - Static Version Of Login Component
Step #3 And #4 - Add State
Step #5 - Add Inverse Data Flow
Few Words About Account & Password
Create Dummy Users
Create Dummy Users (part 2)
User Authentication
User Authentication (part 2)
Section Summary

Create Instant Chat

Introduction
Step #1 - Breaking Down Components
Our Left Component
Our Right Component
Rendering Left & Right Inside Main Component
Our Header Component
Our Header Component (part 2)
Our Status Component
Our SearchBar Component
Our ChatList Component
Create Dummy Chats
Create Dummy Chats (part 2)
Our ChatItem Component
ChatList & ChatItem Together
ChatList & ChatItem Together (part 2)
How To Retreive The List Of Chats
How To Render The List Of Chats
How To Use React Moment
Section Summary

Create A Real Time Messaging System

Introduction
Breaking Down Components
Our MessageView Component
How To Select A Chat
How To Select A Chat (part 2)
How To Display The Header
Our Footer Component
Add State To Footer Component
Our MessageBox Component
Messages Collection
Rendering Messages
Rendering Messages (part 2)
Rendering Messages (part 3)
Rendering Messages (part 4)
First Loop To Display Dates
Nested Loop To Display Messages
How To Send A Message
How To Send A Message (part 2)
How To Use withTracker For Real Time Communication
How To Scroll Automatically
How To Use React Flip Move
Find And Display The Last Message Of A chat
Sorting Chats

Create An Image Upload System

Introduction
Step #1 - Breaking Down Components
Our FABs Component
Our FABItem Component
Render FABItem Whithin FABs
Render FABs With State
Select A File
Select A File (part 2)
Our Modal Component
Show And Hide Modal Component
Display Selected File Whithin Modal Component
Images Collection
Upload An Image
Upload An Image (part 2)
Our MessageImage Component
Send A Picture Message
Send A Picture Message (part 2)
Fix The Content Of The Last Picture Message
Section Summary

Display The Correspondent's Profile

Introduction
Step #1 - Breaking Down Components
Our OtherProfile Component
Rendering The Header
Display The Avatar Component
Our Actu Component
Our ActuItem Component
Rendering OtherProfile Whithin Main Component
Close OtherProfile Component
Adjust Widths Dynamically
Having A Large Avatar Dynamically

Display Connected User's Profile

Introduction
Step #1 - Breaking Down Components
Our LeftSide Component
Our LSHeader Component
Display Avatar Component
Our LSForm Component
Showing And Hiding LeftSide Component
Writing In Input Fields
Controlled Input Fields
Fix The Issue
Display Overlay Within Avatar Component
Updating Profile Picture
Updating User' Profile In Real Time

View List Of All Users

Introduction
Step #1 - Breaking Down Components
Building The Static Version
Our UsersList Component
Our UserItem Component
Group Users In Alphabetical Order
Group Users In Alphabetical Order (part 2)
Rendering UserItem Whithin UsersList
Close UsersList Component
Start A New Chat
Fixing The Error

ImageViewer

Introduction
Step #1 - Breaking Down Components
Our BigOverlay Component
Build A Static Version Of ImageViewer
Show And Hide ImageViewer

Some Edits

Introduction
Hour Whithin MessageImage Component
Display The Number Of Unread Messages
Display The Number Of Unread Messages (part 2)
Display The Number Of Unread Messages (part 3)
Display The Favicon
How To Search For A User
Challenge #1
Our Popup Component
Showing Popup Component
Hiding Popup Component
Delete A Text Message
Delete A Picture Message
Some Other Challenges

Annexe #1 - React Hooks

useState
useEffect

Annexe #2 - Styled Components

How To Create A Styled Component
How To Use Variables
How To Create And Use A Theme

Annexe #3 - Meteor

What Is Meteor
Installation & Creating A Project
Meteor Project Organisation
Essentials To Know
Meteor Templates
Meteor Packages
Meteor Sessions
Meteor Reactive Programming
Meteor Collections
Meteor Publication & Subscription
Meteor Security & Methods
Render A React Component
Rendering A List With React & Meteor
Inserting A Document With Meteor From React
Deleting A Document With Meteor From React
Updating A Document With Meteor From React

Screenshots

React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Screenshot_01React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Screenshot_02React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Screenshot_03React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Screenshot_04

Reviews

Rossicler
August 8, 2021
I can't find any of the resources from each video, so it was hard to code along the video. I had to use the code from your repository, but it was already finished the project. Besides that it was a good course.

Coupons

DateDiscountStatus
2/15/2021100% OFF
expired

Charts

Price

React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Price chart

Rating

React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Ratings chart

Enrollment distribution

React Clone WhatsApp (w/ React Router, React Hooks) 2021 - Distribution chart
3723644
udemy ID
12/23/2020
course created date
2/14/2021
course indexed date
Bot
course submited by