SwiftUI WhatsApp Clone | MVVM | Cloud Firestore | iOS 15

Build the main tab view in swiftui by wrapping a tabview in a navigation view, adding tabs for chats, channels, and settings, and creating separate views for each section.

Learn how to display a dynamic navigation title for each tab in SwiftUI by using a stateful selected index, tab tags, and on-tab gestures.

Design a SwiftUI settings page with a header, stacked layout, and reusable setting cells, featuring a log out action and a plan for dynamic data via a view model.

Model settings as an iterable enum and map each case to a title, image, and background color with a view model for accounts, notifications, and stored messages.

Learn to architect the edit profile view in a SwiftUI MVVM workflow, using a settings-driven view model, navigation links, and stacked layouts (zstack, vstack, hstack) to build the UI.

Build the edit profile view in SwiftUI, including a profile photo, name field, status, and a navigation link to the status page, with plans for an image picker.

Build a status selector view in SwiftUI for the WhatsApp clone with a scrollable vertical stack of options, a leading-aligned VStack, and an enum-driven status cell.

Build an mvvm-based status selector in SwiftUI by modeling statuses as an integer enum with a status view model for each cell, persisting selections across screens.

Learn how to select a user status in a SwiftUI app using MVVM, with a status view model, published status, and view updates reflected across the UI.

Learn to implement an image picker in SwiftUI by bridging UIKit with a UIViewControllerRepresentable, using a coordinator and a binding to update the selected image.

Learn to load a selected image into the profile image in SwiftUI by bridging a UI image to a SwiftUI representable, updating on image picker dismissal.

Build the conversations view ui for the chat screen using a zstack with a bottom floating button and a scrollable vstack of chats and a sheet to select a user.

Build the start new message view in a SwiftUI chat app by reusing the conversation cell and creating a separate user cell for a list with a custom search bar.

Learn to start a chat by selecting a user, dismiss the selection, and navigate to the chat view using a binding-driven empty navigation link that passes the selected user.

Build a custom search bar in SwiftUI by overlaying a magnifying glass on a text field, manage editing with a cancel button, and implement a keyboard dismissal extension.

Build a custom chat bubble and message view in SwiftUI using a UIBezierPath shape that toggles blue for current user and gray for others, with profile images.

Build a SwiftUI chat screen with a vertical scroll of messages in a leading-aligned stack, plus a sticky input view, navigation to chat view, and in-line title with top padding.

Create a reusable custom input view in SwiftUI for chat, with a text field and send button, usable in two chat screens. Bind input and pass a send action.

Build a mock chat with a message model and chat view model in SwiftUI, using an observable object and published messages to drive the UI and append new messages.

Set up Firebase in a SwiftUI project using Swift package manager. Enable email and password authentication and configure Cloud Firestore and Storage with the Google service plist.

Set up Firebase with project using the Swift package manager and build an authentication view model to log in, sign up, and route to main interface based on sign-in status.

Learn how to register a user with Firebase authentication by passing email, password, fullname, and username through the authentication view model.

Save user information to Cloud Firestore after authentication by creating a data dictionary with email, username, and full name, and writing it to the users collection using the Firebase UID.

Create a SwiftUI profile photo upload UI using MVVM, prompting users to select an image with a reusable image picker and preparing upload to Firebase storage and Cloud Firestore.

Route sign-up users to the profile photo screen after authentication, ensuring both authentication and data save complete before uploading their photo to the firebase storage bucket.

Upload a profile photo to Firebase Storage using a reusable image uploader, convert the UI image to JPEG data, and save the image URL to the current user's Firestore document.

Fix the authentication view model by using a single shared environment object across login, registration, and profile photo views, enabling centralized Orfeu data and successful Firebase image uploads.

Configure the app to open to the correct interface based on login state using a shared Orfeu model, environment object, and firebase user session.

Learn to implement login and logout flows in a SwiftUI MVVM app using a shared Orfeu model and firebase authentication to toggle the main interface and login view.

Fetches the logged-in user's data from Firestore's users collection by UID, then uses it to populate the profile image and username on the settings page.

Create a user data model in SwiftUI to map Firestore data into a usable user object, including id, username, full name, email, and profile image for the settings screen.

Populate the settings view with a user object fetched from Firebase, wiring mvvm and using the decoded protocol with Firestore Swift library.

Use Kingfisher to load and cache the user's profile image from a URL. Fix the login bug by re-fetching the user after sign-in to update the profile display.

Create a new message view model to fetch all users from Firebase, map documents to user objects, and display them in a list to start chats with a selected user.

Select a user from the list to start a chat, pass that user into the chat view with state and binding, and see real-time messages display.

Explore the messaging backend architecture for a SwiftUI chat app, detailing a message object with from id, to id, text, timestamp, and read status, and per-user Firestore conversations.

Fix the self-chat bug by filtering the users list to exclude the current user, via client-side or Firestore filtering, then reconfigure the message model with fromID, toID, text, and timestamp.

Learn how to send a chat message by updating both users' message lists and the recent message, using Firestore with current user id, chat partner id, and a message document.

Fetches the current user's messages with a chat partner from Cloud Firestore, using MVVM in SwiftUI for iOS 15, mapping documents to message objects for display.

Attach user objects to non-current messages. Expose profile image URLs via the view model and render them with Kingfisher after sorting messages by time.

Learn to load messages in real time by using a Firestore snapshot listener and sorting with timestamp to show the most recent messages at the bottom, not the top.

Learn to update Firestore's recent messages by overwriting the latest message in a per chat partner document, using a subcollection under messages and set data during send and receive.

Fetch recent messages from Firestore using a conversations view model in a SwiftUI MVVM app, updating the UI with the latest messages and associated user data.

Fetch the chat partner for each recent message and load their profile image and full name into an observable message view model for the conversation cell.

Refactor the SwiftUI MVVM design by creating a conversation cell model and a dedicated view model to fetch user data, then pass the user to the chat view.

Update recent messages in real time by fetching recent messages on chat view appearance, ensuring the conversations list stays in sync with the chat view.