Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development React

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

With Convenient, Amazing and Simple Technologies like Meteor, React Hooks, TypeScript and Styled Component
New
Rating: 4.5 out of 54.5 (1 rating)
891 students
Created by Julien Kisoni
Last updated 1/2021
English
English, Arabic, 
30-Day Money-Back Guarantee

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

  • Preview03:22
  • Installation Of Necessary Tools
    02:31
  • Section Summary
    00:46

  • Preview02:18
  • Clone The Boilerplate
    02:24
  • Step #1 - Break Down Login Component
    02:44
  • Routes And Theme In App Component
    10:47
  • Our FormLogin Component
    07:39
  • Our FormLogin Component (part 2)
    03:52
  • Our RightImg Component
    07:42
  • Step #2 - Static Version Of Login Component
    04:43
  • Step #3 And #4 - Add State
    05:11
  • Step #5 - Add Inverse Data Flow
    02:25
  • Few Words About Account & Password
    03:16
  • Create Dummy Users
    07:31
  • Create Dummy Users (part 2)
    05:34
  • User Authentication
    09:07
  • User Authentication (part 2)
    07:45
  • Section Summary
    01:44

  • Preview01:55
  • Step #1 - Breaking Down Components
    02:08
  • Our Left Component
    03:03
  • Our Right Component
    03:43
  • Rendering Left & Right Inside Main Component
    05:33
  • Our Header Component
    09:27
  • Our Header Component (part 2)
    11:26
  • Our Status Component
    06:58
  • Our SearchBar Component
    04:55
  • Our ChatList Component
    06:01
  • Create Dummy Chats
    11:10
  • Create Dummy Chats (part 2)
    03:27
  • Our ChatItem Component
    06:23
  • ChatList & ChatItem Together
    04:07
  • ChatList & ChatItem Together (part 2)
    05:07
  • How To Retreive The List Of Chats
    09:06
  • How To Render The List Of Chats
    02:59
  • How To Use React Moment
    08:46
  • Section Summary
    01:13

  • Preview02:19
  • Breaking Down Components
    02:07
  • Our MessageView Component
    05:19
  • How To Select A Chat
    06:34
  • How To Select A Chat (part 2)
    06:59
  • How To Display The Header
    04:35
  • Our Footer Component
    05:38
  • Add State To Footer Component
    03:12
  • Our MessageBox Component
    04:44
  • Messages Collection
    10:24
  • Rendering Messages
    04:19
  • Rendering Messages (part 2)
    05:37
  • Rendering Messages (part 3)
    04:44
  • Rendering Messages (part 4)
    05:32
  • First Loop To Display Dates
    06:48
  • Nested Loop To Display Messages
    08:21
  • How To Send A Message
    07:11
  • How To Send A Message (part 2)
    05:27
  • How To Use withTracker For Real Time Communication
    10:19
  • How To Scroll Automatically
    04:19
  • How To Use React Flip Move
    03:53
  • Find And Display The Last Message Of A chat
    04:19
  • Sorting Chats
    05:03

  • Preview01:33
  • Step #1 - Breaking Down Components
    02:24
  • Our FABs Component
    03:04
  • Our FABItem Component
    05:04
  • Render FABItem Whithin FABs
    05:43
  • Render FABs With State
    08:06
  • Select A File
    04:40
  • Select A File (part 2)
    03:09
  • Our Modal Component
    08:04
  • Show And Hide Modal Component
    08:05
  • Display Selected File Whithin Modal Component
    06:29
  • Images Collection
    07:09
  • Upload An Image
    05:24
  • Upload An Image (part 2)
    07:40
  • Our MessageImage Component
    07:49
  • Send A Picture Message
    10:44
  • Send A Picture Message (part 2)
    07:23
  • Fix The Content Of The Last Picture Message
    03:34
  • Section Summary
    00:59

  • Preview01:07
  • Step #1 - Breaking Down Components
    01:23
  • Our OtherProfile Component
    04:44
  • Rendering The Header
    03:17
  • Display The Avatar Component
    03:30
  • Our Actu Component
    05:20
  • Our ActuItem Component
    06:20
  • Rendering OtherProfile Whithin Main Component
    09:10
  • Close OtherProfile Component
    01:59
  • Adjust Widths Dynamically
    05:34
  • Having A Large Avatar Dynamically
    05:36

  • Preview01:19
  • Step #1 - Breaking Down Components
    01:56
  • Our LeftSide Component
    05:12
  • Our LSHeader Component
    03:11
  • Display Avatar Component
    01:03
  • Our LSForm Component
    05:36
  • Showing And Hiding LeftSide Component
    03:41
  • Writing In Input Fields
    03:16
  • Controlled Input Fields
    06:51
  • Fix The Issue
    03:36
  • Display Overlay Within Avatar Component
    08:32
  • Updating Profile Picture
    07:54
  • Updating User' Profile In Real Time
    01:52

  • Preview01:18
  • Step #1 - Breaking Down Components
    01:54
  • Building The Static Version
    03:24
  • Our UsersList Component
    04:05
  • Our UserItem Component
    05:19
  • Group Users In Alphabetical Order
    05:55
  • Group Users In Alphabetical Order (part 2)
    04:17
  • Rendering UserItem Whithin UsersList
    05:39
  • Close UsersList Component
    02:28
  • Start A New Chat
    06:30
  • Fixing The Error
    08:55

  • Preview01:01
  • Step #1 - Breaking Down Components
    01:10
  • Our BigOverlay Component
    02:19
  • Build A Static Version Of ImageViewer
    04:24
  • Show And Hide ImageViewer
    08:59

  • Preview00:44
  • Hour Whithin MessageImage Component
    00:56
  • Display The Number Of Unread Messages
    06:23
  • Display The Number Of Unread Messages (part 2)
    06:49
  • Display The Number Of Unread Messages (part 3)
    02:27
  • Display The Favicon
    01:34
  • How To Search For A User
    06:27
  • Challenge #1
    00:28
  • Our Popup Component
    04:27
  • Showing Popup Component
    05:25
  • Hiding Popup Component
    02:03
  • Delete A Text Message
    09:26
  • Delete A Picture Message
    03:19
  • Some Other Challenges
    01: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

Instructor

Julien Kisoni
Infoprenneur et Développeur web et mobile
Julien Kisoni
  • 4.1 Instructor Rating
  • 388 Reviews
  • 7,327 Students
  • 5 Courses

Depuis tout petit j’étais créatif et voulais être ingénieur. Après mes études secondaires, j’entre à l’université pour suivre des études de Génie civile. Mais je ne comprenais pas pourquoi toutes mes idées de création ou d’innovation était toujours liée à la création d’application mobile. Alors contre toute attente je décide de quitter la fac de Génie civile pour entre en fac d’informatique de gestion. Et en même temps je suis de dizaines de vidéos sur YouTube pour apprendre à programmer. Et grâce à Google je trouve un tas d’Ebook gratuit sur la programmation.

J’ai commencé par la programmation web. Résultat ? J’adorait ça ! Je pouvais apprendre à mon rythme sans même quitter ma chambre. Autre chose, les cours à l’université commençaient à m’ennuyer. Je trouvais les profs lents et je me rendais compte que je commençais à les surpasser. Puis un jour, je fais une recherche sur YouTube : « comment créer une application mobile » et je tombe sur une vidéo de PrimeFX qui expliquait en quelque sorte que l’on pouvait aussi créer des applications mobiles hybrides (avec les technologies du web : HTML, CSS & JavaScript). Pour moi c’était le déclic. Avec mes connaissances en développement web je pouvais créer des applications mobiles cross-plateformes. Je continuais à suivre des vidéos sur YouTube et très vite, ça ne me suffisais plus. C’est alors que je découvre Udemy en suivant des formations en français et en anglais. A ce jour sans même avoir eu à sortir de chez moi j’ai pu apprendre divers Frameworks et librairies JavaScript : Angular, Ionic, React, React Native, Meteor. Sans oublier Typescript, NodeJS, Loopback, MongoDB, Git etc. Apprendre à coder à partir de chez soi c’est possible. Et je m’engage à partager toute mon expérience avec vous.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.