{"id":8237,"date":"2025-07-24T09:32:41","date_gmt":"2025-07-24T09:32:41","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=8237"},"modified":"2025-07-24T09:32:41","modified_gmt":"2025-07-24T09:32:41","slug":"build-a-notes-app-in-react-with-firebase-5","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-notes-app-in-react-with-firebase-5\/","title":{"rendered":"Build a Notes App in React with Firebase"},"content":{"rendered":"<h1>Building a Notes App in React with Firebase<\/h1>\n<p>Creating a notes app is a fantastic way to enhance your skills in web development, especially when using modern technologies like React and Firebase. This guide will take you through the entire process of developing a notes application, focusing on setup, functionality, and design for a seamless user experience.<\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#introduction\">Introduction<\/a><\/li>\n<li><a href=\"#prerequisites\">Prerequisites<\/a><\/li>\n<li><a href=\"#setting-up-firebase\">Setting Up Firebase<\/a><\/li>\n<li><a href=\"#building-the-react-app\">Building the React App<\/a><\/li>\n<li><a href=\"#implementing-crud-operations\">Implementing CRUD Operations<\/a><\/li>\n<li><a href=\"#creating-the-user-interface\">Creating the User Interface<\/a><\/li>\n<li><a href=\"#testing-and-deployment\">Testing and Deployment<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<h2 id=\"introduction\">Introduction<\/h2>\n<p>In today&#8217;s digital world, note-taking applications are a go-to for many users. By leveraging React for the frontend and Firebase for the backend, we can develop a smooth, responsive, and scalable notes application. This app will allow users to create, read, update, and delete notes, providing a rich user experience.<\/p>\n<h2 id=\"prerequisites\">Prerequisites<\/h2>\n<p>Before we plunge into development, you should have:<\/p>\n<ul>\n<li>Basic understanding of <strong>JavaScript<\/strong> and <strong>React<\/strong>.<\/li>\n<li>A Firebase account.<\/li>\n<li>Node.js and npm installed on your machine.<\/li>\n<li>Familiarity with CSS for styling (optional).<\/li>\n<\/ul>\n<h2 id=\"setting-up-firebase\">Setting Up Firebase<\/h2>\n<p>Follow these steps to set up Firebase for your notes app:<\/p>\n<ol>\n<li>Go to the <a href=\"https:\/\/firebase.google.com\" target=\"_blank\">Firebase Console<\/a> and create a new project.<\/li>\n<li>Click on \u201cAdd app\u201d and choose the web platform.<\/li>\n<li>Copy the Firebase initialization code, which looks something like this:<\/li>\n<\/ol>\n<pre><code>const firebaseConfig = {\n    apiKey: \"YOUR_API_KEY\",\n    authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n    projectId: \"YOUR_PROJECT_ID\",\n    storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n    messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n    appId: \"YOUR_APP_ID\"\n};<\/code><\/pre>\n<p>Make sure to replace the placeholders with your actual project credentials.<\/p>\n<ol start=\"4\">\n<li>Enable Firestore Database: From the left menu, navigate to Firestore Database and click on &#8220;Create Database.&#8221; Choose &#8220;Start in Test Mode&#8221; for development purposes.<\/li>\n<\/ol>\n<h2 id=\"building-the-react-app\">Building the React App<\/h2>\n<p>Now that Firebase is set up, let\u2019s build the React application!<\/p>\n<ol>\n<li>Create a new React app using Create React App:<\/li>\n<\/ol>\n<pre><code>npx create-react-app notes-app<\/code><\/pre>\n<ol start=\"2\">\n<li>Navigate to your project directory:<\/li>\n<\/ol>\n<pre><code>cd notes-app<\/code><\/pre>\n<ol start=\"3\">\n<li>Install Firebase SDK:<\/li>\n<\/ol>\n<pre><code>npm install firebase<\/code><\/pre>\n<ol start=\"4\">\n<li>Set up the Firebase configuration by creating a file named <strong>firebase.js<\/strong> in the <strong>src<\/strong> folder:<\/li>\n<\/ol>\n<pre><code>import { initializeApp } from 'firebase\/app';\nimport { getFirestore } from 'firebase\/firestore';\n\nconst firebaseConfig = { \/* your config *\/ };\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };<\/code><\/pre>\n<h2 id=\"implementing-crud-operations\">Implementing CRUD Operations<\/h2>\n<p>Now, let\u2019s implement the core functionalities: Create, Read, Update, and Delete (CRUD) for the notes.<br \/> We will create a new component called <strong>Notes.js<\/strong>.<\/p>\n<pre><code>import React, { useEffect, useState } from 'react';\nimport { db } from '.\/firebase';\nimport { collection, addDoc, deleteDoc, doc, onSnapshot } from 'firebase\/firestore';\n\nconst Notes = () =&gt; {\n    const [notes, setNotes] = useState([]);\n    const [inputNote, setInputNote] = useState('');\n\n    useEffect(() =&gt; {\n        const unsubscribe = onSnapshot(collection(db, \"notes\"), (snapshot) =&gt; {\n            setNotes(snapshot.docs.map(doc =&gt; ({ id: doc.id, ...doc.data() })));\n        });\n        return () =&gt; unsubscribe();\n    }, []);\n\n    const addNote = async (e) =&gt; {\n        e.preventDefault();\n        if (inputNote === \"\") return;\n        await addDoc(collection(db, \"notes\"), { text: inputNote });\n        setInputNote('');\n    };\n\n    const deleteNote = async (id) =&gt; {\n        await deleteDoc(doc(db, \"notes\", id));\n    };\n\n    return (\n        <div>\n            \n                 setInputNote(e.target.value)} \n                    placeholder=\"Add a note\"\n                \/&gt;\n                <button type=\"submit\">Add Note<\/button>\n            \n            <ul>\n                {notes.map(note =&gt; (\n                    <li>\n                        {note.text}\n                        <button> deleteNote(note.id)}&gt;Delete<\/button>\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default Notes;<\/code><\/pre>\n<h2 id=\"creating-the-user-interface\">Creating the User Interface<\/h2>\n<p>A clean user interface is crucial for usability. You might want to use CSS frameworks like Bootstrap or Material-UI, or simply style using plain CSS. Here\u2019s an example of adding some basic CSS to style your notes app:<\/p>\n<pre><code>body {\n    font-family: Arial, sans-serif;\n}\n\nform {\n    margin-bottom: 20px;\n}\n\ninput {\n    padding: 10px;\n    margin-right: 10px;\n}\n\nbutton {\n    padding: 10px;\n}\n\nul {\n    list-style-type: none;\n}\n\nli {\n    background: #f8f8f8;\n    padding: 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n}\n\nbutton {\n    margin-left: 10px;\n    background-color: red;\n    color: white;\n    border: none;\n}<\/code><\/pre>\n<h2 id=\"testing-and-deployment\">Testing and Deployment<\/h2>\n<p>Once your application is working as expected, it&#8217;s time to test and deploy:<\/p>\n<ol>\n<li>Run your React app locally:<\/li>\n<\/ol>\n<pre><code>npm start<\/code><\/pre>\n<p>Make sure to test all features: creating, reading, and deleting notes.<\/p>\n<ol start=\"2\">\n<li>To deploy the app, you can use <strong>Firebase Hosting<\/strong>. Run the following commands:<\/li>\n<\/ol>\n<pre><code>npm install -g firebase-tools\nfirebase login\nfirebase init<\/code><\/pre>\n<p>Select &#8220;Hosting,&#8221; then follow the prompts. After that, you can deploy using:<\/p>\n<pre><code>firebase deploy<\/code><\/pre>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Congratulations! You\u2019ve successfully built and deployed a notes app using React and Firebase. You&#8217;ve learned how to handle CRUD operations and interface with a backend service effortlessly. As you continue your developer journey, consider enriching your notes app by adding features such as user authentication or saving notes locally for offline access.<\/p>\n<p>Feel free to share your thoughts or improvements you make to this project in the comments below. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a Notes App in React with Firebase Creating a notes app is a fantastic way to enhance your skills in web development, especially when using modern technologies like React and Firebase. This guide will take you through the entire process of developing a notes application, focusing on setup, functionality, and design for a seamless<\/p>\n","protected":false},"author":99,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":{"0":"post-8237","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=8237"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8237\/revisions"}],"predecessor-version":[{"id":8238,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8237\/revisions\/8238"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=8237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=8237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=8237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}