Full-Stack Web Applications with Firebase

Explore core Firebase services, including Cloud Firestore, hosting, storage, and authentication, and learn how real-time updates, security rules, and NoSQL document databases power modern web applications.

Initialize Cloud Firestore in your project by enabling test mode and referencing the database from HTML and JavaScript. Set up the console and CDN integration to start using the database.

Learn how to send your first chat message by storing messages in a Firebase database, prompting for user name, saving to local storage, and viewing messages in the Firebase console.

Set up a real-time listener for the messages collection. Inject messages into the div id messages and style them by keys.

Show messages in ascending order by creation time using the JavaScript date constructor and firebase timestamp, and enhance queries with the order by method.

Wire a clear button to a click event, iterate the messages collection, and issue delete requests for each document to clear the chat.

Learn to publish your app with Firebase hosting by installing Firebase tools, logging in, initializing hosting, configuring a public directory, and deploying to obtain a live hosting URL.

Initiate a live chat by inviting a friend to join your chat room, open the app in the browser, supply your name, and send a message to start real-time conversation.

Initialize Firebase storage from the console, enable storage and apply the default security rules, then adjust rules to allow read and write and publish for future uploads.

Upload images to Firebase storage, obtain the download URL, use it as the image source, and preview uploads in a div with a real-time listener and optional progress bar.

Upload images to firebase storage using the provided full source code for the image sharing application, render previews with the download url, and monitor uploads with a real-time image list.

Learn to clear image references by wiring a clear button with a click listener, loop through photos collection, and delete each document, noting storage items must be removed separately.

Create a modal authentication flow using HTML document, a model for authentication forms, and authentication actions listener that toggles modal and handles sign in or create user actions via Firebase.

Develop and style email and password authentication forms—create user, sign in, and forgot password—within a modal. Toggle visibility with querySelector logic for a Firebase-ready flow.

Make your app aware of user authentication using onAuthStateChanged, show or hide elements, update the header with the user's display name, and hide the hero banner when signed in.

Enable email and password authentication in firebase and create a user with the email and password method. Wire a create user form event listener, capture inputs, and reset them.

Show a user dashboard after sign-in or account creation, including sign-out and profile photo uploads. Build UI elements that reveal content for authenticated users.

Implement a sign out feature by creating a sign out function that calls Firebase's sign out method, wiring it into authentication actions listener with clicks, and invoking hide elements function.

Grab sign-in form values and pass them to Firebase to authenticate existing users using the sign in with email and password method within a form event listener.

Learn to reset passwords by sending the user's email to Firebase to send a password reset email, using a forgot password form and a submit event listener.

Handle error and success messages for sign-in and user creation by displaying Firebase errors and forgot-password success. Create a message div with display, clear functions, and auto-hide after seven seconds.

Implement a loading visual for Firebase auth actions—sign in, create user, and reset password—to provide feedback during requests. Create and invoke show/hide loading across forms; note access code is required.

Learn the basics of user authorization, including user-based, role-based, and rule-based access control, as you build a to-do list app with Firestore security rules to protect user data.

Create your first to-do item by wiring a form to the clarifier store, initializing the store in test mode, and enabling a real-time listener tied to user authentication.

Learn to delete completed items by dynamically creating delete buttons for each task, wiring an event listener, and issuing a Firestore delete query using each item's ID.

Enforce cloud firestore security rules to ensure only signed-in users can read and write their own to-do lists, using uid-based matches and secure document access.