Building a Scalable Note-Taking App with Firebase

Choosing the Right Technology Stack

When starting a new project, every decision counts. From selecting the right framework to choosing the best database solution, each choice has its pros and cons. In this case, we’ll assume you’ve opted for a Single Page Application (SPA) with a separate API, leveraging the power of Firebase.

Firebase: A Comprehensive Solution

Firebase provides a suite of tools to get your project off the ground, including hosting with a free SSL certificate and global CDN, authentication, a NoSQL database, blob storage, and more. With Firebase, you can focus on building your app without worrying about the underlying infrastructure.

Setting Up Firebase

To get started, create a free Firebase account and install the Firebase CLI. Then, associate your project directory with a Firebase project and set up the necessary features, including hosting, authentication, and Firestore.

firebase init
firebase login
firebase projects:create 
firebase use 

Defining Your Data Model

In a NoSQL database like Firestore, data modeling is crucial. We’ll define a simple data model for our note-taking app, including users, notes, and comments. Each note will have a title, content, and roles object to control access.

{
  "users": {
    "userId": {
      "name": "John Doe",
      "email": "[email protected]"
    }
  },
  "notes": {
    "noteId": {
      "title": "My Note",
      "content": "This is my note",
      "roles": {
        "owner": "userId",
        "editors": ["editorId1", "editorId2"]
      }
    }
  },
  "comments": {
    "commentId": {
      "noteId": "noteId",
      "content": "This is a comment"
    }
  }
}

Securing Your Data with Firestore Rules

Firestore rules are essential for securing your data. We’ll create rules to ensure that only authorized users can access and modify notes. These rules will also enforce data structure and schema validation.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /notes/{noteId} {
      allow read: if request.auth.uid == note.roles.owner;
      allow write: if request.auth.uid == note.roles.owner || request.auth.uid in note.roles.editors;
    }
  }
}

Implementing Authentication with Firebase

Firebase provides a seamless authentication experience. We’ll use the Firebase UI component to handle authentication and authorize users to access notes.

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User is signed in
  } else {
    // User is signed out
  }
});

Creating a Note and Persisting Data

With authentication in place, we can create a note and persist data to the database using Firestore. We’ll also set up a snapshot listener to sync data in real-time.

import firebase from 'firebase/app';
import 'firebase/firestore';

const db = firebase.firestore();
const noteRef = db.collection('notes').doc();
const noteData = {
  title: 'My Note',
  content: 'This is my note',
  roles: {
    owner: 'userId',
    editors: ['editorId1', 'editorId2']
  }
};

noteRef.set(noteData).then(() => {
  console.log('Note created successfully!');
});

noteRef.onSnapshot(snapshot => {
  const note = snapshot.data();
  console.log(`Note updated: ${note.title}`);
});

The Power of Firebase

By leveraging Firebase, we’ve created a scalable, real-time, and secure note-taking app with minimal effort. We’ve avoided the hassle of provisioning servers, worrying about updates, and configuring databases. Firebase has enabled us to focus on building a great user experience.

What’s Next?

This is just the beginning. Firebase offers many more features, including Firebase Functions, Google Cloud Run, and more. Stay tuned for future articles that will dive deeper into each subject area.

• Firebase Functions
• Google Cloud Run