Learn Ionic React By Building a WhatsApp Clone

Learn to set up your environment for an ionic react course by installing node.js, the ionic cli, and npm, then build a whatsapp-like chat app with media, location, and notifications.

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.

Build a lightweight state management utility with the React Context API, featuring an initial state, a reducer function, and a provider to share and mutate app data across components.

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.

Set up Firebase Cloud Firestore as the backend for your WhatsApp clone by creating a Firebase project, selecting a region, and enabling the database in test mode.

Define the users and messages data model for a WhatsApp clone in Firebase. Outline fields like message id, user id, name, passcode, avatar, last seen, channel, type, content, and timestamp.

Seed the firebase database by creating a users collection and loading seven user documents from a data file, then seed each user and capture ids.

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.

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.

Learn to set up an Ionic React WhatsApp clone by installing Firebase library, initializing app, and configuring with project ID and database URL to access and interact with user data.

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.

Enable passcode login, show loading, query Firebase Firestore for the user by passcode, then dispatch a mutation to set user data in state and local storage, loading the chat screen.

Build the contact list UI for the WhatsApp clone using Ionic React, showing avatar, chat partner name, and last message preview in a clean list.

Extract the chat item into its own component and render the user's contacts on the chat screen, looping over user.contacts to display each contact's avatar and name with a key.

Learn Ionic React by building a WhatsApp clone, scaffold a chat page that opens on user click, showing avatar and name with a message input and send button.

Navigate from the contact list to the chat page, hiding the top tabs during chat with a state-driven mutation and restore them when returning to the list.

Learn to build a WhatsApp-style message box in an ionic react app, including emoji, text input, media clip, and a send button.

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.

Display chat messages by subscribing to Firestore to pull messages between the current user and the chat partner, using a channel by user IDs and live updates.

Learn Ionic React by building a WhatsApp clone, create a chat message component, style messages with distinct colors for sender and receiver, display timestamp using a utility function.

Distinguish sent and received messages in a WhatsApp-style chat by styling bubbles based on the logged-in user, using right green for you and left white for others.

Learn to display the last chat message on each chat tab by subscribing to messages between the current user and contacts and querying the messages collection in descending time order.

Learn to enable image sending in an Ionic React WhatsApp clone by integrating Capacitor camera, installing Ionic PWA Elements, and implementing get image to capture or select photos.

Learn to send image messages in a chat by extending the send message function to handle text and media, using base64 images for demonstration in a WhatsApp clone.

Learn to render image messages in a WhatsApp clone app built with Ionic React by converting base64 media data to a usable image source and displaying it within chat messages.

Create a new-message notification bubble on the chat item by tracking last and previous messages with a snapshot and useEffect, incrementing the count and displaying a green Ionic badge.

Deploy production build of the Ionic React WhatsApp clone to Firebase hosting, authenticate with Firebase tools, initialize, set the build as the public directory, and deploy to the cloud.

Review the journey through the Ionic React course, implementing WhatsApp-like features, using camera and file system access to send media, and deploying the app to Firebase.