Get hands-on expertise in Firebase by developing various full-stack web applications.

Become a Firebase Professional

Firstly, we will learn how to create and launch applications using Firebase in a short amount of time. Then, we will see how to use Firebase in our full-stack web applications, reaping the benefits of a backend without the complications of setting one up from scratch. This will exponentially decrease our development time. Toward the end of the module, we’ll build four applications using Firebase, with each app designed to teach us a different Firebase service, including Firebase Authentication, Cloud Firestore, Firebase Storage, and Firebase Hosting.

Full-Stack Web Applications with Firebase

<div id="loading-outer-container">
  <div id="loading-inner-container">
    <div id="loadspin">
      <div id="circle1"></div>
      <div id="circle2"></div>
    </div>
  </div>
</div>

// Function to hide and show the loading visual cue
loading = (action) => {
  if (action === 'show'){
      document.getElementById('loading-outer-container').style.display = 'block'
  } else if (action === 'hide'){
      document.getElementById('loading-outer-container').style.display = 'none'
  } else {
      console.log('loading error')   
  }
}

# Modify Each Form Submit Event Listener 

## Invoke `loading('show')`

We invoke the `loading('show')` function as the submit event happens.

## Invoke `loading('hide')`
We invoke the `loading('hide')` function in the `.catch()` of Firebase auth methods inside each submit event.

When you try to sign in, create a user, or reset your password, a request is sent to Firebase. Usually,​ that request is pretty fast, but no matter the speed​​, let's give our users some feedback by showing a loading visual to them which also enhances the UI/UX. 

Loading Visual

When you try to sign in, create a user, or reset your password, a request is sent to Firebase. Usually,​ that request is pretty fast, but no matter the speed​​, let's give our users some feedback by showing a loading visual to them which also enhances the UI/UX.

Loading Visual

Loading Visual HTML

Create the `loading` Function

Modify Each Form Submit Event Listener

Invoke `loading('show')`

Loading Visual

Loading Visual HTML

Create the loading Function

Modify Each Form Submit Event Listener

Invoke loading('show')

Create the `loading` Function

Invoke `loading('show')`