Build a Real-Time Blood Donor App with Angular 20, Google Maps, and Firebase

Build a location-based real-time blood donor application using Angular 20, Google Maps, and Firebase Realtime Database. Learn how to create, read, and display donor locations live on a map.

In this tutorial, you’ll build a blood donor app that displays donor locations in real-time using Firebase Realtime Database and Google Maps in an Angular 20 application. This is a great example of combining geolocation, real-time data, and modern UI design.

Prerequisites

Make sure you have the following installed:

• Node.js v20+

• Angular CLI v20+

• Firebase account

• Google Maps API Key with Maps JavaScript API enabled

As usual, we have to make sure Node.js is installed correctly before going to the main steps. Type this command in the terminal or command line to check the installed Node.js and NPM.

node -v
v23.11.0
npm -v
11.4.1

If there's no Node.js and NPM installed, go to the Node.js official site, then download and install it.

Set Up Google Maps

To use the Google Maps JavaScript API, we need a Google Maps API key. The Google Maps JavaScript API lets you customize maps with your content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain), which you can modify using layers and styles, controls and events, and various services and libraries.

Next, open your browser the go to the Google Developer Console. You will be taken to this Google Developer Console page.

Just scroll through the default opened projects, then it will take you to this dialog.

Click the "New Project" button, then it will take you to the New Google Project page.

Fill in the project name and leave other fields as default, then click the "Create" button and it will take to the Google Developer Console home page with the default opened project. Select again the project, then choose the newly created Angular Maps project and click the "OK" button. It will take you to the Angular Maps project dashboard without any APIs enabled.

Click the "Enable API" button, then it will take you to this Google APIs library page.

Find and choose the Maps JavaScript API, then it will take you to this Maps JavaScript API page.

Just click on the "Enable" button, then it will take you back to the Maps Javascript API dashboard.

Click on the Credentials link, then it will take you to the Credentials page.

Click on the "+ Create Credentials" link, then choose "API KEY", and it will take you to the API KEY dialog. Copy and paste the newly created API KEY to your Notepad or Text Editor for use in the Angular app.

Set Up Firebase Project

Next, we will set up or create a new Google Firebase project that can use the Realtime Database. Just open your browser, then go to Google Firebase Console, and it will take you to this page.

From that page, click the "+" add project button to create a Google Firebase project then it will be redirected to this page.

Type the previously created Google APIs project, then choose the existing Google APIs project and click the "Continue" button.

This time, choose not to add Firebase analytics for now, then click the "Add Firebase" button. And now, the Firebase will be added to the Angular Maps project.

Click the "Continue" button, then it will take you to the Firebase Angular Maps project dashboard.

Click the "Database" menu, then it will take you to the Firebase Database dashboard.

Scroll down and find "Or Choose Realtime Database," then click on the "Create Database" button. Next, it will take you to the "Security rules for Realtime Database" dialog.

Choose the "Start in test mode" radio button, then click on the "Enable" button, and it will take to the "Realtime Database" dashboard. Now, the Google Firebase Realtime Database is ready to use with your Angular Maps web app.

Create an Angular 20 Project

In the prerequisites step, we have checked the Node.js and NPM versions. Now, we have to install or check the Angular CLI version. The Angular CLI is a tool to initialize, develop, scaffold, and maintain Angular applications. From the Terminal or Node Command Line, type this command to install or update the Angular CLI.

sudo npm uninstall @angular/cli -g
sudo npm install -g @angular/cli@20

Now, we have the latest version of Angular when this example was written.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 20.0.0
Node: 23.11.0 (Unsupported)
Package Manager: npm 11.4.1
OS: darwin arm64

Angular: undefined
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0 (cli-only)
@angular-devkit/core         20.0.0 (cli-only)
@angular-devkit/schematics   20.0.0 (cli-only)
@schematics/angular          20.0.0 (cli-only)

Next, create an Angular application for this Google Maps Firebase Realtime Blood Donor App by typing this command.

ng new blood-donor-app --style=scss --routing

Leave all questions as default. Next, to sanitize the newly created Angular project, go to that project folder and then run the Angular application.

cd blood-donor-app 
ng serve --open

You will see this page or view when you open "http://localhost:4200/" in your browser, which means Angular is ready to go.

Add the Firebase SDK:

npm install @angular/fire firebase

Create a firebase-config.ts file in /src/app:

// src/app/firebase-config.ts
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  databaseURL: "https://your-app.firebaseio.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "XXXXXXX",
  appId: "YOUR_APP_ID"
};

Install Angular Material & Google Maps

ng add @angular/material
npm install @angular/google-maps

Update app.config.ts::

import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { firebaseConfig } from './firebase-config';
import { initializeApp } from 'firebase/app';
import { provideDatabase, getDatabase } from '@angular/fire/database';
import { provideAnimations } from '@angular/platform-browser/animations';
import { GoogleMapsModule } from '@angular/google-maps';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideDatabase(() => getDatabase()),
    provideAnimations(),
    importProvidersFrom(GoogleMapsModule),
  ]
};
function provideFirebaseApp(arg0: () => any): import("@angular/core").Provider | import("@angular/core").EnvironmentProviders {
  throw new Error('Function not implemented.');
}

Integrate Firebase Realtime Database

Create a service donor.service.ts:

import { Injectable } from "@angular/core";
import { child, getDatabase, onValue, push, ref, set } from "@angular/fire/database";

@Injectable({ providedIn: 'root' })
export class DonorService {
    db = getDatabase();

    addDonor(donor: any) {
        const id = push(child(ref(this.db), 'donors')).key!;
        return set(ref(this.db, `donors/${id}`), donor);
    }

    getDonors(callback: (data: any) => void) {
        onValue(ref(this.db, 'donors'), (snapshot) => {
            const donors = snapshot.val();
            callback(Object.values(donors || {}));
        });
    }
}

Build Google Maps with Live Markers

Create a new component:

ng g component components/map

In components/map.ts:

import { Component, OnInit } from '@angular/core';
import { DonorService } from '../../donor.service';
import { CommonModule } from '@angular/common';
import { GoogleMapsModule } from '@angular/google-maps';

@Component({
  selector: 'app-map',
  imports: [CommonModule, GoogleMapsModule],
  templateUrl: './map.html',
  styleUrl: './map.scss'
})
export class Map implements OnInit {
  donors: any[] = [];
  center = { lat: -6.2, lng: 106.8 };
  zoom = 10;

  constructor(private donorService: DonorService) { }

  ngOnInit() {
    this.donorService.getDonors((data) => {
      this.donors = data;
    });
  }
}

In components/map.html:

<google-map [height]="'500px'" [width]="'100%'" [center]="center" [zoom]="zoom">
  <map-marker *ngFor="let donor of donors" [position]="{ lat: donor.lat, lng: donor.lng }" [label]="donor.name">
  </map-marker>
</google-map>

Add Donor Form with Geolocation

Create a new component:

ng g component components/donor-form

In components/donor-form.ts:

import { Component } from '@angular/core';
import { DonorService } from '../../donor.service';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-donor-form',
  imports: [CommonModule, MatFormFieldModule, FormsModule],
  templateUrl: './donor-form.html',
  styleUrl: './donor-form.scss'
})
export class DonorForm {
  name = '';
  lat = 0;
  lng = 0;

  constructor(private donorService: DonorService) {
    navigator.geolocation.getCurrentPosition(pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;
    });
  }

  submit() {
    this.donorService.addDonor({ name: this.name, lat: this.lat, lng: this.lng });
  }
}

In components/donor-form.html:

<form (ngSubmit)="submit()">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput [(ngModel)]="name" name="name" required>
  </mat-form-field>
  <button mat-raised-button type="submit">Register as Donor</button>
</form>

Run and Test the App

To run this Angular Google Maps Firebase Realtime Blood Donor App, simply type this Angular command.

ng serve --open

Conclusion

You’ve now built a fully functional real-time blood donor app using Angular 20, Firebase Realtime Database, and Google Maps. This app can be extended with Firebase Authentication, filtering donors by blood type, or even using Firestore for advanced queries.

You can get the full source code from our GitHub.

If you don’t want to waste your time designing your front-end or your budget to spend by hiring a web designer, then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That's just the basics. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

• Master en JavaScript: Aprender JS, jQuery, Angular 8, NodeJS
• Angular 8 - Complete Essential Guide
• Learn Angular 8 by creating a simple full-stack web App
• Angular 5 Bootcamp FastTrack
• Angular 6 - Soft & Sweet
• Angular 6 with TypeScript

Thanks!