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

Create an edit profile page to let users update their information, reusing the profile page design and navigating via tabs without a back link.

Beautify the contacts page by turning the user list into a view with profile pictures and swipe actions for easier contact management in the Vue JS and Firebase chat app.

Create a send request action by wiring Firebase modules, building a request payload with recipient details, and exporting chat functionality across the modules.

Develop and wire the send request function by creating a class, identifying sender and recipient ids, and importing Firebase to enable chat app messaging.

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.

Demonstrate the get my requests action in a Vue and Firebase chat app by matching user IDs and updating friend requests.

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 page by removing unnecessary elements, copying the class page style, adding bottom styling, and displaying friends more clearly.

Select a friend to open a conversation, then pass the friend information to the chat component for display.

Create a send message action by creating a database reference, building a payload with message and timestamp, and pushing the message to both self and friends for symmetric delivery.

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.

Retrieve chat messages from Firebase using current user and friend ids, format each message as sent or received with sender name and avatar, and store Moment-formatted timestamps in chat state.

Group messages by date to display all messages from the same day together, then organize each day's messages by time using an updated loop and index.

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.

Learn to read image files, create a file message action, and dispatch it on file selection, then upload the image to Firebase and display it in your Vue.js chat app.

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.

Create a get user key action in a vue js and firebase chat app to fetch the user key and show the latest message for you and your friend.

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 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.

Update user details to display each friend's latest message on the friend list in Vue JS and Firebase, by querying by friend ID, handling message payloads, and supporting image uploads.

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.

Initialize the group image for every new group by using mutations to set and duplicate the initial image, updating the store for each new page.

Add a create group method that builds a group object with name and picture, handles default or uploaded photos, uploads files, and dispatches the create group action.

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.

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 a chatgroup page to enter a selected group and chat with members. Duplicate track group components, add a checkbox to choose a group, and navigate to the group page.

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.

Create and manage a group members state, fetch member data from firebase by navigating groups, id, and members, and commit mutations to populate the group members list for display.

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.

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.

Learn to remove a member from a group in a Vue and Firebase chat app by locating the member key, moving the member with a payload, then updating group.

Show number of members explains implementing a dynamic member count in the chat app, with pluralization rules, header display, and conditional rendering for no members yet and removing debugging code.

Fetch group members data and display it on the group involved page using the owner id, while non-owners cannot view the member list.

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.

Implement the send group message function in a Vue JS and Firebase chat app, build the payload with the group name, and dispatch the action to update group message board.

Add and update the latest group message across all members, handling text versus image, and display the latest message in each group's chat list.