The Idea Behind This Blog Entry
For one of our recent side projects at CIIT Software, we wanted to build a simple quiz app, but without spending days setting up a backend, database, and authentication. Normally, this would mean spinning up a Java/Spring server, writing a REST API, configuring a database, and managing sessions. Instead, we decided to give Firebase a try. Firestore took care of storage and scaling, Firebase Auth gave us user authentication without the hassle of managing sessions, and with Firebase Hosting our app was online in no time, complete with HTTPS out of the box. What usually feels like a long setup phase turned into a matter of hours, leaving us more time to focus on the actual quiz logic.
The Story
Hours before an event, a sponsor decided to provide a prize for one attendee. To be eligible, attendees had to agree to the terms and conditions, submit their name, and answer a question related to the event goal. Each user could only submit an answer once, and we needed to keep all the answers for analysis. Rather than setting up servers, databases and a backend, we developed a basic Angular frontend and used Firebase for everything else.
Why Firebase?
In fast-paced projects, we sometimes need a reliable solution that doesn’t require the overhead of building a full backend. Recently, our team was faced with such a situation: just hours before an event, a sponsor decided to award a prize to one of the attendees. We needed a way for attendees to submit their name, accept the terms and conditions, and answer a question, each only once. Usually, this would require setting up a server, database, authentication and hosting, but with Firebase, we had a complete solution within hours. It saved us significant time and effort by handling:
- Authentication: Anonymous sign-in out of the box.
- Database: All storage, scaling, and retrieval.
- Hosting: HTTPS-enabled Firebase Hosting meant no server setup.
- Backend Setup: We completely skipped creating a backend, REST APIs, and session management.
This allowed us to focus entirely on the frontend logic and user experience.
This tutorial will guide you through the process of building a simple Angular app, powered by Firebase, step by step.
Step 1: Creating a Firebase Project
- Go to the Firebase Console.
- Click „Add project“, enter a project name (e.g. firebase-quiz), and follow the prompts.
- Enable or skip Google Analytics depending on your needs.
- Click „Create project“.
Once your project is ready, you’ll be able to configure web apps and services.
Step 2: Registering Your Web App
- Open your project in Firebase Console.
- Click the web icon (</>) to add a new web app.
- Give it a nickname (e.g. firebase-quiz-web) and click „register app“.
- Copy the Firebase configuration object. You’ll need it for your Angular environment files.
Example configuration:
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
}
};
Step 3: Installing Firebase Libraries
In your Angular project, install Firebase and AngularFire:
npm install firebase @angular/fire
Step 4: Setting Up Authentication
- In Firebase Console, go to „Autentication -> Get Started“.
- Enable „Anonymous sign-in“.
- Save changes.
This allowed us to track users without requiring accounts. Each user automatically receives a unique UID.
Step 5: Creating the Firestore Database
- Got to „Firestore Database -> Create database“.
- Choose „Production“ or „Test mode“ depending on your project.
- Select a region close to your users and click „Enable“.
We used a single collection called quizSubmissions, where each document is keyed by user .uid. Each submission stores:
{
"fullName": "string",
"answer": "string",
"timestamp": "Date"
}
Step 6: Angular Integration
We created a standalone component (QuizComponent) and a service (AuthService) to manage authentication and submissions.
Firebase App Configuration (app.config.ts):
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideAuth(() => getAuth()),
]
};
AuthService (Anonymous Authentication):
async getOrCreateUser(): Promise<User> {
if (this.auth.currentUser) return this.auth.currentUser;
const result = await signInAnonymously(this.auth);
return result.user;
}
QuizComponent (Submission Logic):
async submit() {
this.loading = true;
try {
const user = await this.authService.getOrCreateUser();
await setDoc(doc(this.firestore, 'quizSubmissions', user.uid), {
answer: this.selectedAnswer,
fullName: this.fullName,
timestamp: new Date()
});
this.showSuccessModal = true;
} catch (error) {
this.showErrorModal = true;
} finally {
this.loading = false;
}
}
Key points:
- Each user can submit only once.
- Submissions are automatically saved in Firestore.
- The component shows success or error feedback.
Step 7: Deploying to Firebase Hosting
Install Firebase CLI:
npm install -g firebase-tools
Login to Firebase:
firebase login
Initialize your project for hosting:
firebase init
- Select „Hosting“.
- Choose your Firebase project.
- Set dist/fe/browser as your public directory.
- Configure as a single-page app: Yes.
- Deploy the project
Deploy the project:
firebase deploy
Results & Time Saved
By using Firebase, we were able to skip the usual backend development, REST API creation, and session management entirely. Firestone seamlessly took care of scaling and data storage without any setup on our side. With anonymous authentication, we could still track users without forcing them through login forms. And thanks to Firebase Hosting, the app was deployed within minutes, complete with HTTPS right out of the box. This saved several hours of development, letting us focus on the event itself rather than infrastructure.
Full Project
The complete Angular + Firebase project is available on GitHub:
- GitHub repository: https://github.com/ciitamjadibraheem/firebase-quiz
- Deployed app: https://ciit-firebase-quiz.web.app
Includes:
- Complete QuizComponent and AuthService.
- Angular environment setup for Firebase.
- Hosting configuration.
Conclusion
Firebase enabled us to build a fully functional, secure, and scalable quiz application in record time. By skipping backend development, database configuration, and hosting setup, we delivered a working solution within hours instead of days. For small, event-based projects like this, Firebase proves to be an extremely efficient choice.
