React-Firebase CRUD Application

#react #firebase #javascript #webdev

ToDo Applications are best to start learning any framework as it cover basic CRUD operations and form handling as well.

Tech Stack

Client: React, Bootstrap

Server: Firebase

Screenshots

File Structure

Form component - Input form and add document logic
CardContainer component - Read, update, delete document logic
App component - Layout (Parent component).

Features

Component Based (React)
Realtime (Firebase)
Reponsive (Bootstrap)

Lessons Learned

1. React

useState

    // useState - Assign initial value to a variable and create a function that can be used to change value of variable

    const [tasks, setTasks] = useState([])   

    // const tasks = [] , setTasks() is the function which is used to set value of tasks

useEffect

    // useEffect - Run code indside it when there is change in second arg.
    useEffect(()=>{
        someCode
    },[dependent variable])    // When dependent variable changes useEffect runs

2. Firebase

Setup


import { initializeApp } from "firebase/app";

import { getFirestore } from '@firebase/firestore'

// Firebase Configuration
const firebaseConfig = {
    apiKey: "XXXX",
    authDomain: "XXXX",
    databaseURL: "XXXX",
    projectId: "XXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX",
    appId: "XXXX",
    measurementId: "XXXX"
};

// Connect firebase to our application
const app = initializeApp(firebaseConfig);

// connect to Firestore (firebase nosql db)
export const db = getFirestore(app);

Screenshot of Firestore document collection

Collection refrence

const collectionRef = collection(db, "collection_name")

Create

import {addDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    await addDoc(todosCollectionRef, newTask)   // Add new doc
}

Read

import {getDocs } from 'firebase/firestore'

const getTasks = async (e) => {
    const taskList = await getDocs(todosCollectionRef);   // Get all Docs
}

Update

import {updateDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    const task = doc(db, "todos", id);    // find doc 
    await updateDoc(task, {isComplete: true})  // update doc 
}

Delete

import {deleteDoc } from 'firebase/firestore'

const deleteTask = async (id) => {
    const task = doc(db, "todos", id)
    await deleteDoc(task)   // Delete doc
}