Chat Application with Javascript , Jquery And Firebase

Set up this project on Windows by downloading and installing VS Code, add the live server extension for real-time browser updates, and apply bootstrap boilerplate to run on localhost:5500.

Learn to build a login and sign up interface for a chat app using a ready template, hide or show sections with on click events, and verify behavior.

Toggle sign up and sign in sections, capture email and password, and authenticate with Firebase to grant access to a dynamic chat interface.

Learn to capture sign up form values—name, username, email, and password—on sign up click, prevent default action, and log them to the console for subsequent database storage and user authentication.

Capture username, email, and password at sign up, authorize the user, and display a user list with a chat area for messaging the selected user, with Firebase and jQuery updates.

Sign in to the Firebase console, create a new project, set up a web app, and configure the realtime database for your chat app with vanilla JavaScript.

Create and configure a Firestore database for your web chat app, enable it in the console, and compare Firestore’s document-collection model and offline support with Realtime Database.

Explore Firebase authentication, realtime database, storage, and hosting for your web chat application, and understand how data flows with a database organized in collections and documents.

Log in to Firebase, open the project, go to realtime database rules, publish, and repeat for Firestore; the lecture demonstrates that default rules allow public read and write access.

Learn to add firebase to a web chat project by obtaining the firebase config, placing credentials, and initializing the app using the modular approach.

Learn to link the firebase configuration file into your web project and integrate the service application into the website, including updating the index with the necessary script line.

Learn to implement email and password sign-up in a Firebase chat app by enabling the provider, wiring the sign-up button to authentication, and handling success and error responses.

Implement email verification in the sign-up flow of a JavaScript, jQuery, and Firebase app by creating a separate sign-up function and sending a verification email to the current user.

Create a sign in function using email and password with Firebase, validate registration, log success or errors, and redirect the user to the chat interface upon successful sign in.

Verify the user's email after sign-in in a Firebase chat app and redirect verified users to the chat interface, while prompting unverified users.

Implement sign in with Google using Firebase authentication in a JavaScript chat app, enabling Google provider, configuring allowed domains, and handling popup-based user sign-in and success flow.

Store google sign-in credentials in firebase realtime database by creating a user object with avatar, email, username, display name, and online status, then persist it in the users collection.

Learn to store email and password sign-up credentials in Firebase Realtime Database by creating a user object, handling sign up inputs, email verification, and updating user status online.

Learn to store the signed-in user id in session storage during email and password sign-in, reusing the Google sign-in approach to enable message sending in the chat app.

Fetches and displays Firebase users by listening to the users collection, rendering avatars via gravity API from emails, and showing online/offline status in the inbox.

Implement a send message feature in a chat app using Firebase, capturing the input, constructing a message object with from, username, and time, and storing it in the messages collection.

Hide logged-in account from inbox panel, align send button to the right, and enable sending on enter or button click while clearing the input and storing the message in database.

Retrieve all messages from the messages collection with a listener, render them in the chat interface, and distinguish between my messages and others while updating online status.

Add an emoji feature by adding an emoji button that opens an emoji panel for inserting emojis into messages, and append the selected emoji to the input.

Implement logout functionality by clicking the logout button to redirect to login, update the user status to offline in Firebase realtime database, and clear session storage before redirect.