Build Offline-First Instagram Clone with Flutter, Supabase, Firebase, PowerSync | Part 1/2
⭐️ Source code & Support: ezit.vercel.ap...
🎥 PART 2: • Ultimate Tutorial: Rep...
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
Пікірлер: 186
What a great effort you have put in this project I can't imagine. Hat's off bro
@EmilZulufovIT
3 ай бұрын
Thank you very much! I really want to share my knowledge with everyone for free, so I am finally glad to have an opportunity!
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 🥂
@EmilZulufovIT
26 күн бұрын
Thanks! I really put my souls into this project. I am glad you are enjoying
Haven’t watched but 1 minute. Always appreciate new quality Flutter content so consider me subscribed.
@EmilZulufovIT
3 ай бұрын
I am happy to share high-quality free Flutter tutorial with you guys! Enjoy watching it!
This is the best Instagram Clone I ever see in KZread platform. Big thank for your work Sir
@EmilZulufovIT
29 күн бұрын
Thanks so much!
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 🙏🔥
@EmilZulufovIT
26 күн бұрын
Thank you so much! I really put my heart into this free tutorial and tried my best to make it THE BEST free tutorial for Flutter developers. I guess I achieved it. Enjoy! More content is coming up ✨️
Brother congrats. i dont know how youtube algorithm works but i just met your channel. Keep up the great work and dedication. Subbed
@EmilZulufovIT
3 ай бұрын
Thanks! I am glad you liked this one!
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!
@EmilZulufovIT
3 ай бұрын
I was really looking forward to giving real-world developer experience for free, so you are fully equipped to create comprehensive applications! You are welcome!
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.
@aboldy
3 ай бұрын
I don't want to join as a monthly commitment on patreon but I would like do a once off donation, why doesn't patreon allow that
@EmilZulufovIT
2 ай бұрын
I am extremely happy you like this one!
@EmilZulufovIT
2 ай бұрын
Unfortunately, I don't have any other options where you can send support once, like a donation. For example, the buymeacoffe website is not supported in my country( but, if you wish, you can support me on pattreon with subscription and cancel it at any time! Thanks!
@EmilZulufovIT
2 ай бұрын
Finally, you can give me a one-time donation here: ko-fi.com/emilzulufov. Thanks!
@aboldy
2 ай бұрын
@@EmilZulufovIT excellent, I've sent my donation. I encourage others to do the same if they get value from this. Well done mate!
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
@EmilZulufovIT
Ай бұрын
Thanks for the tip! Appreciate it. I agree with the fact that it will be easier to understand for you and it'll make me more views. I'll definitely consider it!
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
@EmilZulufovIT
Ай бұрын
Thanks!
@GigglesDose
Ай бұрын
yes teach us
@younghaz1058
12 күн бұрын
We're you able to ? What's your channel name ?
Hi, what you have taught us is so much amazing,
@EmilZulufovIT
Ай бұрын
Thanks! I am pleased that you get value from this tutorial. That's exactly why I create those tutorials.
Why did you use both Supabase and Firebase?
Amazing work really, congrats !
Nice tutorial broo😍i think this channel will get at least5 millions subscribers , pls bro can you add some features in this app like how to see people who made likes on posts and reels like insta , full notification system like ( when someone like your post or someone started following you , and if people that i am following them share a post send me notification), lock profile , block someone from send me massage and see my postes, and add an admin app to control with posts and block accounts and verify accounts with blue mark like insta, it will be the best project with flutter and firebase and thank you for this type of tutorial ❤❤
@mazen-fi7rb
2 ай бұрын
+1
@EmilZulufovIT
2 ай бұрын
Thanks for those wonderful words ❤ I was planning to add these features that you have described, so it is planned, but not the #1 priority for me right now. If you wish to contribute to this project, you can make a feature request in my github repository so I can better track it. Thanks!
@bedosayd9714
2 ай бұрын
@@EmilZulufovIT OK broo but try to add this features as soon as possible after finsh your 1st priority, try to put this features 2ed priority 😅❤️
thank you for the awesome tutorial brother, i just don't know how you configured the signing capabilities, and bundle identifiers for the 3 different flavours in Xcode, Debug-production, Release-production, Profile-production and the same for staging and development thank again brother
@tagusanji
Ай бұрын
I see its called runner configurations, how do i make those brother
@tagusanji
Ай бұрын
is it done in the podfile?
@EmilZulufovIT
Ай бұрын
Thanks! It's completely explained in the video. Watch carefully. 2:06:32
Awesome first project man! Tks to share
@EmilZulufovIT
13 күн бұрын
I am happy to share it with all of you
yoo 😮 this is some omni man range stufffff 🙏🙏🙏
❤❤ It's full complete 🎉 Cover may part. I will learn bloc also
Good job bro.. i just started watching and i salute your effort.. hats off bro
@EmilZulufovIT
2 ай бұрын
You are welcome! I am glad you like it!
thumbs up with respect
@EmilZulufovIT
Күн бұрын
Thanks!
Window how to work it not run
keep going broooo
thank you so much for creating this awesome tutorial
@EmilZulufovIT
2 ай бұрын
You are welcome!
awesome bro.
@EmilZulufovIT
16 күн бұрын
Thanks, mate. Enjoy!
Awesome. Incrível 😮
Like this teach us shop like amazone ali express app with responsive design kindly , your tutorial teach us alot
Thank you for your efforts, great video
@EmilZulufovIT
2 ай бұрын
You are welcome 💎
Awesome.... ❤
Dear its about month, when your next project video will be uploaded, give us some update
@EmilZulufovIT
Ай бұрын
I've published a real-time video & audio calls app! You can check it out on my channel. The next big tutorial is still in the recording process. Just some patience.
1:55:39 Hello brother, at this moment I do not understand anything. What should I do? Help me
I am getting error in env.dev.dart file in package pls answer me to solve this
@EmilZulufovIT
Ай бұрын
If you carefully follow the tutorial, you should not encounter this error. This error says that you haven't generated the required files. For that, go in the env folder by running "cd packages/env." Then run this command to actually generate required files "dart run build_runner build." If you tried to run this command and no result, try to run first, "dart run build_runner clean, " and then "dart run build_runner build." If it still doesn't generate files, make sure that you created .env.dev file in the env package, and inside of the .env.dev file, you should create all the secrets and assign appropriate secrets to each of them. Hope it fixes the issue!
Error (Xcode): Flutter failed to write to a file at "/Users/chaliserabin/flutter_instagram_clone/build/ios/Debug-development-iphonesimulator/.last_build_id". Sir I got this issue how can I solve this
@EmilZulufovIT
2 ай бұрын
Make sure to leave an issue/bug request in my github repository. It's not relevant to discuss it here. Thanks!
keep it up mate
@EmilZulufovIT
2 ай бұрын
Bet!
1:58:42 I mean, which project did you choose?
This is awesome. Looking forward to more videos from you. Quick question: I tried to run the code on the web and it doesn't work. On Windows, singing up doesn't work. What other setups that I need to do to make it work on web and Windows? Thanks
@EmilZulufovIT
2 ай бұрын
Thanks! Currently recording something beautiful, in a few weeks, I will drop a new video. Unfortunately, this application is not intended to use on any devices except for Android and iOS. There is no possible way to run on any other platforms with this setup. It needs a complete rebuild to support other platforms.
It's incredible
What is it offline social media platforms
thankkkkkkkkkq maan pz sir keep up wow just wow
@EmilZulufovIT
2 ай бұрын
Thanks!
Hi Sir, I am following the tutorial step by step. When you got to setting up the supabase, how did you get the functions you used in the video
@EmilZulufovIT
13 күн бұрын
In the github repository of this project, go to "packages/databas_client," and inside, you can find "tables.sql" file containing all the functions, triggers and schemas.
this structure industrial standard??
@EmilZulufovIT
2 ай бұрын
Don't understand your question
@from_whatch
2 ай бұрын
@@EmilZulufovIT this code or folder structure industrial standard??
@EmilZulufovIT
2 ай бұрын
@@from_whatch I guess it is
I have issue , when register app on firebase out = lib firebase option file is created with this name not firebase option . dev or prod or stag
@EmilZulufovIT
Ай бұрын
Please make sure to go to the gitbug repository of this project and provide a detailed issue request so that I can help you. It will be much easier for me to understand or case.
Welcome
Please Make a Netflix mobile clone in the Next video And thank you so much for working so hard ❤❤❤
Hello ❤
bro i know only flutter.....what can i do next to build this instagram clone
@EmilZulufovIT
23 күн бұрын
Learn Dart basics and come back when you have a solid understanding of the core Dart. This tutorial is advanced and requires quite a lot of basic knowledge before watching it. It's not for beginners. Make sure to level up your basics and come back to this tutorial. It just takes time 💫
@Tamilanda_channel
23 күн бұрын
Bro I know dart also...apart from dart and flutter .....what can I do next
1:56:09 Brother, at this moment I do not understand anything, what should I do?
Hi Amil, I hope you are well. I am also actively building an application that has similar features as this clone using the same tech stack Supabase and Powersync but our approaches are different since I'm using functional programming and getx for state and other things. I like your way of approach though, I can tell you're an expert at this. Where can I contact you wherever needed?
@EmilZulufovIT
2 ай бұрын
Thanks! You can always reach me on my email: emilzulufov.commercial@gmail.com or instagram @zulu_em
@EmilZulufovIT
2 ай бұрын
All contact info you can find in my github
Make video of Amazon Clone
Brother, can you link this code please? 57:49
@EmilZulufovIT
Ай бұрын
For sure! You can find that it is in the github repository of this project that you can find on my website in the description for this video. Then, go to the packages/database_client, and here you can find the tables.sql file. Everything is included there. Just copy and paste. Good luck!
مرحبا ❤
1:08:36 Brother, how do I create an account on this site?
@EmilZulufovIT
Ай бұрын
My bad that I didn't show. I can't tell you exactly how to create it. Just Google, you can do it yourself
@Alioo310
Ай бұрын
1:10:37 How do I get this code?@@EmilZulufovIT
@Alioo310
Ай бұрын
@@EmilZulufovIT1:10:53 Brother, where can I get this code?
@EmilZulufovIT
Ай бұрын
Nowhere, my bad. Just write it by yourself. I'll add it to the github repository later
@Alioo310
Ай бұрын
@@EmilZulufovIT Can you add it now, thank you
nice
What is the vscode theme?
Which. State management?
@EmilZulufovIT
Ай бұрын
Bloc
Its Very very good, can you tell the design is responsive or not, if not kindly make video on it
@EmilZulufovIT
Ай бұрын
Thanks, man! Unfortunately, the design is not responsive and is intended only for mobile devices.
@GigglesDose
Ай бұрын
@@EmilZulufovIT have you any plan to make it responsive and in some other tutorial can you guide us how to create different types of user and assign permissions or roles accordingly like teacher will post test and student have only view and give the answers not to pist the test
WOW NICEEEE
@EmilZulufovIT
2 ай бұрын
Thanks!
Is it possible to follow this entire course without having to install and use very_good?
@EmilZulufovIT
2 ай бұрын
While it's possible to learn everything , following the entire course without using very good, the structure of the project is completely built using it, and flavors, such as production and development, are also created with it. Therefore, it's crucial to have it, but you can always alter what you want. Overall, I say yes, but you will have some difficulties sometimes, and in the end, you can potentially have some headaches
@paulooliveira3453
2 ай бұрын
@@EmilZulufovIT I understood. I will try my best to follow the entire tutorial, I have difficulty because I don't understand English well, but I will manage. You are simply amazing master! As soon as I can I will make a donation to you. I can hardly imagine the other future projects in Flutter that you will be able to create on the channel. A big hug master!
@EmilZulufovIT
2 ай бұрын
@@paulooliveira3453 Thank you so much! Keep learning and become successful!
@paulooliveira3453
2 ай бұрын
@@EmilZulufovIT Thank you very much.
There are many errors in the env Package it says, target of URl has't been generated
@EmilZulufovIT
2 ай бұрын
Hello! I appreciate you choosing my tutorial to watch! If you have any issues, please make sure to create an issue request in the github repository for this project. Thanks!
@BookBehindTheMovie
2 ай бұрын
@@EmilZulufovIT Thanks for answering, the Problem is that I can not run the app because of this Issue no matter what I do and I followed your steps precisely: packages/env/lib/src/env.dev.dart:3:6: Error: Error when reading 'packages/env/lib/src/env.dev.g.dart': No such file or directory part 'env.dev.g.dart'; ^ packages/env/lib/src/env.prod.dart:3:6: Error: Error when reading 'packages/env/lib/src/env.prod.g.dart': No such file or directory part 'env.prod.g.dart';
@BookBehindTheMovie
2 ай бұрын
@@EmilZulufovIT Thanks for answering me. Will you add the delete account function and other Settings in the Future. The app is almost perfect, it just to add some other functions specially for settings section
@EmilZulufovIT
2 ай бұрын
For now, I don't have a priority to add some extra features to the app. I will only maintain it, so everything is up-to-date and fresh. So, maybe in the future, I will add additional functionalities.
@EmilZulufovIT
2 ай бұрын
You need to run "dart run build_runner build." If it doesn't help, run before "dart run build_runner clean" and then the first command. Most importantly, make sure that you run these commands, being in the "packages/env " directory, not in the root. You can do it by running "cd packages/env" in the root of the app.
how run in android? Target file "lib\main.dart" not found. this get out
@EmilZulufovIT
Ай бұрын
flutter run -t lib/main_development.dart or specify here the desired flavor of main you want to run your app in.
Kindly make admin responsive version of this, after this this will be a complete package to develop a complete app
@EmilZulufovIT
17 күн бұрын
This is a clone of the social application. There is no point in an admin app.
@MaliksMop
14 күн бұрын
@@EmilZulufovIT Ok but dear tell us how to deploy the app or build apk file this project or some other which have dev stag and prod
Tu codigo al descargarlo, me lanxa mas de 10mil errores...
@EmilZulufovIT
29 күн бұрын
Run "flutter pub get"
@EmilZulufovIT
29 күн бұрын
Then, you will need to generate environmental variables by running the command "cd packages/env," then run the command "build run build_runner build." Before running this command, you should create .env.dev and/or .env.prod and/or .env.stg. files with secrets in the created files. If you fail to generate files, first run "dart run build_runner clean" and then "dart run build_runner build." Hope it helps.
Dear can you tell us to yo deploy this project or other any project on play store
@EmilZulufovIT
Ай бұрын
Hello! No, I haven't published this app in the Play Store.
@GigglesDose
Ай бұрын
@@EmilZulufovIT my point was tell us the method , a professional and secure way to publish the app on store
@GigglesDose
Ай бұрын
also tell us your next projects on this channel
How can I verify someone's account within my application?
@EmilZulufovIT
Ай бұрын
Bro, can you please create discussions in the github repository for each of your questions? It's not a relevant place to always discuss it here, so please.
@Alioo310
Ай бұрын
@@EmilZulufovIT I am very sorry, brother, but I want to know how to authenticate a specific person within my application. Thank you 🤍
Hello
It’s a very great video, but there is a lot of copy and paste from his repository, making it hard to follow.
@EmilZulufovIT
24 күн бұрын
Yes, I understand that. However, without those copies and pastes, this tutorial would last over 30-35 hours. It was mandatory to have
Make more videos
@EmilZulufovIT
2 ай бұрын
I am currently recording a new awesome video! Stay tuned
Sir can you teach me flutter from responsive design to good state management and I will pay for the course sir. As I got inspired by seeing this kind of video
@EmilZulufovIT
3 ай бұрын
You can learn all of that in this free tutorial. You don't need to pay for anything. If you want to support me, you can do it in my Patreon: www.patreon.com/EmilZulufov?
Hello brother, when I run the application, this problem appears to me. How do I solve it? Error: Gradle build failed to produce an .apk file. It's likely that this file was generated under C:\Users\Ali AHMED\flutter_thanki\build, but the tool couldn't find it.
@EmilZulufovIT
Ай бұрын
Hello my friend! Thanks for watching my tutorial. I hope you find it useful! Look, it's not kinda issue that you should be worried about. It is caused by multi flavors in the application, but everything is fine. You shouldn't worry about it. You can find apk file in the appropriate flavor - production or something.
@user-dy9lf2rp9s
Ай бұрын
@@EmilZulufovIT Thank you, my friend. I really enjoyed the learning clip. Ok, brother, where can I find the Apk file and how do I fix the error?
@EmilZulufovIT
Ай бұрын
@user-dy9lf2rp9s As I said, it's not an issue that you should worry about and try to fix. Instead of one apk file, 3 apk files were generated specifically for each flavor. I can't exactly say you where to find. Just Google it and you will find it easily. Simply search where to find apk file for multi flavors and you good to go.
@Alioo310
Ай бұрын
thank you brother 🤎@@EmilZulufovIT
@user-dy9lf2rp9s
Ай бұрын
@@EmilZulufovIT Thank you, brother. Can you give me the information so I can search for it on Google?
Do you develop in react native too?
@EmilZulufovIT
2 ай бұрын
No, I don't
Hello, can I try the application?
@EmilZulufovIT
2 ай бұрын
What do you mean try the application?
@Alioo310
2 ай бұрын
@@EmilZulufovIT Yes
1:58:42 My brother, at this time, which project has she chosen?
@EmilZulufovIT
Ай бұрын
What do you mean? Don't understand you, brother
@Alioo310
Ай бұрын
I mean, which project did you choose?@@EmilZulufovIT
@Alioo310
Ай бұрын
@@EmilZulufovITI mean, which project did you choose?
Эмиль брат, лучшее приложение на флаттере
@EmilZulufovIT
2 ай бұрын
Спасибо 💪 Старался преподнести что-то инновационное
@kanatkudaibergenov564
2 ай бұрын
@@EmilZulufovITзабегая вперёд, можно спросить? Для чего используется пакет very good cli
@EmilZulufovIT
2 ай бұрын
Он позволяет создавать flutter app, flutter package, dart package, и выполняет другие полезные функции. Почитай в официальных документация подробнее. В данном проекте он является основой всего, начиная от самого приложения, flavors, заканчивая packages и других вещами. Без него можно обойтись, но тогда без этого cli будет очень геморно с flavors и packages
@kanatkudaibergenov564
2 ай бұрын
@@EmilZulufovIT Спасибо большое
Brother, can I Pass the Supabase stage?
@EmilZulufovIT
Ай бұрын
Do you mean skip? If so, you can't, and why do you actually want to skip it? The whole application business logic is built on top of Supabase.
@Alioo310
Ай бұрын
@@EmilZulufovIT Yes, brother, I want to pass it, and I want Firebase instead. Is this possible?
@EmilZulufovIT
Ай бұрын
@Alioo310 I mean, you'll have to rebuild the entire business logic of the application by yourself. Whether it's possible to build this clone with UI and stuff with Firebase, you'll not have offline-first at all. If you can handle all of the required tweaks by yourself, you can try, but I strongly don't recommend
@Alioo310
Ай бұрын
@@EmilZulufovIT Ok, I heard people saying that when I use Supabase in my application and the user deletes my application, will he delete his account within my application?
@EmilZulufovIT
Ай бұрын
No, the account persists in the Supabase database. Don't worry
Qardaş Azərbaycanlısan?
@EmilZulufovIT
2 ай бұрын
I am from Kazakhstan
not a fix problem and part 'env.dev.g.dart'; red line error and dart run build_runner build try but not work please sir fix my problem
@EmilZulufovIT
Ай бұрын
If you carefully follow the tutorial, you should not encounter this error. This error says that you haven't generated the required files. For that, go in the env folder by running "cd packages/env." Then run this command to actually generate required files "dart run build_runner build." If you tried to run this command and no result, try to run first, "dart run build_runner clean, " and then "dart run build_runner build." If it still doesn't generate files, make sure that you created .env.dev file in the env package, and inside of the .env.dev file, you should create all the secrets and assign appropriate secrets to each of them. Hope it fixes the issue!
part "env.dev.g.dart this is not working sir _EnvDev class not found please sir help me
@EmilZulufovIT
Ай бұрын
In the terminal run, "cd packages/env," but make sure you are at the root of your project. Then run, "dart run build_runner build." Hope it solves your problem.
@findmusic1560
Ай бұрын
@@EmilZulufovIT not a fix problem and part 'env.dev.g.dart'; red line error and dart run build_runner build try but not work please sir fix my problem