Flutter & Firebase Course – Build a Full Stack Instagram Clone

Ecommerce Empire Academy

Use Flutter and Firebase to build a responsive Instagram Clone. After this tutorial, you will be able to use Firebase in any of your projects. You will learn about Firestore, Firebase Auth, Firebase Storage, Responsive UI, and much more!

πŸ’» Code:

✏️ Course developed by Rivaan Ranawat. Check out his channel:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:19) Demo
⌨️ (0:03:25) Prerequisites
⌨️ (0:04:31) Setup & Theming the App
⌨️ (0:09:31) Building Responsive Layout Widget
⌨️ (0:15:47) Setting Up Firebase
⌨️ (0:33:10) Login Screen UI (Mobile)
⌨️ (0:55:58) Signup Screen UI (Mobile)
⌨️ (1:02:41) Firebase Signup Auth
⌨️ (1:52:12) Firebase Login Auth
⌨️ (2:02:33) Persisting Auth State
⌨️ (2:19:49) Modelling User Data
⌨️ (2:25:47) User Data State Management
⌨️ (2:48:02) Mobile Bottom App Bar
⌨️ (2:57:49) Add Post Screen UI
⌨️ (3:10:08) Selecting Image
⌨️ (3:21:18) Storing Post Data in Firebase
⌨️ (3:44:16) Feed Posts UI
⌨️ (4:10:08) Displaying Post Data from Firebase
⌨️ (4:22:04) Like Animation
⌨️ (4:36:21) Updating Likes
⌨️ (4:45:11) Comments Screen UI
⌨️ (4:59:37) Storing Comments in Firestore
⌨️ (5:09:47) Displaying Comments
⌨️ (5:25:58) Deleting Post
⌨️ (5:28:56) Searching Users
⌨️ (5:39:45) Showing Posts on Search Screen
⌨️ (5:46:06) Creating Reusable Profile Screen UI
⌨️ (6:05:41) Displaying Profile Data
⌨️ (6:27:16) Following Users
⌨️ (6:35:30) Signing Out
⌨️ (6:37:27) Creating Responsive UI
⌨️ (6:51:15) Conclusion

Resources:
πŸ”— colors.dart File:
πŸ”— Instagram Logo:
πŸ”— Firestore Rules:
πŸ”— Firebase:
πŸ”— Pubspec Assist:
πŸ”— In case of error while configuring Firebase for iOS:
πŸ”— Renaming the android package:

Dependencies:
πŸ”—
πŸ”—
πŸ”—
πŸ”—
πŸ”—
πŸ”—
πŸ”—
πŸ”—
πŸ”—

πŸŽ‰ Thanks to our Champion and Sponsor supporters:
πŸ‘Ύ Raymond Odero
πŸ‘Ύ AgustΓ­n Kussrow
πŸ‘Ύ aldo ferretti
πŸ‘Ύ Otis Morgan
πŸ‘Ύ DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

45 thoughts on “Flutter & Firebase Course – Build a Full Stack Instagram Clone”

  1. Hey folks! Thanks for watching and I hope you enjoyed the course. Feel free to contact me with any questions and I’ll be more than happy to answer them. Be sure to check out my channel for more full stack development tutorials.

    1. I learned so many things from this course. Thank you so much for sharing such skills and knowledge, very very appreciated.

    2. Varun Cuntoor

      Hey Rivaan, @ 6:08:32 I’m getting an error, when I replace ‘username’ with UserData[‘username], “type Null? is not a subtype of type String?”…followed exactly what you did tho..

    3. Asadbek Tojiboyev

      after registering(android) the clone to fire base, even if i did all you mentioned i cannot run the project. or should i find macbook to register ios app first?

    4. Firebase login is not working but registration is going pretty well. Sir do you have idea how to resolve that?

  2. Dhruv Balasubramanian

    Starting this today. Can’t wait to see the finished product (and learn a lot in doing so)!!

  3. Dhruv Balasubramanian

    Great tutorial. One criticism though: could you make these tutorials more accessible to Windows users? At 19:55 you use XCode but provide no alternative for windows users. Also soon after when calling pod install.

    1. Dhruv Balasubramanian

      @Rivaan Ranawat Hello Rivaan, I appreciate you taking the time to reply. I realized that too after a bit of research, and plan to program only for Android and Web at the moment. Thanks for the the clarification!

    2. Taofeek Ajibade

      Alternatively, you can install virtual machine on your Windows and then build/test iOS with it.

    3. Hello friend, I still do not understand how no one showed this solution, but it is very simple. Do all the process that the author did, but for the android platform ( Windows ). You can fix it πŸ˜‰

    4. I was struggling with same and found a solution:
      1. Inside Runner.xcodeproj folder, open project.pbxproj
      2. Then to search, press CTRL+F
      3. Search for PRODUCT_BUNDLE_IDENTIFIER
      4. You will get your ios bundle id.

      but you can not test your app on windows.

  4. Thank you very much..
    You have made my life so easier with all your flutter videos. I can’t thank you enough. πŸ™‚

  5. Woohoo! Great, will od this course tomorrow when i have time, im sure i will learn a lot.
    Thanks for sharing this!

  6. I think this course is what was missing for more advanced developers. Great work Rivaan!!!

  7. πŸ‘πŸ‘πŸ‘ That was really an incredibly good tutorial πŸ‘πŸ‘πŸ‘Β 
    😁 Thank you very much 😁

  8. Sydney Wingender

    Amazing tutorial. I’m learning a lot and I’m loving it. Quick question, though: wouldn’t it be simpler and faster to use FlutterFire to setup Firebase?

    1. Rivaan Ranawat

      Yep, Flutterfire is faster and simpler! While making this course I wasn’t aware about Flutterfire πŸ˜…

  9. MICHAEL ARIAS FAJARDO

    I realy apreciated this experience dabbling in flutter apps development. Thanks a lot Rivaan Ranawat!

  10. Amarjeet srivastava

    Finally Completed it. I spent my two weekends to complete this tutorial. This tutorial was pretty long but helping. I’ll try adding more and more features on it. Thanks Rivann Sir for this amazing tutorial. πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™

  11. Sher Ali KHTK

    Thank you FreeCodeCamp. This course helped me understand each and everything related to firebase and firestore

  12. Abstract stract

    Hello, thanks for the tutorial and the content. I am at half of it. I have an error with the web version, NetworkImage throws an exception whether the image is stored in firebase or somewhere else it is the same. It is CORS issue. I see in the video it is working normally. What did I miss?

  13. Great Tutorial I have just finished it and it’s just perfect for everyone! I add some feature like the bookmark and the edit profile page Thanks a lot!!

  14. Wow this is nuts i just watched this 6 hour long video and I can’t believe how much I learned! I actually feel like I can make an own app now

  15. Why not validate user inputs on the textformfields using the inherent validator call back? I think that is a better way of validating user input. The auth class methods should only be invoked when a user’s entered values are valid.

Comments are closed.