Database Integration & Firestore Usage - BojkovaA/CryptoTracker GitHub Wiki

Firebase Setup & Initialization

Location: src/firebase/firebase.js

The firebase.js file is a central module responsible for initializing and exporting Firebase services (such as Firestore and Authentication) so they can be reused throughout the application.

Purpose of firebase.js This file serves the following purposes:

  • Holds the Firebase project configuration – including API keys, project IDs, and other identifiers.
  • Initializes the Firebase app using the configuration object.
  • Sets up Firebase services like Firestore (database) and Firebase Auth (authentication).
  • Exports the initialized services so they can be easily imported wherever needed in the application.
// Import the functions you need from the Firebase SDKs
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

// Your Firebase configuration object
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// Initialize the Firebase app instance
const app = initializeApp(firebaseConfig);

// Initialize services
const db = getFirestore(app);     // Firestore Database
const auth = getAuth(app);        // Authentication Service

// Export the services to use them across the app
export { db, auth };

Working with Firestore: Reading and Writing Data

Once Firebase has been initialized in firebase.js, we can start interacting with the Firestore database using the db instance.

This section explains how to fetch data and write data to Firestore using examples from the actual application. In addition to Firestore, our app also uses Firebase Authentication to register, log in, and log out users.

Reading Data from Firestore

To retrieve data, we use functions like getDoc, getDocs, collection, and doc. After the user successfully logs in, we may want to retrieve additional profile information stored in Firestore — such as their full name or username. This is useful when Firebase Authentication doesn't store all the user metadata we need (e.g., displayName).

import { doc, getDoc } from 'firebase/firestore';
import { updateProfile } from 'firebase/auth';
import { db } from '@/firebase/firebase';

// 1. Create a reference to the user document in the "users" collection
const docRef = doc(db, 'users', user.uid);

// 2. Fetch the document from Firestore using getDoc()
const docSnap = await getDoc(docRef);

// 3. If the document exists, extract user data and update the display name
if (docSnap.exists()) {
  const userData = docSnap.data();

  // 4. Update the Firebase Auth profile with the username from Firestore
  await updateProfile(user, { displayName: userData.username });
}

  • doc(db, 'users', user.uid) creates a reference to the specific user’s document in the users collection (based on their UID).

  • getDoc() reads the data from that document in Firestore.

  • If the document exists, we extract the stored username and update the Firebase Auth profile using updateProfile() so that the display name is set correctly across the app.

Writing Data from Firestore

When a new user registers, we often want to store additional profile information — such as full name or username — that is not included in Firebase Auth by default. For that, we use Firestore as our database.

import { doc, setDoc } from 'firebase/firestore';
import { db } from '@/firebase/firebase';

// Save user data to Firestore
await setDoc(doc(db, 'users', userCredential.user.uid), {
  fullName: form.value.fullName,
  username: form.value.username,
  email: form.value.email,
});

  • doc(db, 'users', userCredential.user.uid') creates a reference to the user's document in the users collection using their unique UID.

  • setDoc() writes the provided data to that document.

    • If the document doesn’t exist, Firestore will create it.

  • We store custom user details like fullName, username, and email.