DEV Community

yash kumat
yash kumat

Posted on

React-Firebase CRUD Application

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

App Screenshot

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
Enter fullscreen mode Exit fullscreen mode
  • useEffect
    // useEffect - Run code indside it when there is change in second arg.
    useEffect(()=>{
        someCode
    },[dependent variable])    // When dependent variable changes useEffect runs 
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Firestore
Screenshot of Firestore document collection

  • Collection refrence
const collectionRef = collection(db, "collection_name")
Enter fullscreen mode Exit fullscreen mode
  • Create
import {addDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    await addDoc(todosCollectionRef, newTask)   // Add new doc
}
Enter fullscreen mode Exit fullscreen mode
  • Read
import {getDocs } from 'firebase/firestore'

const getTasks = async (e) => {
    const taskList = await getDocs(todosCollectionRef);   // Get all Docs
}
Enter fullscreen mode Exit fullscreen mode
  • 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 
}
Enter fullscreen mode Exit fullscreen mode
  • Delete
import {deleteDoc } from 'firebase/firestore'

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

Feedback

If you have any feedback, please reach out to us at ykumat@gmail.com

Discussion (0)