Instagram Firestore App Clone | Swift 5 + iOS 14 | MVVM

Set up a feed user interface programmatically with a collection view. Initialize the layout, register the cell, and implement the data source methods.

Create a programmatic feed cell UI for an Instagram clone, adding a profile image and username button with constraints using helper extensions.

Finish the feed cell UI by implementing the post image view, like/comment/share buttons, and caption and time labels, then lay out with a stack view and auto layout anchors.

Build the login and signup UI for the Instagram Firestore app clone, including login and registration controllers, a navigation controller, and a gradient, logo, fields, and a stack view.

Create custom subclasses and extensions to reuse UI components, such as a text field with a placeholder and a button with attributed titles, reducing duplication across login and signup screens.

Learn to build a reusable registration page UI for an Instagram clone using Swift, including custom text fields, a plus photo button, gradient backgrounds, and navigation to the login screen.

Learn how to implement authentication view models and form validation to enable login and signup flows, updating user interface in real time with computed form validity and dynamic button states.

Finish form validation in the instagram firestore app clone by introducing an authentication view model protocol, adding full name and username, computing form validity, and enabling signup updates.

Select a profile photo with an image picker, handle the selection, update the plus photo button, and prepare for Firebase signup and login in the Instagram clone.

integrate firebase into the iOS project to enable email/password authentication and store posts, user data, and media in Firestore and Storage. set up cocoapods and initialize firebase in app delegate.

Learn to build an image uploader and authentication service to register users on Firebase, upload profile images and user data, and obtain the image download URL.

Authenticate users with Firebase using email and password, upload the profile image to storage, obtain the image URL, and store user data in Firestore under a uid document.

Configure the root view controller to bypass login for authenticated users and present login and sign up flow when needed, using Firebase authentication with logout and navigation to the feed.

Set up the profile collection view, register the profile cell and header, and implement data source and layout methods to display a 3-column grid with a header.

Finish the profile ui with a header, circular profile image, name label, edit button, and bottom toolbar, and prepare to fetch user data via api calls with a user model.

Fetch current user data from Firestore, model it with a custom user object, and populate the profile user interface using a user service and dictionary parsing.

Create a profile header view model to populate user data, configure the header UI, and load the profile image from a URL within an MVVM Swift workflow.

Learn to update the current user after authentication by using a weak authentication delegate, delegating to the main tab bar controller to fetch and refresh the profile across views.

Set up search controller as a table view to display users, register a reusable user cell, and use a stack view for username and full name beside a profile image.

Fetches all users from the Firestore database, maps documents to user objects, and displays them in a table view, showing usernames and full names in the Instagram clone.

Apply a hybrid MVVM approach by building a user cell view model and using a UI search controller to filter users by username or full name.

Implement follow and unfollow functionality in the Instagram Firestore app clone by adding is_followed logic, profile header delegation, and Firestore updates to followers and following collections.

Unfollow a user and refresh the UI in the Instagram Firestore app clone. Update the profile header with a didSet observer and completion to sync backend and UI.

Learn how to check if the current user follows another profile by querying the user following collection and returning a boolean via a completion handler, then update the UI accordingly.

Master image selector integration to upload posts, display a feed, and edit captions using a photo picker and cocoa pod, with privacy prompts on photo access.

Build an upload post ui in a dedicated upload post controller, featuring an image picker, photo view, a caption text view with a character count, and share and cancel controls.

Create a reusable custom input text view with a placeholder for captions and comments. Enforce a 100-character limit, show a live count, and hide the placeholder as you type.

Block the UI during post uploads with a static progress HUD, showing and dismissing a loading indicator while posting to Firestore, and end editing to polish the user experience.

Learn to fetch posts from Firestore via a post service, map documents to a post data model, and display them in a feed using a collection view and mvvm.

Create a post view model to populate captions and image URLs, display likes, and configure feed cells in the Instagram clone, using image caching for smooth scrolling.

Add and display post user data by using the owner uid to fetch the user’s username and profile image, stored in the post and shown in the feed with mvvm.

Learn to implement a pull-down to refresh in a feed, fetch and order posts by timestamp, and auto-refetch after uploading a post in an Instagram Firestore app clone.

Sort posts by timestamp in descending order to display the newest posts first, then refresh the feed after a post upload to show updated, chronologically ordered results.

Fetch a user's posts to update profile stats, render accurate post counts, and enable tapping a post to view it in a single-post feed using the existing post view model.

Create a comment UI for posts using a collection view, with a comment input, delegated actions from the feed cell, and navigation to a comments screen.

Set up the Instagram Firestore app clone, including profile image view, a label, and a custom input accessory view with a post button.

Fix UI bugs in the comment controller by setting the input accessory view white and enabling drag-to-dismiss, and outline a delegate-based posting flow for Firestore comments.

Upload comments to Firestore by building a comment object with text, timestamp, user profile image URL, and username, then save it under the post's comments collection.

Create a comment data model and fetch post comments from Firestore, ordered by timestamp descending, using the post ID, with a snapshot listener updating the collection view and view model.

Build a comment view model to populate each cell with profile image, username, and text, and dynamically size cells with a width-based size function and snapshot updates.

Navigate from a comment cell to the user profile by implementing didSelectItemAt, fetching the comment's uid with the user service, and pushing the profile controller.

Implement a post like feature in the Instagram Firestore app clone by delegating like actions from the feed cell to the controller, updating the database, and refreshing the UI.

Upload like information to Firestore by updating post likes and user likes collections, incrementing the post's like count, and updating the UI to show a red heart when liked.

Implement unlike post logic in a Swift MVVM Instagram clone by updating post and user likes collections and refreshing the UI according to like state.

Check if the user has liked each post using the post service, then configure the like button and did like state, and update the UI after fetching posts.

Demonstrate how a feed cell delegates like actions to the controller, updates post likes via the post service and two like collections, and refreshes the ui with mvvm didset observer.