Building a Real-time Voting App with Angular and Firebase Realtime Database

Creating a real-time voting app can be an exciting project for developers interested in Angular and Firebase. This tutorial will guide you through the essential steps to build a responsive and dynamic voting platform that updates instantly as users cast their votes.

Prerequisites

Basic knowledge of Angular framework
Firebase account setup
Node.js and Angular CLI installed

Setting Up Firebase

First, create a Firebase project in the Firebase Console. Enable the Realtime Database and set the rules to public for testing purposes:

{ "rules": { ".read": true, ".write": true } }

Initializing Angular Project

Use Angular CLI to generate a new project:

ng new voting-app

Navigate into the project directory and install Firebase:

cd voting-app

npm install firebase @angular/fire

Configuring Firebase in Angular

Import AngularFire modules in app.module.ts and add your Firebase configuration:

import { AngularFireModule } from '@angular/fire';


import { environment } from '../environments/environment';
...

Then, initialize Firebase:

AngularFireModule.initializeApp(environment.firebaseConfig)

Building the Voting Component

Create a new component for voting:

ng generate component voting

Template for Voting

Update voting.component.html with buttons for options and display of results:

<div>


  <h3>Vote for your favorite option</h3>
  <button (click)="vote('Option1')">Option 1</button>
  <button (click)="vote('Option2')">Option 2</button>
                
                
  <h4>Results:</h4>
  <div *ngFor="let result of results">
    <p>{{result.option}}: {{result.votes}} votes</p>
  </div>
</div>

Component Logic

In voting.component.ts, set up Firebase database references and functions to handle voting and retrieve results:

import { AngularFireDatabase } from '@angular/fire/database';

...

Implement the voting function:

vote(option: string) {


  this.db.list('votes').push({ option: option });
}

Retrieve and display results by aggregating votes from Firebase.

Running Your App

Start the Angular development server:

ng serve

Open http://localhost:4200 in your browser to test the voting app. Users can now vote in real time, and results will update instantly across all connected clients.

Conclusion

Building a real-time voting app with Angular and Firebase is straightforward and effective. Firebase handles real-time data synchronization, while Angular provides a dynamic user interface. This setup can be expanded for various interactive applications beyond voting systems.

Table of Contents