Flutter Instagram Clone Offline-First with Supabase, Firebase, PowerSync | Part 1/2

Hello there 👋 In this 23-hour tutorial, you are going to learn how to build an Instagram Clone with Flutter and Dart. We are going to start with some basic concepts and gradually move to the connection of Supabase and PowerSync services to enable real-time updates and ensure offline-first approach in our application. Also, Firebase with Remote Config to update sponsored posts in real-time, promoting your own content and Cloud Messaging to send notifications seamlessly to any device.

Key features:
📸 Offline-first capabilities
🔐 Authentication
🔄 Sync queued data
⚡ Real-Time Updates
📱 Custom Media Picker
✨ Stories Editor
💬 Real-Time & Offline Chat
📢 Sponsored posts with promoted content
✉️ Push-Notifications
🧱 Unique content-based blocks
📍 Dynamic routing
🚀 Performance & Scalability

Timestamps:
00:00 Intro & Demo
12:59 Project Setup
24:34 Application structure
36:54 Android and iOS setup
39:31 Todos example with packages
55:25 Supabase setup
01:03:53 PowerSync setup
01:15:58 Supabase+PowerSync client setup
01:47:14 iOS client setup fixes
01:49:31 Firebase setup
02:18:11 Clean up project
02:20:23 Upload Android keystore
02:27:30 Google sign in Android pre-setup
02:30:45 Google sign in iOS pre-setup
02:47:55 App flavor
03:08:35 Google Authentication
03:23:38 App UI assets
03:32:09 App Colors
03:33:01 Adaptive app theme
03:42:58 Reusable App Scaffold widget
03:44:42 Adaptive system UI overlay theme
03:45:38 Theme and styles extensions
03:50:55 Animated tappable widget
04:00:49 Adaptive system UI overlay theme
04:03:28 Login View
05:34:00 SignUp View
06:00:29 Password recovery View
06:35:57 App Snackbar messages
06:54:01 App Router
07:26:47 User Profile View
08:27:32 User Profile Settings
08:39:49 Custom media picker
08:53:47 Create media bottom sheet
09:00:50 App global loading progress
09:08:49 Create post View
10:09:52 Profile statistics preview
10:09:35 Profile statistics page
10:13:30 Profile followers tab
10:16:33 User profile list tile
10:25:19 Manage followers and followings API
10:35:29 Profile followings tab
10:36:08 Profile statistics page look
10:39:40 User profile avatar
11:00:53 User profile edit View
11:11:02 Post deign overview
11:13:28 Instagram reusable blocks
11:18:02 Post block model
11:20:35 Action block model
11:22:54 Post author model
11:24:30 Post large block
11:26:19 Unknown block
11:27:54 Mock Feed display
11:31:08 Post large view
11:43:42 Part 2

[DuffHuge]

After over 4 years with Flutter this is by far the best tutorial I have seen leaning into best practices and how to crush a project setup. Going to watch through this however as I've already picked up a few helpful hints. :P

[indibarsarkar]

So, technically it's better than the original Instagram:
1. It is offline-first unlike the original.
2. It isn't buggy like the original and is clean code.
3. It's multi-platform and doesn't need an online-first web version for Linux, Windows or Mac.
4. It requires lesser bandwidth than the original and is arguably better than the original performing on weaker network signals since it doesn't have to load everything everytime due to it's robust cache (I literally hate when my chats keep loading in the original. Reels are less prior in those conditions than texts although important. Which is dealt well with this offline-first approach).

And you are giving this teachings to all of us for free!! You have all my respect sir ❤️

[KhanAdnann]

Believe me this might seems to be another Instagram clone tut, but the kind of knowledge he has shared is just some next level. Awesome 🥂

[Paulo-by]

You went further and broke all the videos that came before you, this is a tutorial worth following to learn! If it's not too much to ask, I would like to create a video teaching how to create an admin panel to manage the data and users of this project, I think that's all that's needed to be able to create other applications in conjunction with this app

[Distx]

Literally the best Flutter tutorial/course on the earth. But not for beginners, you must accomplish some apps by yourself and have strong foundations!

Than you sir for your work.

[cabaucom]

Haven’t watched but 1 minute. Always appreciate new quality Flutter content so consider me subscribed.

[kareemmuhamedz]

This is the hardest tutorial I've been following.😰
I haven't seen anyone like you create a Flutter project that begins with custom packages, flavors, a bootstrap file, and secure keys and client IDs. I've never seen anything like this before. I'm actually tired and have to repeat each part of the video to understand it better, and I’m also doing more research on these new topics I've seen. But finally, I am so excited and hope to finish the two parts and learn even more awesome things.
Thank you 😍

[Animelover-hmmm]

What a great effort you have put in this project I can't imagine. Hat's off bro

[aboldy]

Thank you for this. I've been doing a few other tutorials but they are all very superficial and don't go deep into middle layer code so this is really useful and will help me a great deal. You do need to be selling this excellent content you could make a little pocket money from it I think. I'd happily pay for this quality of content.

[GigglesDose]

here is a tip for you, if you split the tutorials into many videos you will earn more. like make 10 videos of this part and 10 videos on other part more vies more money, for us easy to understand

[manohar.acharya]

Dude you are insanely crazy this is by far one of the best Instagram clone project tutorial I was looking for such projects where especially BLOC is used. I really admire the effort that you made for this 23hr log tutorial God bless you for spreading free education 🙏🔥

[mixxylikes]

Brother congrats. i dont know how youtube algorithm works but i just met your channel. Keep up the great work and dedication. Subbed

[yantech.]

This is the best Instagram Clone I ever see in YouTube platform. Big thank for your work Sir

[agneldominique]

The best tutorial on flutter... a must watch for every one... very impressive features to learn... a request to every leaner please share and promote him I am very new to flutter... i feel luck to have come across this amazing tut. though it is way above my skill set but now i now the goal.... like to add please show us how to further add more complex features and without breaking the functionality at least a very basic short video guide if not a long tutorial on the same application in 2 to 3 months down the road ... so people who followed keep coming back and from for more update...

❤❤❤🙏🙏🙏❤❤❤

[osylphx]

This is absolutely incredible and exactly what I need in order to level up my mobile development skillset! Thank you so much for putting in all this time and effort to create this amazing walkthrough for our benefit!

[Dreamain]

What a masterpiece. It's a masterpiece. Please do an x or thread clone next.

[jafar]

Wow. This is deep level stuff..! I thought I knew something about flutter until I saw this tutorial. Feels too much to take in, but I am going to finish it for sure, and come out as a better developer at the end. Great work brother,

[powerfull]

Привет, очень рад, что появился еще один канал где можно посмотреть кодинг на флаттере, да и еще таких огромных проектов. Удачи.

[Lukadcf]

Thank you I have learned so much from this video already especially how to create a good project foundation. I also want to let you know that after 8:27:27 the entire "User Profile Settings" chapter is a copy of the 10 minutes before that.

[abdullatifabdu]

Hi, what you have taught us is so much amazing,