DEV Community

Cover image for Make notes sharing app with React and Firebase
Dhairya Shah
Dhairya Shah

Posted on Originally published at codewithsnowbit.hashnode.dev

Make notes sharing app with React and Firebase

#webdev #javascript #react #firebase

Hello 👋

Demo

showcase.gif

Prerequisites

  • Basic understanding of React JS
  • Node JS

Step 1 - create-react-app 

$ npx create-react-app@latest mynoteapp
Enter fullscreen mode Exit fullscreen mode

Step 2 - Creating TextArea 

<textarea id="txt" cols="30" rows="10" placeholder="Enter some text!" value={text} onChange={e => setText(e.target.value)} onKeyDown={keySound}></textarea>
Enter fullscreen mode Exit fullscreen mode

*Styling *🌈

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100%;
  overflow: hidden;
}
textarea{
  width: 100%;
  height: 100vh;
  resize: none;
  margin: 5px;
  font-size: 25px;
  outline: none;
  border: none;
}
Enter fullscreen mode Exit fullscreen mode

So, now the Textarea is covered the whole page without outlines and borders

Step 3 - Add Settings Menu using dat.gui

  • Install data.gui using, 
$ npm i dat.gui
Enter fullscreen mode Exit fullscreen mode
  • Import it to Textarea.js 
import * as dat from 'dat.gui';
Enter fullscreen mode Exit fullscreen mode
  • Initialize dat.gui 
const gui = await new dat.GUI({hideable: false});
Enter fullscreen mode Exit fullscreen mode
  • Create objects 
const obj = {
            fontSize : 25,
            fontFamily : 'monospace',
            saveFile: () => {
                const btn = document.querySelector('#saveBtn')
                btn.click()
            }
        }
Enter fullscreen mode Exit fullscreen mode
  • Add options 1) Font size 
 gui.add(obj, 'fontSize').min(8).max(60).step(1).onChange(e => {
            document.querySelector('textarea').style.fontSize = `${e}px`
        })
Enter fullscreen mode Exit fullscreen mode

2) Font family

gui.add(obj, 'fontFamily', {
            'Monospace': 'monospace',
            'Roboto': 'Roboto',
            'Poppins': 'Poppins',
            'Cursive': 'Cursive',
        }).onChange(e => {
            document.querySelector('textarea').style.fontFamily = e
        })
Enter fullscreen mode Exit fullscreen mode

3) Save button

gui.add(obj, 'saveFile')
Enter fullscreen mode Exit fullscreen mode

This will create a GUI panel on the top-right corner of the page

GUI panel

Step 4 - Setting up database

  • Go to Google Firebase Console
  • Create a new project, give it a name as you wish
  • Create a new web application Web app
  • Install firebase to your react application 
$ npm install firebase
Enter fullscreen mode Exit fullscreen mode
  • Copy your credentials and create fireabse.js in the src directory of your React application

firebase.js

import firebase from "firebase/compat/app"
import "firebase/compat/firestore"

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_ID",
    appId: "YOUR_APP_ID"
  };


const app = firebase.initializeApp(firebaseConfig);

const db = app.firestore();


export default db
Enter fullscreen mode Exit fullscreen mode
  • Now go back again to your Firebase project
  • Go to Firestore Database Firestore
  • Create a database
  • And choose production mode
  • Choose any location you want
  • After creating the database, go to the rules tab of the dashboard Rules
  • Paste the following code to the rules playground and publish it 
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

  • Now go back to your React project

  • Go to Textarea.js and import database

import db from '../firebase'
Enter fullscreen mode Exit fullscreen mode
  • Create a save function 
const handleSave = async () => {
        let slug = tinyid.unique()
        keySound()
        let today = new Date();
        const dd = String(today.getDate()).padStart(2, '0');
        const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        const yyyy = today.getFullYear();
        today =  dd + '/' + mm + '/' + yyyy
        await db.collection('notes').doc(slug).set({
            text: text,
            date: today,
        })
        navigate(`/${slug}`)
    }
Enter fullscreen mode Exit fullscreen mode

To generate slug, you can use tiny-unique-id

  • Loading created notes 
useEffect(() => {
        const handleLoad = async () => {
            const doc = await db.collection('notes').doc(slug).get()
            setText(doc.data().text)
        }
        handleLoad()
    }, [slug])
Enter fullscreen mode Exit fullscreen mode

Check out the full source code: https://github.com/codewithsnowbit/notes-share-react

Thank you for reading

Top comments (0)