How to Build a Modern Web App with Angular and Firebase for Seamless Clinic Appointment Scheduling and Management

Introduction

Efficient appointment scheduling is crucial for healthcare providers to manage patient visits without conflicts. A modern web app built with Angular and Firebase offers a seamless solution for both patients and healthcare providers, enabling real-time appointment booking, rescheduling, and cancellations.

In this guide, you'll learn how to develop a clinic appointment scheduling app from scratch using Angular as the front-end framework and Firebase for authentication, database storage, and real-time data management.

🚀 GitHub Source Code: clinic-appointments-app

---

Features of the Web App

• Patients

  • Register/Login using Firebase Authentication
  • Book, reschedule, or cancel appointments
  • View upcoming and past appointments
  • Receive real-time appointment status updates

• Healthcare Providers

  • Manage available time slots
  • Approve, decline, or reschedule patient appointments
  • View real-time schedules
  • Notify patients about appointment changes

• Admin Panel

  • Manage doctors, patients, and appointments
  • Monitor system activity

---

Tech Stack

• Frontend: Angular 17, Angular Material, RxJS
• Backend: Firebase Firestore, Firebase Authentication, Firebase Functions
• Hosting: Firebase Hosting
• Other Tools: Bootstrap, Tailwind CSS (for UI enhancements)

---

Step 1: Setting Up the Angular Project

1. Install Angular CLI

Ensure you have Node.js installed, then install Angular CLI globally:

npm install -g @angular/cli

2. Create a New Angular Project

ng new clinic-appointment-app
cd clinic-appointment-app

Select SCSS as the styling option for better UI management.

3. Install Required Dependencies

npm install firebase @angular/fire angular-material rxjs

---

Step 2: Setting Up Firebase

1. Go to Firebase Console → Create a new project.
2. Enable Authentication (Email/Password, Google Sign-In).
3. Enable Firestore Database and set rules for read/write access.
4. Enable Firebase Hosting for deployment.
5. Enable Cloud Functions for backend logic.

---

Step 3: Configure Firebase in Angular

1. Import Firebase Modules in environment.ts

In src/environments/environment.ts, add Firebase config:

export const environment = {
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_BUCKET.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  },
  production: false
};

2. Initialize Firebase in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Step 4: Implementing User Authentication

1. Create an Authentication Service

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private afAuth: AngularFireAuth) {}

  login(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }

  register(email: string, password: string) {
    return this.afAuth.createUserWithEmailAndPassword(email, password);
  }

  logout() {
    return this.afAuth.signOut();
  }

  getUser() {
    return this.afAuth.authState;
  }
}

---

Step 5: Implement Appointment Scheduling

1. Define Appointment Model (appointment.model.ts)

export interface Appointment {
  id?: string;
  patientId: string;
  doctorId: string;
  date: string;
  time: string;
  status: 'pending' | 'approved' | 'canceled';
}

2. Create Appointment Service (appointment.service.ts)

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Appointment } from '../models/appointment.model';

@Injectable({
  providedIn: 'root'
})
export class AppointmentService {
  private collection = 'appointments';

  constructor(private firestore: AngularFirestore) {}

  bookAppointment(appointment: Appointment) {
    return this.firestore.collection(this.collection).add(appointment);
  }

  getAppointments() {
    return this.firestore.collection(this.collection).valueChanges({ idField: 'id' });
  }

  updateAppointment(id: string, data: Partial<Appointment>) {
    return this.firestore.collection(this.collection).doc(id).update(data);
  }

  cancelAppointment(id: string) {
    return this.firestore.collection(this.collection).doc(id).delete();
  }
}

---

Step 6: Creating the Appointment Booking UI

1. Create the Appointment Component

import { Component } from '@angular/core';
import { AppointmentService } from '../services/appointment.service';
import { Appointment } from '../models/appointment.model';

@Component({
  selector: 'app-appointments',
  templateUrl: './appointments.component.html'
})
export class AppointmentsComponent {
  appointments: Appointment[] = [];

  constructor(private appointmentService: AppointmentService) {
    this.loadAppointments();
  }

  loadAppointments() {
    this.appointmentService.getAppointments().subscribe(data => {
      this.appointments = data;
    });
  }

  cancel(id: string) {
    this.appointmentService.cancelAppointment(id);
  }
}

2. Add UI in appointments.component.html

<div *ngFor="let appointment of appointments">
  <p>{{ appointment.date }} at {{ appointment.time }}</p>
  <button (click)="cancel(appointment.id)">Cancel</button>
</div>

---

Step 7: Deploying the App

1. Build and Deploy on Firebase

ng build --configuration=production
firebase deploy

---

Conclusion

You now have a functional clinic appointment scheduling app built with Angular and Firebase! 🚀 Patients can book, reschedule, or cancel appointments, while healthcare providers can manage their schedules in real-time.

🔥 GitHub Repository: Complete Source Code