Build a Notes App in React with Firebase

If you’re looking to enhance your React skills while learning how to integrate Firebase, building a simple notes app is an excellent project. This guide will take you through the process, step by step, ensuring you gain hands-on experience with both technologies. By the end of this tutorial, you’ll not only create a fully functional notes app but also understand how to manage state and interact with a real-time database.

Prerequisites

Before we dive in, ensure you have the following:

• Basic knowledge of React and JavaScript.
• A Firebase account.
• Node.js and npm installed on your computer.
• A code editor (like Visual Studio Code).

Setting Up the React Project

First, let’s set up our React application. Open your terminal and run the following commands:

npx create-react-app notes-app
cd notes-app
npm start

Once your app is running, you should see the default React welcome screen in your browser at http://localhost:3000.

Installing Firebase

We need to install Firebase to enable data storage and retrieval for our notes app. In your terminal, run:

npm install firebase

Setting Up Firebase

Go to the Firebase Console and create a new project. Follow these steps:

1. Click “Add Project”.
2. Provide a name for your project and press “Continue”.
3. Disable Google Analytics for simplicity and click “Create Project”.

Once your project is created, add a Web App by clicking on the Web icon (

) in your project dashboard. Register your app, and Firebase will provide you with a configuration object that you’ll need to copy.

Configuring Firebase in Your Project

Create a new file named firebase.js in the src directory and paste the Firebase configuration object you copied:

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 };

Creating the UI for Your Notes App

Now that Firebase is set up, let’s create a simple user interface for the notes application. Open your App.js file and replace its content with:

import React, { useState, useEffect } from 'react';
import { db } from './firebase';
import { collection, addDoc, getDocs, deleteDoc, doc } from 'firebase/firestore';
import './App.css';

function App() {
    const [notes, setNotes] = useState([]);
    const [note, setNote] = useState('');

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

    const createNote = async () => {
        if (note) {
            await addDoc(notesCollectionRef, { text: note });
            setNote('');
            fetchNotes();
        }
    };

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

    const fetchNotes = async () => {
        const data = await getDocs(notesCollectionRef);
        setNotes(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    };

    useEffect(() => {
        fetchNotes();
    }, []);

    return (
        

            
Notes App
             setNote(e.target.value)} 
                placeholder="Type your note..." 
            />
            Add Note
            

                {notes.map((note) => (
                    

                        {note.text}
                         deleteNote(note.id)}>Delete
                    
                ))}
            
        
    );
}

export default App;

Understanding the Code

Here’s a breakdown of the key components in our App component:

• useState: This hook manages our notes and current note input state.
• createNote: A function that creates a new note in the Firestore database.
• deleteNote: A function that deletes a note from the Firestore database.
• fetchNotes: This function retrieves notes from Firestore, updating the local state whenever notes change.
• useEffect: Used to fetch notes when the component mounts.

Styling the App

To make your application look better, add some basic styling. Open App.css and add the following CSS:

.App {
    max-width: 600px;
    margin: auto;
    text-align: center;
    padding: 1rem;
}

input {
    padding: 0.5rem;
    width: 70%;
}

button {
    padding: 0.5rem;
    margin-left: 5px;
}

div > div {
    margin: 1rem 0;
}

Testing the Application

You’re now ready to test your notes app. Run your application using:

npm start

At this point, you should be able to add notes, view them, and delete them as needed. Each operation reflects in real-time in the database thanks to Firebase’s real-time capabilities.

Enhancements and Future Work

While we have created a basic notes app, there are numerous enhancements you can implement:

• User Authentication: Use Firebase Authentication to secure your notes and allow users to sign in.
• Rich Text Editor: Integrate a rich text editor to allow users to format their notes.
• Categories and Tags: Implement a categorization system to organize notes better.
• Cloud Storage: Use Firebase Storage for file uploads related to notes.

Conclusion

Congratulations! You have successfully built a notes app using React and Firebase. This project has given you insight into state management in React, how to use Firebase Firestore for data storage, and how to create a responsive user interface.

Keep experimenting with this application by adding new features, and you will continue to grow your skills as a developer.

Happy coding!