Build Real-Time Chat App with SwiftUI & Firebase

Log in with your Google account, create a Firebase project named WhatsApp, and configure authentication, Firestore, and storage for future iOS integration.

Integrate Firebase into an iOS app by configuring the Firebase project, registering the app with the correct bundle ID, downloading and adding GoogleService-Info.plist, and adding dependencies via Swift Package Manager.

Learn how to initialize Firebase in a SwiftUI app, import Firebase Core, register the app delegate, and prepare to use authentication, storage, and Firestore.

Build a sign up view that collects email, password, and a display name for use as a chat username. Validate the form and sign up the user with Firebase authentication.

Update a user's display name by creating a profile change request, committing the changes, and reflecting the new name throughout the app via a model or extension.

Centralize the update display name logic in a single SwiftUI model, exposed as an environment object, and implement a main actor observable function that updates the Firebase user profile.

Create a login view with email and password, implement Firebase authentication for sign in and sign up, add basic form validation and navigation, and prepare to integrate Firestore and messaging.

Structure the app around a main view with a tab bar and Firebase auth-driven navigation between login and signup screens, routing authenticated users to the main view.

Build a SwiftUI navigation system by creating an app state with routes, using a navigation stack and path, and injecting the state to manage main, login, and signup screens.

Ensure after a successful sign-up the app navigates to the login screen by appending the login route to the app state, so the login view leads to the main screen.

Build the add groups user interface in a SwiftUI and Firebase chat app by creating a group list container and an add new group view with navigation and form validation.

Learn how to save a group to Firestore in a SwiftUI app: create a group model, convert to dictionary, add to the groups collection, and handle completion and document ID.

Fix a common xcode warning about info.plist containing no ui scene configuration dictionary by enabling multiple windows in the scene manifest and adding a scene configuration.

Fetch and display groups from the Firestore 'groups' collection in a SwiftUI app, converting snapshots to group models and updating the UI with a published groups array.

Build a group detail view in SwiftUI to write and send messages, saving them to a Firestore messages subcollection with real-time updates and async/await.

Model a chat message as a codable, identifiable struct with a document id, text, user id, display name, and optional photo URLs for Firestore storage in the groups messages collection.

Implement a real-time listener for chat messages within a selected group using Firestore, updating the messages array with new document changes and detaching when leaving the group.

Hook up chat for the group by calling the model's listen for chat messages on appear and detach on disappear with Firebase, and display them with chat message list view.

Build a chat message bubble interface in SwiftUI, featuring left and right aligned bubbles, display name, message text, date, and optional attachments, with a direction-based overlay arrow and color.

Detect the current user with Firebase auth and display their messages on the right in blue, others on the left in gray using edge alignment and spacers.

Learn to auto scroll to the latest message in a SwiftUI chat by using ScrollView and ScrollViewReader, with last chat message scrolling and animation.

Explore building a settings view to update display name and profile picture, with a placeholder image, photo options, camera or photo library, and a Firebase Auth powered guest display name.

Learn to implement a custom image picker in SwiftUI by wrapping UIImagePickerController via view controller representable, creating a coordinator, binding the image, and enabling camera or library input.

Learn to present a sheet with an image picker from the settings view, selecting photo library or camera, bind the selected image, and resize it for Firebase storage.

Resize profile images by selecting image picker, triggering onChange, using a UIImage extension to resize to 300 by 300, then convert to png data for Firebase storage and URL updates.

Upload a profile image to Firebase Storage using an extension, set up storage buckets, upload image data, and retrieve a download URL to update the user profile and UI.

Update the user's display name and profile photo url across all messages by running an update function that scans group documents, updates each user's messages, and reflects new info.

Enhance the chat interface by displaying profile photos for messages, adding a profile photo URL to chat messages, saving it to Firestore, and showing a default image when absent.

Create a real-time chat input in SwiftUI bound to group detail config for text and image data, with a plus button to pick or capture photos and send via closure.

Develop a user interface in the group detail view that presents camera or photo library options via a confirmation dialog and invokes an image picker.

Upload the selected image to Firebase storage, resize to 600 by 600, save the attachment photo URL, and insert it into the chat message to enable image previews.

Learn to build a preview image view for a real-time chat app with SwiftUI, handling a selected image and cancel action, and enabling image sending with overlays and animations.

Display attachments in the messages list by wiring the send message function to clear fields, unwrap attachment photo URLs, and render async images while adding loading indicators and avatar updates.

Implement a loading view and error view as an app-wide overlay driven by a global app state (idle or loading) exposed via environment object to show progress during sending messages.

Create an identifiable error wrapper and attach it to app state. Display errors via an error view presented as a sheet for sign up, login, and sign out.