Vue JS and Firebase:Build an iOS and Android chat app (2021)
- Description
- Curriculum
- FAQ
- Reviews
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
-
1
Create a project reminder -
2
Source code
-
3
Create a project -
4
Create sign in page
-
5
Create sign up page
-
6
Connect the app to firebase
-
7
implement Vuex
-
8
Create sign up action
-
9
Toast Firebase message
-
10
Apply mixin
-
11
Browser custom photo for user profile picture
-
12
Create read file action
-
13
Sign up with custom profile picture
-
14
Auto go to sign in page after sign up
-
15
Create send email verification action
-
16
Create sign in action
-
17
Make the app remember the sign in status
-
18
Create sign out action
-
19
Check whether the email is verified
-
20
Create count down on sending verification email
-
21
Dynamic style of button
-
22
Conditionally display resend button
-
23
Add forget password function
-
24
Add profile picture and name to the left panel
-
25
Create edit profile page
-
26
Modifiy the data and ui inside edit profile page
-
27
Create update profile function
-
28
Create two icons
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
-
29
Create two pages
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.
-
30
Get all user action
For getting all the users, we will use Vuex , which go to the store.js to add an action to get all users
-
31
Beautify the contacts page
-
32
Create send request action
-
33
Create send request function
-
34
Install lodash and make it can use the async await
-
35
Complete get my requests action
-
36
Beautify the requests
-
37
Create delete request action
-
38
Create confirm request action
-
39
Create get all friends action
-
40
Beautify the home page
-
41
Create chat page
-
42
Detail the chat page
-
43
Create send message action
-
44
Create send message function
-
45
Create get chat messages action
-
46
Display messages
-
47
Group the messages by date
-
48
Clear unnecessary code
-
49
Browse photo as message
-
50
Create read file message action
-
51
Create upload chat images action
-
52
Send image messages
-
53
Create get user key action
-
54
Create send latest message action
-
55
Modify send message action
-
56
Display latest message on friend list
