Vue JS and Firebase:Build an iOS and Android chat app

Name: Vue JS and Firebase:Build an iOS and Android chat app
Rating: 3.9 (307 reviews)

Vue JS, Vuex and Framework7 are awesome mix to build iOS and Android app. Firebase help to create a real time mobile app

Created byKim Chen

Last updated 1/2022

English

English [Auto],

What you'll learn

Build an amazing real world iOS and Android Chat Application
Implement Firebase Authentication to the mobile app
Send Image to your friends through the mobile app you create
How to create one on one chat
How to create a group chat which allow to add and remove members
Implement email verification and forget password to the Firebase Authentication

Course content

3 sections • 92 lectures • 9h 48m total length

Create a project reminder0:09
Source code0:14
Create a project11:14
Create sign in page14:36
Create sign up page9:51
Create a sign up page to let users create accounts with name, email, and profile picture, integrated with firebase authentication and database for the chat app.
Connect the app to firebase4:13
implement Vuex5:30
Create sign up action16:05
Enable email and password authentication in firebase, implement sign up function, create user records in realtime database, and update profile with display name and photoURL, including error handling.
Toast Firebase message12:59
Learn to implement a toast Firebase message for user sign up, showing real-time alerts from the store, handling errors like email already in use and badly formatted emails.
Apply mixin4:06
Browser custom photo for user profile picture3:46
Create read file action12:18
Sign up with custom profile picture15:28
Auto go to sign in page after sign up5:08
Create send email verification action4:59
Implement an email verification action with Firebase during sign up, dispatch a mutation to display an alert after sending the verification email.
Create sign in action10:11
Implement sign in by passing email and password as a payload, dispatching login actions, updating authentication state, handling errors with alerts, and routing to the home page after sign-in.
Make the app remember the sign in status3:49
Create sign out action4:05
Add a sign out button on the left panel and implement a sign out function, then close the left panel after signing out to keep the interface tidy.
Check whether the email is verified6:40
Enforce email verification in a Vue.js and Firebase chat app by checking the user's email status, updating login flow, and routing to the home page on success.
Create count down on sending verification email11:18
Dynamic style of button3:02
Learn to add dynamic button style that signals a disabled state as time left changes, using a color method that switches between default and active colors when time runs out.
Conditionally display resend button4:09
Add forget password function5:49
Add profile picture and name to the left panel12:06

Create edit profile page11:35
Create an edit profile page to let users update their information, reusing the profile page design and navigating via tabs without a back link.
Modifiy the data and ui inside edit profile page9:01
Create update profile function11:40
Create two icons3:28
We'll create one notification icon for notifying there are incoming requests. The other icon is to go to another page to add some new friends
Create two pages3:49
In this part we are going to create two pages, the requests page for listing out who send you a friend request. The contacts pages is to show all the available users.
Get all user action7:35
For getting all the users, we will use Vuex , which go to the store.js to add an action to get all users
Beautify the contacts page7:27
Create send request action4:48
Create send request function5:03
Install lodash and make it can use the async await25:05
Learn how to install lodash and enable async/await in a Vue.js and Firebase chat app, including dispatching actions to fetch users, awaiting data, and handling requests.
Complete get my requests action14:40
Demonstrate the get my requests action in a Vue and Firebase chat app by matching user IDs and updating friend requests.
Beautify the requests3:07
Create delete request action7:44
Create confirm request action7:42
Create get all friends action7:59
Implement a get all friends action to fetch and list a user's friends, update the UI with dynamic friend counts, and handle friend request visibility.
Beautify the home page2:45
Beautify the home page by removing unnecessary elements, copying the class page style, adding bottom styling, and displaying friends more clearly.
Create chat page7:46
Select a friend to open a conversation, then pass the friend information to the chat component for display.
Detail the chat page8:45
Create send message action5:43
Create send message function4:44
Create a send message function that updates both sender and friend by dispatching actions with the message and optional image in the Vue JS and Firebase chat app.
Create get chat messages action10:15
Display messages3:23
Group the messages by date4:59
Clear unnecessary code3:04
Browse photo as message5:34
Add a browse photo feature by wiring a photo icon to a file picker, enabling multiple image selections in chat messages. Display the selected photos in the message thread.
Create read file message action6:53
Create upload chat images action5:38
Create a chat images upload action that handles attachments, assigns a unique id via base64, stores images in chat/images, uses putString with image/png, and returns the promise.
Send image messages7:42
Create get user key action5:21
Create send latest message action6:26
Create a latest message action in a Vue.js and Firebase chat app by sending a text message with your id, friend id, friend key, and self key via Firebase payload.
Modify send message action5:28
Modify the send message action by retrieving the user key, passing user info to the latest message, and updating the home page via dispatch with await and try-catch.
Display latest message on friend list8:38

Create chat groups page4:41
Create a chat groups page by setting up a groups list, configuring the check groups feature, and linking the track groups tab to display all existing groups.
Create new group page3:49
Beautify the create new group page4:57
Create group chat module4:34
Initialize group image3:18
Modify the readFile action4:54
Create new group3:46
Modify upload file action4:54
Create group action6:27
Create get all groups action5:05
Implement a get all groups action to fetch and store chat groups from Firebase using user ID, and commit a mutation to update the state with name and picture data.
List out the groups3:53
Display and manage chat groups by creating a groups view, dispatching get my groups, and applying the home page layout and styles to show two groups.
Create chatgroup page3:15
Edit chat group page6:35
Add options to chat group3:52
Add options to chat group by placing an options icon in the navigation bar, wiring the essence sheet options for group info, members, and delete group actions.
Add pages relate to the options6:05
Get group image7:13
Add new members action4:15
Add new member function7:58
Get group members action4:23
Modify potential member list5:50
Refresh and update group member list by evaluating each potential member against current members, removing those who are already members, and converting remaining potential members into members in the UI.
Display group members2:43
Explore displaying group members in a Vue JS and Firebase chat app, reusing templates, retrieving the group name and members, and rendering them on the group infos page.
Remove member9:09
Show number of members3:08
Determine which action group5:17
Leave group action5:53
Bind leave group action to method1:36
Edit get group member action1:43
Group info page3:32
Delete unncessary data3:11
Send group message action11:31
Send group messages by identifying owners and members, then push the message to the sender, to owners, and to other members using a single message action.
Send group message function4:07
Send image message4:45
Get group messages7:19
Display group messages2:44
Send latest message to group5:01
Display latest message1:09

Requirements

Basic VueJS knowledge is required
ES6 knowledge is an advantage
A basic understanding of HTML, CSS & JavaScript

Description

Master the VueJS and Firebase together to build an amazing iOS and Android chat application. By learning from this course, you are not only can build chat application, but also can apply these knowledge to build other incredible applications.

If you’re looking to get started building a real-world mobile chat app, then this course is best for you. In this course, I will teach you how to use Vue JS and Framework7 as frontend, Firebase as backend to build the chat app from scratch.

VueJ S is a very simple framework, which combine with the best of Angular and React

Framework7 is an open source framework7, which let you develop mobile, desktop or web app with a native look and feel

Firebase is a real time database, it allows you to create authentication easily, user can login with email, google, Facebook and twitter account.

The course will cover

Firebase user Authentication

Forget the password

Email Verification

Firebase real time database

One on one chat

Group chat

Who this course is for:

Anyone who wants to learn how to create native view mobile app with Vue JS & Firebase
Anyone who wants to learn Vue JS and Firebase
Anyone who wants to learn about Authentication in Vue JS apps
Anyone who wants to learn how to use Firebase in their real time applications

Who this course is for:

You are interested in building a state-of-the-art iOS and Anrdoid applications
You are looking for the best back-end which can help to create a real time application
You are looking for the framework which is much easier than Angular or React

Vue JS and Firebase:Build an iOS and Android chat app

What you'll learn

Explore related topics

Course content

Create Chat App pages and signup function24 lectures • 3hr 2min

Edit Profile Page32 lectures • 3hr 54min

Group Chat36 lectures • 2hr 53min

Requirements

Description

Who this course is for: