The backend is an essential part of an application. It is where you save your data, execute some business logic on it and send it back to your frontend to display to the user.

When building your first app, if you set up a backend that is too complex, you may encounter problems that are difficult to solve and you may lose motivation to finish it. Firebase is a great choice to avoid this. Here is why and what I have learned using it this week.

I’m building 121convo, a tool to help online community managers or online course managers automatically match and schedule one-to-one conversations between the members who wish to do so.

Firebase has an easy-to-use database called Firestore. It is a NoSQL database. This means your data is not stored in tables with columns and rows but are simply a collection of documents with a simple structure of label of data: data item(s). This gives the flexibility to tailor the data structure how you want and change it later on in the project if you want.

Connecting your app to Firebase and its database

Working with Firestore in your application is dead simple. To connect your application to your firebase backend, in ReactJS you simply need to install a firebase package and add a few lines of code with parameters specific to your project in a separate file in your application.

These few lines connect your app to Firebase and you have access to services like authentication and database functionality such as write, update and delete. He is an example in ReactJS where I import my database, db, and the functions I need. Then I simply collect a database reference for the document (here the document identifier is ‘userId’) in the collection of documents called ‘users’.

import { db } from "../firebase.config"
import { doc, getDoc, updateDoc } from "firebase/firestore"

// Get community ID of user
const userDocRef = doc(db, 'users', userId)
const userDocSnap = await getDoc(userDocRef)
const communityId = userDocSnap.data().communityId

Firebase Cloud Functions

For data manipulation that is more complex than database interaction, for example interacting with a third-party API, you would use a Firebase Cloud Function.

This is backend code that is saved in the cloud and triggered in response to events (e.g. new record in your database) or an HTTP request (a request you can send from your frontend, for example when a user clicks on a button).

I used a cloud function to trigger sending opt-in emails to community members. For now, I have it linked to a button that the community manager who signed up to 121convo can control.

The cloud function connects to the SendGrid API, a popular batch email sending service, passes some variables such as who the email should be sent to, which email template to use (previously created and saved in SendGrid), and some variables to fill placeholders in the email template such as the name of the community to which the member belongs.

This page provides the code to do this step in 3 different ways. I picked Option 1: Cloud email service. It is very simple to use the function once it is deployed.

It is basically a URL to which you send a Get HTTP request from your application. The request includes in the body the parameters which you wish to pass to the function. In the example below I am using axios, a JS package to send the request.

const triggerEmail = async () => {

    const URL = 
    "https://us-central1-<projectid>    
    .cloudfunctions.net/<yourfunctionname>"

    const res = await axios.get(URL, {
      params: {
        to: 'recepient@email.com',
        subject: 'test email from React app',
        first_name: 'Bob',
      }
    })

In summary, Firebase is a backend solution that is approachable for beginner builders like me with clear documentation and plenty of online resources to copy or get pointers from.