Building a Notes App in React with Firebase

Creating a notes application provides an excellent learning opportunity for developers looking to enhance their skills in React and Firebase. This tutorial will guide you through building a simple notes app that allows users to create, read, update, and delete notes efficiently using Firebase as the backend.

Table of Contents

• Prerequisites
• Setting Up Firebase
• Creating a React App
• Installing Firebase
• Implementing the Notes App
• Styling the App
• Final Thoughts

Prerequisites

Before you begin following this tutorial, ensure that you have:

• Basic knowledge of JavaScript and React
• An active Firebase account
• Node.js and npm installed on your machine

Setting Up Firebase

To use Firebase in our application, we need to set up a Firebase project:

1. Go to the Firebase Console.
2. Create a new project by clicking on “Add Project”.
3. Follow the steps, and when prompted, enable Firestore Database.
4. Once the project is created, go to the project settings and scroll down to “Your apps” section.
5. Add a new Web app by clicking on the “Add app” icon.
6. Copy the Firebase SDK configuration object as we will need it in our React app.

Creating a React App

For our notes app, we will create a new React application using Create React App.

npx create-react-app notes-app

Navigate to your application directory:

cd notes-app

Installing Firebase

Once you’ve created your React app, install Firebase by running:

npm install firebase

Implementing the Notes App

Now, let’s implement our notes functionality in a structured manner.

Creating the Firebase Configuration

Create a new file named firebase-config.js in the src folder and add the following code using your Firebase configuration:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

Setting Up Firestore

To keep our notes, we will leverage Firestore. Each note will have a title and content. Update your main app component to include Firestore functionality.

import React, { useEffect, useState } from 'react';
import { db } from './firebase-config';
import { collection, addDoc, onSnapshot, deleteDoc, doc } from 'firebase/firestore';

const App = () => {
  const [notes, setNotes] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const notesCollectionRef = collection(db, 'notes');

  const createNote = async(e) => {
    e.preventDefault();
    await addDoc(notesCollectionRef, { title, content });
    setTitle('');
    setContent('');
  };

  useEffect(() => {
    const unsubscribe = onSnapshot(notesCollectionRef, (snapshot) => {
      setNotes(snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    });

    return () => unsubscribe();
  }, []);

  const deleteNote = async(id) => {
    const noteDoc = doc(db, 'notes', id);
    await deleteDoc(noteDoc);
  };

  return (
    <div>
      <h1>Notes App</h1>
      <form onSubmit={createNote}>
        <input type="text" placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
        <textarea placeholder="Content" value={content} onChange={(e) => setContent(e.target.value)}></textarea>
        <button type="submit">Add Note</button>
      </form>
      <ul>
        {notes.map(note => (
          <li key={note.id}>
            <h2>{note.title}</h2>
            <p>{note.content}</p>
            <button onClick={() => deleteNote(note.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Understanding the Code

Let’s dissect what we have done:

• We set up state variables for notes, title, and content.
• We created a function, createNote, that adds a new document in our Firestore collection when a note is submitted.
• We set up a real-time listener using onSnapshot to retrieve notes from Firestore and update our state.
• A deleteNote function allows users to remove notes.
• The JSX returns a form for creating notes and a list that displays each note along with a delete button.

Styling the App

To make our notes app visually appealing, we can add some simple CSS styles. Create a file named App.css in the src directory:

h1 {
  text-align: center;
}

form {
  margin: 20px;
}

input, textarea {
  width: calc(100% - 20px);
  margin: 5px;
  padding: 10px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
}

li {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}

Import the CSS file in your App.js file:

import './App.css';

Final Thoughts

Congratulations! You have successfully built a notes application using React and Firebase. This project not only enhances your React skills but also provides experience with Firebase, a powerful and flexible cloud-based solution for your app backend.

Feel free to extend this project by adding features like:

• User authentication using Firebase Authentication
• Editing existing notes
• Searching for notes

Happy coding!