Flutter & Firebase Tutorial: Build 5 Social Media Apps from Udemy

Build 5 Real World Social Media Applications in this tutorial.

We will go through Firebase Auth in detail after which work on real world projects like Instagram, TikTok, Zoom, Twitch & WhatsApp. These projects don't just talk about Firebase, projects like Twitch and Zoom even include third party SDK's to give a feel of how, when and why to use Firebase. The aim of this course is to make you familiar with Firebase and have 5 real world projects which you can work on, after this course to turn into a single app.

This course will have constant repetition which will ensure your confidence is high, even after completing this course and you don't have to take yet another course. If you have any questions during the course, I'll be more than happy to help you out with it. Keep Learning :)

Features of the projects we are going to build:

1. Instagram

Responsive Instagram UI
Email & Password Authentication
Share Posts with Caption
Display Posts with Caption
Like & Comment on Posts
Search Users
Follow Users
Display User Posts, Followers & Following
TikTok
- Authentication with Email & Password
- Uploading Videos with Caption
- Compressing Videos
- Generating Thumbnails Out of Video
- Displaying Videos with Caption
- Liking on Posts
- Commenting on Posts
- Liking the Comments
- Searching Users
- Following Users
- Displaying Followers, Following, Likes & Posts of User
- TikTok Like UI
3. Zoom
- Google Sign In
- Create New Meeting
- Join Meeting
- Mute/Unmute Audio
- Mute/Unmute Video
- Change Display Name while Joining
- Raise Hand
- Start Screen Sharing
- Mute Everyone
- Start Live Stream
- Screen Share
- Chat
- Switch Front/Rear Camera
- Picture in Picture
- Enter Tile View
- Disable Camera
- End Call
- See Your Meeting History
- Log out
4. Twitch
- Email & Password Authentication
- Screensharing
- Selecting Thumbnail
- Going Live
- Joining LiveStream
- Switching Camera
- Muting/Unmuting
- Chatting
- Cross Platform
- Responsive UI
- Token Generation using GO (Create Your API)
- Deploy Server
- Deploy Website
5. WhatsApp
- Phone Number Authentication
- 1-1 Chatting with Contacts Only
- Group Chatting
- Text, Image, GIF, Audio(with Recording), Video & Emoji Sharing
- Status/Stories Visible to Contacts Only and Disappears after 24 hours
- Video Calling
- Online/Offline Status
- Seen Message
- Replying to Messages
- Auto Scroll on New Messages
- Caching Images & Video

What's inside

Learning objectives

Learn about firebase firestore, auth, storage
Build real world projects with firebase
Know when & why to use firebase

Deployment
Build cross platform apps

Learn about firebase firestore, auth, storage
Build real world projects with firebase
Know when & why to use firebase
Deployment
Build cross platform apps

Syllabus

Introduction

Best Way To Follow Along

Build Instagram Clone in less than 7 hours to get a good grasp on Firebase Auth, Firestore & Storage + Provider!

Demo

Setup & Theming the App

Building Responsive Layout Widget

Setting Up Firebase

Signup Screen UI (Mobile)

Firebase Signup Auth

Firebase Login Auth

Persisting Auth State

Modelling User Data

User Data State Management

Null Check Operator Error Fix

Mobile Bottom App Bar

Add Post Screen UI

Selecting Image

Storing Post Data in Firebase

Feed Posts UI

Displaying Post Data from Firebase

Like Animation

Updating Likes

Comments Screen UI

Storing Comments in Firestore

Displaying Comments

Deleting Post

Searching Users

Showing Posts on Search Screen

Creating Reusable Profile Screen UI

Displaying Profile Data

Following Users

Signing Out

Creating Responsive UI

Learn about Video uploading and playing using GetX in this part while building TikTok Clone in less than 4 hours!

Setup

Authentication Logic

Firebase Setup

Creating User Model

Bottom Tab Bar

Add Video Screen

Confirm Video Screen

Uploading Video

Displaying Videos

Add Video Controller

Liking Posts

Commenting & Liking Comments on Posts

Search Screen

Profile Screen

Build Zoom using Firebase Auth + Jitsi Meet SDK

Flutter Setup

Firebase Setup & Google Sign In

Firebase Setup (iOS)

Firebase Setup (Android)

Persisting User State

Home Screen UI

Setting Up Jitsi Meet (iOS)

Create New Meeting

Join Video Screen UI

Storing User Meetings

Displaying User Meetings

Logging Out

Testing on Physical Android Device & iOS Simulator

Jitsi Meet Error

Pros & Cons

Enhance your confidence while you build Twitch Clone using Flutter + Firebase + Agora

Project Layout

Routes

Onboarding Screen UI

Signup & Login Screen UI

Firebase iOS Setup

Firebase Android Setup

Signing Up Users

Logging in Users

Persisting Login State

Designing Bottom NavBar

Go Live Screen UI

Picking Image from Gallery

Fixing Memory Leaks & Adding Loaders

Storing Livestream Data in Firebase

Agora Android Setup

Solving Firebase Livestream BUG

Agora iOS Setup

Initialising Agora

Get Agora App ID

Joining Channel

Designing Broadcast Screen

Leaving Channel

Switching Camera

Muting/Unmuting

Realtime Chatting

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Provides hands-on experience with Flutter and Firebase by building five social media applications, which is valuable for portfolio development

Covers Firebase Auth, Firestore, and Storage in detail, which are essential for backend development in modern mobile applications

Includes third-party SDK integration, as seen in the Zoom and Twitch projects, which demonstrates practical application development skills

Features constant repetition to reinforce learning, which helps solidify understanding and build confidence in using Flutter and Firebase

Requires setting up Firebase for both iOS and Android, which may involve platform-specific configurations and troubleshooting

Teaches video uploading and playing using GetX, which may require familiarity with this state management library

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Flutter & Firebase Tutorial: Build 5 Social Media Apps with these activities:

Review Flutter UI Fundamentals

Show steps

Strengthen your understanding of Flutter UI components and layout techniques to build responsive and visually appealing social media app interfaces.

Browse courses on UI Development

Show steps

Review Flutter widgets like rows, columns, containers, and text.
Practice building simple layouts using these widgets.
Explore Flutter's theming capabilities.

Brush Up on Firebase Authentication

Show steps

Revisit Firebase Authentication concepts to ensure a solid foundation for implementing user authentication in the social media apps.

Browse courses on Firebase Authentication

Show steps

Review Firebase Authentication methods like email/password, Google Sign-In, and phone authentication.
Practice implementing basic authentication flows in a simple Flutter app.
Understand how to persist user authentication state.

Read 'Flutter Apprentice'

Show steps

Supplement your learning with a comprehensive guide to Flutter development, covering UI design, state management, and Firebase integration.

View Flutter Apprentice (Second Edition): Learn to... on Amazon

Show steps

Read the chapters related to UI design and layout.
Study the sections on state management techniques.
Review the Firebase integration examples.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Basic Chat App UI

Show steps

Practice building a chat app UI to reinforce your understanding of Flutter UI components and Firebase integration.

Show steps

Design the UI for a chat screen with message bubbles and input field.
Implement Firebase Firestore to store and retrieve chat messages.
Add real-time updates to the chat screen using Firebase Streams.

Write a Blog Post on Firebase Security Rules

Show steps

Deepen your understanding of Firebase Security Rules by writing a blog post explaining how to secure your Firebase data.

Browse courses on Security Rules

Show steps

Research Firebase Security Rules and their syntax.
Write a blog post explaining how to use Security Rules to protect your data.
Include examples of common Security Rule scenarios.

Read 'Clean Architecture'

Show steps

Learn about software architecture principles to improve the structure and maintainability of your Flutter projects.

View Clean Architecture on Amazon

Show steps

Read the chapters on architectural patterns and design principles.
Consider how these principles can be applied to your Flutter projects.
Refactor existing code to improve its structure and testability.

Contribute to a Flutter Firebase Library

Show steps

Contribute to an open-source Flutter Firebase library to gain experience working on a real-world project and collaborate with other developers.

Browse courses on Flutter

Show steps

Find an open-source Flutter Firebase library on GitHub.
Identify a bug or feature request to work on.
Submit a pull request with your changes.

Career center

Learners who complete Flutter & Firebase Tutorial: Build 5 Social Media Apps will develop knowledge and skills that may be useful to these careers:

Social Media Application Specialist

A Social Media Application Specialist works specifically on social media platforms. This course directly aligns to a career as a Social Media Application Specialist as it will provide you with practical experience by building five social media applications, which will help you with all of the key features of these kinds of applications. The course covers various aspects, including user authentication, video integration, live streaming, and real-time communication, all of which are important in social media app development. The comprehensive approach to social app development will help you to become a Social Media Application Specialist.

See salaries and explore the career path for Social Media Application Specialist

Mobile Application Developer

A Mobile Application Developer creates applications for mobile devices, often focusing on user interface and experience. This course helps build a strong foundation in developing social media applications, a popular category in the mobile app space. The course's focus on Firebase and cross-platform development using Flutter directly contributes to the skills needed in this role. By building five diverse social media apps, you gain practical experience with authentication, data storage, video integration, and live streaming, all essential aspects for a mobile application developer.

See salaries and explore the career path for Mobile Application Developer

Cross-Platform Developer

A Cross Platform Developer specializes in building applications that can run on multiple operating systems. This course helps you become a Cross Platform Developer, because it uses Flutter and has a strong emphasis on building applications that function across platforms using it. The course will give you real-world experience creating applications by working on five different social media apps, and gives you an opportunity to experience the process of working on authentication, video integration, live streaming, and real-time communication across platforms. This holistic approach will be helpful for a Cross Platform Developer.

See salaries and explore the career path for Cross-Platform Developer

Application Developer

An Application Developer creates software applications that run on computers or mobile devices. This course is especially relevant to becoming an Application Developer, because its practical approach to developing five different applications with varied functionalities. The course provides exposure to a lot of essential features like user authentication, data storage, and media handling, which are commonly required in application development. By completing the projects in this course, you will have a portfolio showcasing your ability to build and deploy applications, a key step in becoming an Application Developer.

See salaries and explore the career path for Application Developer

Full-Stack Developer

A Full Stack Developer works on both the frontend and backend of applications. This course provides a solid starting point for a career as a Full Stack Developer by focusing on the development of complete applications, from user interface to backend integration. The course's emphasis on Firebase for backend services, combined with practical frontend work using Flutter, will be particularly beneficial. Creating five social media apps will give you valuable experience in handling data, authentication, and real-time features, all vital skills for a Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Frontend Developer

As a Frontend Developer, your primary concern is with the user experience and the overall look and feel of a website or application. This course directly aids in becoming a Frontend Developer, because it centers around building five distinct social media applications, providing practical experience with user interface design and development. Specifically, the course will help you build a solid base of skills in responsive design, authentication, and data display, all critical to frontend development. The course, having projects like Instagram and TikTok will be helpful because they have very interactive and complex UIs.

See salaries and explore the career path for Frontend Developer

Software Engineer

A Software Engineer designs, develops, and tests software applications. This course may be helpful in starting on a career as a Software Engineer, specifically by providing hands-on experience building five different social media applications. The projects in this course provide experience with key aspects of software engineering such as mobile development, cross-platform compatibility, and backend integration. This could aid entry into software engineering because the course demonstrates a practical understanding of software development principles, which is crucial for a Software Engineer.

See salaries and explore the career path for Software Engineer

Mobile UI Designer

A Mobile UI Designer focuses on creating user interfaces for mobile applications that are both visually appealing and easy to use. This course, with its focus on building five social media apps, helps build a foundation for a Mobile UI Designer. The process of implementing responsive layouts and working on diverse project user interfaces such as the ones for Instagram and TikTok, will give you an understanding of current design trends and best practices for mobile applications. The hands-on experience with cross-platform development is also helpful because it will prepare you to design for different devices.

See salaries and explore the career path for Mobile UI Designer

Backend Developer

A Backend Developer focuses on the server-side logic, databases, and infrastructure of applications. While the course might not be solely focused on backend development, it may be useful for aspiring Backend Developers because it extensively covers the use of Firebase. The course's emphasis on Firebase Authentication, Firestore, and Storage provides experience with backend services crucial for application development. By the end of the course, you will have some experience in setting up databases, user authentication, and managing data. This understanding of backend systems can be valuable for a Backend Developer.

See salaries and explore the career path for Backend Developer

Cloud Solutions Engineer

A Cloud Solutions Engineer designs and implements cloud-based solutions. This course may be helpful in gaining some familiarity with cloud services. The course's practical use of Firebase can be valuable, because it will give you experience with cloud-based databases, authentication, and storage. You will have hands-on experience in setting up and managing cloud resources using Firebase, which can provide a foundational understanding of cloud services. This exposure to cloud technologies can aid the start to a career path as a Cloud Solutions Engineer.

See salaries and explore the career path for Cloud Solutions Engineer

Mobile Product Manager

A Mobile Product Manager is responsible for guiding the vision and strategy of mobile applications. This course may be useful for aspiring Mobile Product Managers, as it gives experience building five different social media apps, which could help them understand user experience, features, and the mechanics of app development. The course covers various types of real-world social media app experiences, including video sharing, live streaming, and chat platforms. This will be helpful in gaining some insight into app development, which is important as a Mobile Product Manager.

See salaries and explore the career path for Mobile Product Manager

Software Architect

A Software Architect designs the overall structure and technical aspects of software systems. While this course may not directly prepare one for a software architect role, it may be helpful to those who want to become a Software Architect. The projects in the course can be beneficial in understanding how various components of an application connect. The experience with designing and building five different applications will help you to understand practical software design principles. This could increase your understanding of software architecture, which is essential for a Software Architect.

See salaries and explore the career path for Software Architect

Technical Project Manager

A Technical Project Manager oversees software projects. This course may be helpful for those interested in such a career because it provides a full understanding of the software development process, from start to finish. By working on five distinct social media applications, this course enhances knowledge of the kinds of tasks required for development projects. This experience of building applications will be helpful for a Technical Project Manager by enabling them to understand the development process better, giving them a foundation to better manage projects.

See salaries and explore the career path for Technical Project Manager

Quality Assurance Analyst

A Quality Assurance Analyst tests software applications to ensure they meet standards. This course may be useful for those wishing to become a Quality Assurance Analyst by giving them experience with the functionality of real world applications. The process of building five social media applications provides exposure to aspects of development and their expected behavior, which helps them better test an application. They will know more about aspects to look for in the apps, which can only help them become a better Quality Assurance Analyst.

See salaries and explore the career path for Quality Assurance Analyst

Technology Consultant

A Technology Consultant advises clients on technology-related decisions. While this course is not specifically designed for a Technology Consultant, it may be useful for those wishing to enter the field. The hands-on development of five social media applications may be helpful in understanding the technical aspects of building software. This practical experience will give them insight that would be beneficial in a career as a Technology Consultant. Having a portfolio of apps will provide more relevant insights for a Technology Consultant.

See salaries and explore the career path for Technology Consultant

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Flutter & Firebase Tutorial: Build 5 Social Media Apps.

Flutter Apprentice (Second Edition)

Save

Provides a comprehensive guide to Flutter development, covering UI design, state management, and Firebase integration. It's a great resource for solidifying your understanding of Flutter concepts and building practical applications. While not strictly focused on social media apps, the fundamental knowledge gained will be invaluable. It useful reference tool for Flutter development.

Flutter Apprentice (Second Edition): Learn to Build...

Paperback

$$$

Clean Architecture

Save

Is not Flutter-specific, but it provides invaluable insights into building maintainable and scalable software architectures. Applying these principles to your Flutter projects will result in cleaner code, easier testing, and improved long-term maintainability. It is more valuable as additional reading than it is as a current reference. This book is commonly used as a textbook at academic institutions and by industry professionals.

Flutter & Firebase Tutorial

Build 5 Social Media Apps

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses