Video není dostupné.
Omlouváme se.
Build Offline-First Instagram Clone with Flutter, Supabase, Firebase, PowerSync | Part 1/2
Vložit
- čas přidán 17. 08. 2024
- ⭐️ 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
What a great effort you have put in this project I can't imagine. Hat's off bro
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 🥂
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.
I am happy to share high-quality free Flutter tutorial with you guys! Enjoy watching it!
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 🙏🔥
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 ✨️
This is the best Instagram Clone I ever see in CZcams platform. Big thank for your work Sir
Thanks so much!
Brother congrats. i dont know how youtube algorithm works but i just met your channel. Keep up the great work and dedication. Subbed
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!
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!
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
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!
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.
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
I am extremely happy you like this one!
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!
Finally, you can give me a one-time donation here: ko-fi.com/emilzulufov. Thanks!
@@EmilZulufovIT excellent, I've sent my donation. I encourage others to do the same if they get value from this. Well done mate!
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
Thanks!
yes teach us
We're you able to ? What's your channel name ?
Hi, what you have taught us is so much amazing,
Thanks! I am pleased that you get value from this tutorial. That's exactly why I create those tutorials.
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 ❤❤
+1
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!
@@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 😅❤️
Why did you use both Supabase and Firebase?
Amazing work really, congrats !
❤❤ It's full complete 🎉 Cover may part. I will learn bloc also
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
I see its called runner configurations, how do i make those brother
is it done in the podfile?
Thanks!
It's completely explained in the video. Watch carefully. 2:06:32
keep going broooo
Awesome first project man! Tks to share
I am happy to share it with all of you
Good job bro.. i just started watching and i salute your effort.. hats off bro
You are welcome! I am glad you like it!
yoo 😮 this is some omni man range stufffff 🙏🙏🙏
Awesome. Incrível 😮
Like this teach us shop like amazone ali express app with responsive design kindly , your tutorial teach us alot
thumbs up with respect
Thanks!
awesome bro.
Thanks, mate. Enjoy!
thank you so much for creating this awesome tutorial
You are welcome!
Window how to work it not run
Awesome.... ❤
Thank you for your efforts, great video
You are welcome 💎
1:55:39 Hello brother, at this moment I do not understand anything. What should I do? Help me
Dear its about month, when your next project video will be uploaded, give us some update
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.
What is it offline social media platforms
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
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
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
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.
Welcome
Please Make a Netflix mobile clone in the Next video And thank you so much for working so hard ❤❤❤
keep it up mate
Bet!
I am getting error in env.dev.dart file in package pls answer me to solve this
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
Make sure to leave an issue/bug request in my github repository. It's not relevant to discuss it here. Thanks!
Hello ❤
1:58:42 I mean, which project did you choose?
مرحبا ❤
Make video of Amazon Clone
thankkkkkkkkkq maan pz sir keep up wow just wow
Thanks!
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
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.
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?
Thanks! You can always reach me on my email: emilzulufov.commercial@gmail.com or instagram @zulu_em
All contact info you can find in my github
1:56:09 Brother, at this moment I do not understand anything, what should I do?
1:08:36 Brother, how do I create an account on this site?
My bad that I didn't show. I can't tell you exactly how to create it. Just Google, you can do it yourself
1:10:37 How do I get this code?@@EmilZulufovIT
@@EmilZulufovIT1:10:53 Brother, where can I get this code?
Nowhere, my bad. Just write it by yourself. I'll add it to the github repository later
@@EmilZulufovIT Can you add it now, thank you
this structure industrial standard??
Don't understand your question
@@EmilZulufovIT this code or folder structure industrial standard??
@@from_whatch I guess it is
what vscode extension used in 4:18:49
It's a custom Flutter snippet.
bro i know only flutter.....what can i do next to build this instagram clone
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 💫
Bro I know dart also...apart from dart and flutter .....what can I do next
Kindly make admin responsive version of this, after this this will be a complete package to develop a complete app
This is a clone of the social application. There is no point in an admin app.
@@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
nice
Hello
Brother, can you link this code please? 57:49
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!
Dear can you tell us to yo deploy this project or other any project on play store
Hello! No, I haven't published this app in the Play Store.
@@EmilZulufovIT my point was tell us the method , a professional and secure way to publish the app on store
also tell us your next projects on this channel
Its Very very good, can you tell the design is responsive or not, if not kindly make video on it
Thanks, man!
Unfortunately, the design is not responsive and is intended only for mobile devices.
@@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
What is the vscode theme?
There are many errors in the env Package it says, target of URl has't been generated
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!
@@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';
@@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
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.
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.
WOW NICEEEE
Thanks!
Is it possible to follow this entire course without having to install and use very_good?
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
@@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!
@@paulooliveira3453 Thank you so much! Keep learning and become successful!
@@EmilZulufovIT Thank you very much.
Which. State management?
Bloc
How can I verify someone's account within my application?
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.
@@EmilZulufovIT I am very sorry, brother, but I want to know how to authenticate a specific person within my application. Thank you 🤍
Make more videos
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
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?
It’s a very great video, but there is a lot of copy and paste from his repository, making it hard to follow.
Yes, I understand that. However, without those copies and pastes, this tutorial would last over 30-35 hours. It was mandatory to have
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.
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.
@@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?
@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.
thank you brother 🤎@@EmilZulufovIT
@@EmilZulufovIT Thank you, brother. Can you give me the information so I can search for it on Google?
Hello, can I try the application?
What do you mean try the application?
@@EmilZulufovIT Yes
how run in android?
Target file "lib\main.dart" not found. this get out
flutter run -t lib/main_development.dart or specify here the desired flavor of main you want to run your app in.
Do you develop in react native too?
No, I don't
Tu codigo al descargarlo, me lanxa mas de 10mil errores...
Run "flutter pub get"
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.
1:58:42 My brother, at this time, which project has she chosen?
What do you mean? Don't understand you, brother
I mean, which project did you choose?@@EmilZulufovIT
@@EmilZulufovITI mean, which project did you choose?
Эмиль брат, лучшее приложение на флаттере
Спасибо 💪 Старался преподнести что-то инновационное
@@EmilZulufovITзабегая вперёд, можно спросить? Для чего используется пакет very good cli
Он позволяет создавать flutter app, flutter package, dart package, и выполняет другие полезные функции. Почитай в официальных документация подробнее. В данном проекте он является основой всего, начиная от самого приложения, flavors, заканчивая packages и других вещами. Без него можно обойтись, но тогда без этого cli будет очень геморно с flavors и packages
@@EmilZulufovIT Спасибо большое
Qardaş Azərbaycanlısan?
I am from Kazakhstan
Brother, can I Pass the Supabase stage?
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.
@@EmilZulufovIT Yes, brother, I want to pass it, and I want Firebase instead. Is this possible?
@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
@@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?
No, the account persists in the Supabase database. Don't worry
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
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
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.
@@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