Learn Ionic React By Building a WhatsApp Clone

Name: Learn Ionic React By Building a WhatsApp Clone
Rating: 4.3 (47 reviews)

This course takes a practical approach to learning Ionic framework for React by buidling a WhatsApp clone

Created byFikayo Adepoju

Last updated 11/2020

English

What you'll learn

Scaffold a new Ionic React application using the Ionic CLI tool
Design User interfaces with Ionic React components
Manage state in Ionic React applications
Navigate between pages
Work with the Ionic Lifecycle API
Add custome styles to Ionic components and Dynamically apply styles to components
Use native device features using Capacitor APIs

Course content

7 sections • 29 lectures • 5h 44m total length

Introduction2:26

Prerequisites5:14
Scaffolding the Application11:58
Upgrade the Ionic CLI to the latest version and scaffold a WhatsApp clone with Ionic React. Serve the app in a browser and convert TSX to JavaScript.
Setting up State Management16:29
Creating the Chat Menu13:07
Create a WhatsApp-like chat menu in Ionic React by configuring the top navigation tabs, renaming charts to status and calls, and styling background, colors, and borders for the active tab.
Setting up Firebase Cloud Firestore for the Backend4:34
Defining the Users and Chat Data Model3:10
Seeding the Users Database16:24
Creating a Utility module for Helper functions5:54
Create a utility module to house pure helper functions, including a getToday function that uses moment to return the current date in year-month-day format, with a test in node.

Defining Authenticated and Non-authenticated states8:55
Define authenticated and non-authenticated states for a WhatsApp clone with a passcode login, then persist user data in local storage and sync with state.
Setting up the project to connect to Firebase4:39
Login with Passcode30:09
Build a passcode login for a WhatsApp clone using Ionic React, implementing authentication, session-based conditional rendering, and a responsive UI with state and local storage.
Login with Passcode - Part 214:57
Building the Contact List UI8:59
Listing Contacts from User data8:05

Scaffolding the Chat page13:23
Navigating from the Contact List to the Chat Page28:59
Building the Message Box20:11
Sending messages14:26
Learn to implement send message functionality in an Ionic React WhatsApp clone by saving messages to a cloud store collection with a random message_id generated by a random string generator.
Displaying Messages19:46
Creating a ChatMessage Component18:40
Distinguishing Sent and Recieved Messages in chat thread13:41
Displaying the last chat message on chat tabs13:21

Requirements

Nodejs Installed
Ionic CLI installed (preferrably the latest version)
Basic understanding of React

Description

This course takes a practical approach to learning Ionic framework for React by helping you develop a hands-on experience building a clone of the popular WhatsApp instant messaging application.

Through this course, you will get to implement core WhatsApp features like:

User sign in to the application
Listing user contacts
Real-time messaging between users and many more

You will also be implementing interesting features like sending images within the chat thread by taking a picture with the camera or picking an existing image in your gallery and displaying notification bubbles for new messages.

Who this course is for:

Web developers who want to build mobile applications
Web developers who want to build Progressive web applications
Ionic developers who want to switch to using React
React Native users who would like another option for building mobile applications
Native mobile app developers who would like another development option

Learn Ionic React By Building a WhatsApp Clone

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Project Setup8 lectures • 1hr 17min

Listing Chat Contacts6 lectures • 1hr 16min

Sending Chat Messages8 lectures • 2hr 22min

Sending Media messages3 lectures • 27min

Notifications and Deployment2 lectures • 19min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: