Firebase RealTime and Firestore CRUD Operations in React

Preqrequisite

• This project requires firebase, to install firebase, run npm install firebase

Usage:

• Fill all the database configuration (from your firebase project)
• Click the Initialize Firebase button
• You can now test all CRUD for both RealTime database and Firestore Database, enjoy!

Firebase Configuration and Setup:

• App Initialization: Use Firebase's SDK (initializeApp) to set up Firebase services.
• LocalStorage for Configuration: Store configuration (API keys, etc.) in localStorage.
• Clear Config: Option to clear stored Firebase configuration settings.

RealTime Database CRUD Operations:

• Create: Use set() to write new data at a specific reference.
• Read: Use onValue() to listen for real-time data updates.
• Update: Use update() to modify existing data in the database.
• Delete: Use remove() to delete data at a reference.

Firestore CRUD Operations:

• Create: Use setDoc() to add or overwrite documents in Firestore.
• Read: Use onSnapshot() to read real-time updates from Firestore documents.
• Update: Use updateDoc() to change existing fields within a document.
• Delete: Use deleteDoc() to delete documents from Firestore.

Features:

• User-friendly forms allow for input for database read/write operations.
• Ability to manage both Realtime Database and Firestore Database with CRUD operations.
• Configuration setup stored and can be cleared at any time.

Database Initialization:

• Firebase app and services are initialized based on configuration data.
• Errors are caught during the initialization and CRUD operations with appropriate alerts.

Code Implementation Details:

• Data is cleared after every CRUD operation.
• Conditional checks prevent executing CRUD operations if the databases are not properly initialized.