Firebase Storage & Firestore Tutorial (Beginner to Intermediate)

 Firebase provides two powerful services that work very well together:

1. Cloud Firestore – Stores structured data (text, numbers, dates, user information, etc.).

2. Firebase Storage – Stores files (images, videos, PDFs, audio files, documents, etc.).

A common use case is:

• Upload an image to Firebase Storage.

• Save the image URL and other information in Firestore.

• Display the image and data in your application.

1. What is Firestore?

Cloud Firestore is a NoSQL cloud database where data is stored as:

Collections
   └── Documents
         └── Fields

Example:

students
   └── student1
         ├── name: John
         ├── age: 22
         └── email: john@gmail.com

   └── student2
         ├── name: Mary
         ├── age: 20
         └── email: mary@gmail.com

2. What is Firebase Storage?

Firebase Storage stores files such as:

• Images

• Videos

• PDFs

• ZIP files

• Audio files

Example:

storage
 ├── profile_images
 │      ├── john.jpg
 │      └── mary.jpg
 │
 └── documents
        └── resume.pdf

3. Create a Firebase Project

Step 1

Go to:

Firebase Console

Step 2

Click:

Create Project

Example:

Project Name:
Student Portal

Click:

Continue
Finish

4. Enable Firestore

In Firebase Console:

Build
 └── Firestore Database

Click:

Create Database

Choose:

Start in Test Mode

Select nearest region.

Click:

Enable

5. Enable Storage

In Firebase Console:

Build
 └── Storage

Click:

Get Started

Choose:

Test Mode

Select location.

Click:

Done

6. Connect Firebase to Your Web Project

Install Firebase

npm install firebase

Firebase Configuration

Create:

// firebase.js

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "XXXXXX",
  appId: "XXXXXX"
};

const app = initializeApp(firebaseConfig);

export default app;

7. Initialize Firestore and Storage

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
   // your config
};

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const storage = getStorage(app);

8. Add Data to Firestore

Example:

import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

async function addStudent() {

  await addDoc(collection(db, "students"), {
      name: "John Doe",
      age: 25,
      email: "john@gmail.com"
  });

  alert("Student Added");
}

9. Read Data from Firestore

import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebase";

async function getStudents() {

  const querySnapshot = await getDocs(
      collection(db, "students")
  );

  querySnapshot.forEach((doc) => {

      console.log(doc.id);
      console.log(doc.data());

  });

}

10. Update Data in Firestore

import { doc, updateDoc } from "firebase/firestore";

const studentRef = doc(db, "students", "studentID");

await updateDoc(studentRef, {
   age: 30
});

11. Delete Data from Firestore

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(
   doc(db, "students", "studentID")
);

12. Upload Image to Firebase Storage

HTML:

<input type="file" id="image">
<button onclick="uploadImage()">
Upload
</button>

JavaScript:

import {
  ref,
  uploadBytes
} from "firebase/storage";

import { storage } from "./firebase";

async function uploadImage() {

  const file =
    document.getElementById("image").files[0];

  const storageRef =
    ref(storage, "profile_images/" + file.name);

  await uploadBytes(storageRef, file);

  alert("Upload Successful");
}

13. Get File URL

import {
  ref,
  getDownloadURL
} from "firebase/storage";

const imageRef =
  ref(storage, "profile_images/john.jpg");

const url =
  await getDownloadURL(imageRef);

console.log(url);

Output:

https://firebasestorage.googleapis.com/...

14. Upload Image and Save URL in Firestore

This is the most common real-world scenario.

import {
  ref,
  uploadBytes,
  getDownloadURL
} from "firebase/storage";

import {
  addDoc,
  collection
} from "firebase/firestore";

async function uploadStudent() {

   const file =
      document.getElementById("image").files[0];

   const storageRef =
      ref(storage, `students/${file.name}`);

   await uploadBytes(storageRef, file);

   const imageUrl =
      await getDownloadURL(storageRef);

   await addDoc(
      collection(db, "students"),
      {
         name: "John Doe",
         image: imageUrl
      }
   );

   alert("Saved Successfully");
}

Firestore Document:

{
  "name": "John Doe",
  "image": "https://firebasestorage..."
}

15. Display Data with Images

const snapshot =
   await getDocs(
      collection(db, "students")
   );

snapshot.forEach((doc) => {

   const data = doc.data();

   document.body.innerHTML += `
      <div>
         <h3>${data.name}</h3>
         <img src="${data.image}" width="150">
      </div>
   `;
});

16. Firebase Security Rules

Firestore Rules

rules_version = '2';

service cloud.firestore {

 match /databases/{database}/documents {

   match /{document=**} {

      allow read, write:
      if request.auth != null;

   }

 }

}

Storage Rules

rules_version = '2';

service firebase.storage {

 match /b/{bucket}/o {

   match /{allPaths=**} {

      allow read, write:
      if request.auth != null;

   }

 }

}

These rules mean:

✅ Logged-in users can access data.

❌ Anonymous users cannot.

17. Practical Project Idea

Student Assignment Submission Portal

Firestore Collection:

assignments

Document:

{
   "studentName": "Kayode",
   "course": "COS101",
   "fileUrl": "...",
   "dateSubmitted": "2026-06-08"
}

Workflow:

1. Student selects PDF.

2. PDF uploads to Storage.

3. File URL is generated.

4. URL and metadata saved to Firestore.

5. Lecturer views submissions from Firestore.

This is an excellent project for your Moodle, LMS, or student development training programs.

Recommended Learning Resources

• Firebase Documentation

• Firestore Documentation

• Firebase Storage Documentation

For your front-end development students, a good capstone project is a Student Portfolio System where students upload profile pictures and project files to Firebase Storage while storing their profile details, project information, and contact data in Firestore. This project demonstrates CRUD operations, file uploads, authentication, and cloud database integration in one application.