Make notes sharing app with React and Firebase
Tags: javascript, react, webdev, firebase
Published: 2022-01-06 06:47:18


`Hello 👋`

### Demo
![showcase.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1641447302153/aSJPOACRV.gif)


### Prerequisites 
- Basic understanding of React JS
- Node JS

### Step 1 - `create-react-app`
```bash
$ npx create-react-app@latest mynoteapp
```

### Step 2 - Creating TextArea 
```html
<textarea id="txt" cols="30" rows="10" placeholder="Enter some text!" value={text} onChange={e => setText(e.target.value)} onKeyDown={keySound}></textarea>
```
**Styling **🌈
```css
*{
  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;
}
```
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,
```bash
$ npm i dat.gui
```
- Import it to `Textarea.js`
```js
import * as dat from 'dat.gui';
```
- Initialize `dat.gui`
```js
const gui = await new dat.GUI({hideable: false});
```
- Create objects
```js
const obj = {
            fontSize : 25,
            fontFamily : 'monospace',
            saveFile: () => {
                const btn = document.querySelector('#saveBtn')
                btn.click()
            }
        }
```
- Add options
1) Font size
```js
 gui.add(obj, 'fontSize').min(8).max(60).step(1).onChange(e => {
            document.querySelector('textarea').style.fontSize = `${e}px`
        })
```
2) Font family
```js
gui.add(obj, 'fontFamily', {
            'Monospace': 'monospace',
            'Roboto': 'Roboto',
            'Poppins': 'Poppins',
            'Cursive': 'Cursive',
        }).onChange(e => {
            document.querySelector('textarea').style.fontFamily = e
        })
```
3) Save button
```js
gui.add(obj, 'saveFile')
```

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

![GUI panel](https://cdn.hashnode.com/res/hashnode/image/upload/v1641449042036/RutHuVNDC.png)

### Step 4 - Setting up database
- Go to [Google Firebase Console](https://console.firebase.google.com/)
- Create a **new project**, give it a name as you wish
- Create a new **web** application
![Web app](https://cdn.hashnode.com/res/hashnode/image/upload/v1641449238223/GhV-71Q4a.png)
- Install **firebase** to your react application
```bash
$ npm install firebase
```
- Copy your credentials and create `fireabse.js` in the `src` directory of your React application

`firebase.js`
```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
```
- Now go back again to your **Firebase** project 
- Go to `Firestore Database`
![Firestore](https://cdn.hashnode.com/res/hashnode/image/upload/v1641449956301/xgAMqGi1-.png)
- 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1641450155123/R3ASwxwaj.png)
- Paste the following code to the **rules playground** and **publish it**
```js
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
- Now go back to your React project

- Go to `Textarea.js` and import `database`
```js
import db from '../firebase'
```
- Create a `save function`
```js
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}`)
    }
```
To generate slug, you can use [tiny-unique-id](https://www.npmjs.com/package/tiny-unique-id)
- Loading created notes
```js
useEffect(() => {
        const handleLoad = async () => {
            const doc = await db.collection('notes').doc(slug).get()
            setText(doc.data().text)
        }
        handleLoad()
    }, [slug])
```
Check out the full source code: https://github.com/codewithsnowbit/notes-share-react

***
Thank you for reading

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)