Instagram SwiftUI Clone | MVVM | Cloud Firestore

Build a custom search bar in SwiftUI and design an explorer UI with a post grid and user list, then toggle views and hook Firebase for dynamic data.

Build a reusable post grid view in SwiftUI using a three-column lazy grid, with dynamic item width and image modifiers, then integrate it into the search and profile views.

Create a scrollable lazy VStack-based user list in SwiftUI, each cell showing a 48 by 48 image and a username with full name, aligned to the leading edge.

Demonstrate toggling between post grid and user list views in SwiftUI using state variable, binding, and ZStack; add cancel button and animated transitions to end editing via UIKit extension.

Implement navigation in SwiftUI by turning user list items and post grid images into navigation links that navigate to profile and feed views with labeled destinations.

Build the notification UI for the Instagram SwiftUI clone, featuring a notification cell with a user image, text, and a post image or a follow button in a scroll view.

Build a SwiftUI profile header with a circular image, user stats, and a conditional edit/follow button, then reuse the post grid view for the profile feed.

Finish the profile ui by adding a header and post grid, and implement dynamic user stats with a separate stat view and action buttons that adapt to the profile state.

Design the upload post interface with a plus photo button, post image, caption input, and share button. Use a UIKit wrapper for image selection in SwiftUI and manage image state.

Build a login and sign up UI in SwiftUI with a gradient background, reusable image picker, and seamless navigation between login and sign up screens, including forgot password functionality.

Tap to present an image picker, replace the plus photo with the selected image using two properties: the selected image and the post image, and update the registration view's ui.

Connect your Instagram SwiftUI app to Firebase as a backend, authenticate users with email and password, and store data in Cloud Firestore and images in Firebase Storage.

Build an authentication view model in mvvm that handles login, register, and sign out with Firebase authentication, Cloud Firestore database, and storage, wired via environment and observable objects.

Set up the root view to keep users logged in with a view model and environment object, switching between the login view and main interface based on user session.

Register a dummy user using email and password within a SwiftUI MVVM setup, leveraging an environment object view model to handle authentication with Firebase, errors, and a published user session.

Implement a log out feature by setting the user session to nil and signing out on firebase, using a shared view model instance to refresh the login view.

Upload the profile image to Firebase storage to obtain a download URL. Save the user's information in Cloud Firestore, including email, full name, username, uid, and profile image URL.

Log in with email and password using the auth view model to manage the user session and switch to the main interface, with a quick authentication recap.

Fetch all users from the app's database and display them in a SwiftUI list using an MVVM architecture with a search view model, observable object, and published users array.

Populate each user cell by passing a user object and displaying the username, full name, and profile image from its URL using Kingfisher SwiftUI, within an MVVM based flow.

Filter users with a search bar by lowercasing the query and checking if the full name or username contains it, updating results via a binding in SwiftUI MVVM.

Pass the user from the list into the profile view and header, render their image with Kingfisher, and use a current user check to show edit profile or follow options.

Load the currently logged-in user from the users collection, expose it as a published current user, and update the profile tab when the data loads.

Learn how to model followers and following with backend collections, update both when following or unfollowing, and use a profile view model in mvvm SwiftUI app.

Create a centralized user service to follow and unfollow users, upload follow data to the database, and update the UI only after backend completion, using an mvvm architecture.

See how the ui updates after following a user using mvvm, with an optional is followed boolean on the user model, published state, and a computed profile action button.

Learn to implement unfollow functionality and check if a user is followed in an Instagram SwiftUI clone using MVVM, with Firestore-backed following data, completion handlers, and UI persistence.

Upload a post in Instagram SwiftUI clone with the image uploader and caption, then display posts in the feed and search, filtered by owner and backed by a post structure.

Learn to fix upload flows in a SwiftUI Instagram clone by adding a completion handler, resetting the feed after post upload, and syncing tab navigation with a binding-driven selected index.

Build a custom text editor for captions in a SwiftUI Instagram clone, including a placeholder, binding, and a cancel action that resets to show the plus photo button.

Implement a cancel button next to the share button to reset the caption and post image, returning the user to the original plus photo screen in this SwiftUI editor workflow.