Instagram clone with Android Jetpack Compose, Firebase, MVVM

Lay the foundations for an mvvm architecture with hilt to inject Firebase Authentication, Firestore, and Firebase Storage into the view model of an Instagram clone.

Create the sign up screen as the first authentication step and wire it into navigation. Use a sealed destination with signup route, nav host start destination, and connect the view model via Hilt.

Build a signup screen layout in Jetpack Compose featuring a logo, username, email, and password fields, a sign up button, and login link, with a scrollable column and saveable states.

Outline signup requirements: username uniqueness, Firebase auth validation, store a Firestore user profile, central retrieval via ViewModel, show a spinner, and startup sign-in check.

Demonstrates a signup flow with Firebase Firestore and MVVM, including a user data model, to map conversion, and a username uniqueness check before user creation.

Explore implementing a single-use event wrapper for error handling in a Jetpack Compose MVVM app, displaying one-time toasts via a reusable notification composable and Firebase signup scenarios.

Implement a create or update user profile function in Firestore, using the current user's uid and fields like name, username, bio, and image URL, updating or creating as needed.

Implement get user data from Firestore using uid, handle success and failure with in-progress flags and a pop up notification, and update user data on startup when signed in.

Add a common progress spinner on the signup screen using a composable driven by the in progress flag, centering a circular progress indicator over a full-screen box.

Navigate between login and signup screens using a nav controller in Jetpack Compose, with a navigate function that pops up to the destination and launches single top.

Develop a login screen UI in Android Jetpack Compose with email and password fields, keyboard-aware scrolling, focus management, and a ViewModel login flow to sign in an existing user.

Implement the login screen function to sign in with email and password, validate inputs, and manage progress state. Show login success and retrieve user data, then prepare navigation after authentication.

Automates the user flow from authentication to the feed screen by checking Firebase login status and navigating with a nav controller in an MVVM Jetpack Compose app.

Learn to implement a custom bottom navigation in Jetpack Compose for an Instagram clone, linking feed, search, and my posts with a nav controller in mvvm architecture.

Connect the my posts screen to the view model to fetch user data and show loading state. Build a profile header with posts, followers, following, and an edit profile button.

Build a reusable common image composable with a loading spinner and placeholder, then create a user image card showing the profile image or placeholder, with an add button and Firebase.

Implement a loading spinner on the my post screen of the Instagram clone, using the isLoading flag and a ViewModel data fetch to show feedback during retrieval.

Build a profile screen that updates user data via the IG ViewModel, with name, username, and bio fields, and supports back, save, and logout actions.

Implement on-save functionality to update name, username, and bio via the create or update profile function, keeping the image URL unchanged, and verify updates in the Firebase backend.

Upload profile and post images with a view model and Firebase storage, updating profile data via the image download URL and a profile image UI with an activity result launcher.

implement logout in the profile screen by resetting the view model data, signing out, and triggering a logged out event, then navigate to the login screen to complete authentication.

Create a new post screen that lets users select an image, add a description, and navigate to the post using an encoded image uri.

Create the new post screen with a top bar, image preview, and description input, using remember state and focus management, and a VM-driven Firebase storage upload with a progress spinner.

Define a post data structure, upload the image, and save post metadata (id, user info, image, description, time) to Firebase Firestore via the ViewModel.

Retrieve posts from Firebase Firestore in the ViewModel, manage posts state and refresh progress, convert documents to post data, and sort by time for display.

Learn to display user-created posts from Firestore in a three-column grid using a post row model inside a lazy column, with loading, empty state, and click handling.

Design and navigate to a single post screen by passing post data through the navigation backstack using parcelable, enabling display of post description, creator, and likes.

Build a single post screen with a top back button, user header, post image, and a likes area and description using nullable data and a follow placeholder in Jetpack Compose.

Address two technical debt items by adding a non-null likes field to posts and implementing a batch update to refresh all posts with the updated user image in Firestore.

Split post descriptions into lowercase keywords and filter out filler words to enable Firestore-based search. Store these keywords with each post on creation and use them to power search screen.

Implement search posts functionality with Firestore by querying the posts collection and updating mutable states in the view model to drive UI, including a loading progress indicator and error handling.

Implement a search screen in an Android Jetpack Compose Instagram clone, with a hoisted search term, a search bar, a posts list, and navigation to a post via MVVM.

Implement follow and unfollow in the Instagram clone using Jetpack Compose and Firebase, updating the following list and single post screen, paving the way for the upcoming feed screen.

Implement the feed screen with a personalized feed for followers and a generic feed for non-followers, using a view model to manage post data and loading state.

Create a feed screen with a top user image and a single-column post list in jetpack compose, loading personalized posts from the view model and showing a loading spinner.

Implement like functionality by toggling the current user's id in the post's likes, update Firestore, and refresh the post data; default to the feed and plan a double-tap animation.

Implement a like animation in a Jetpack Compose composable, animating a heart between small and large sizes with a spring transition. Double-tap triggers a red or gray heart over images.

Implement a double-tap like feature in a Jetpack Compose feed, showing one-second like and dislike animations via coroutines, and update the view model and backend on each tap.

Implement comment functionality for posts by creating a comment data model and a create comment function in the view model, saving new comments to Firebase Firestore.

Implement navigation for the comments screen by passing a post id in the route, wiring a comments composable, and enabling navigation from the single post screen.

Create a comment UI in Instagram clone with jetpack compose, featuring a text field and a send button that creates a comment for a post and stores it in Firestore.

Implement getComments(postId) in the IG view model to fetch and sort comments by timestamp from Firestore's comments collection, display them on the single post screen, and refresh after new comments.

Build a comments screen for an Instagram clone. Display a centered progress spinner, an empty state, and a lazy column of CommentRow items for username and text.

Update the my posts screen to display posts count, following count, and fetch followers via a backend query, wiring results to the view model for live updates.

Wrap up the Instagram clone built with Android Jetpack Compose, Firebase, and MVVM, reviewing implemented screens like login, my post, edit profile, search, feed, single post, navigation, and Hilt integration.

Conclude by using the resulting application as a portfolio example, continuing to add features, and sharing or publishing it for personal use.