Step-by-Step Guide: Build an Image Gallery App with Angular 19 and Firebase

Introduction

🔥 Want to build an image gallery with Angular 19 and Firebase? 🔥

Angular 19 is a powerful framework for building modern web applications. In this tutorial, we’ll guide you step by step on how to create an Image Gallery Application using Angular 19, Firebase Storage, and Tailwind CSS for styling.

By the end of this guide, you’ll have a fully functional image upload and display system, authentication with Firebase Auth, and an improved UI/UX design using Tailwind CSS.

📌 What we’ll cover in this tutorial: ✅ Setting up Firebase for storage and authentication
✅ Creating the backend with Firebase Functions
✅ Building the frontend with Angular 19 & Tailwind CSS
✅ Implementing image upload and display
✅ Adding authentication with Firebase Auth
✅ Enhancing the UI/UX for a modern feel

Let’s get started! 🚀

Create An Angular Project.

ng new my-angular19gallery-app --style=css --routing=true

Create the file .postcssrc.json this file is to allow angular use tailwindcss.

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Configure our app.confg.ts to enable fetch API global

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

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withFetch()), // Enable fetch API globally
    provideClientHydration(withEventReplay())
  ]
};

Step 1: Setting Up Firebase

1.1 Create a Firebase Project

1. Go to Firebase Console
2. Click Create a Project and enter a name.
3. Enable Firebase Storage and Authentication.
4. Go to Project Settings → General → Your Apps.
5. Register a new web app and copy the Firebase config.

1.2 Install Firebase in Angular

Inside your Angular project folder, install Firebase and AngularFire:

npm install firebase @angular/fire

1.3 Configure Firebase in environment.ts

Modify src/environments/environment.ts:

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

Step 2: Setting Up Firebase Authentication

2.1 Enable Authentication in Firebase

1. Go to Firebase Console → Authentication.
2. Enable Email/Password Authentication.

2.2 Implement Firebase Auth in Angular

Generate an Auth service:

ng generate service services/auth

Modify auth.service.ts:

import { Injectable } from '@angular/core';
import { Auth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from '@angular/fire/auth';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private auth: Auth) {}

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

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

Step 3: Creating the Image Upload Backend with Firebase Functions

3.1 Enable Cloud Storage in Firebase

1. Go to Firebase Console → Storage.
2. Set up Cloud Storage and adjust rules to:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

3.2 Install Firebase Tools

Install the Firebase CLI globally:

npm install -g firebase-tools
firebase login
firebase init functions

Choose TypeScript for Firebase Functions.

Modify index.ts inside functions:

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
admin.initializeApp();

export const uploadImage = functions.storage.object().onFinalize(async (object) => {
  console.log("Image uploaded:", object.name);
});

Deploy the functions:

firebase deploy --only functions

Step 4: Creating the Angular Frontend

4.1 Generate Image Upload Component

ng generate component components/image-upload

Modify image-upload.component.ts:

import { Component } from '@angular/core';
import { Storage, ref, uploadBytesResumable, getDownloadURL } from '@angular/fire/storage';

@Component({
   selector: 'app-image-upload',
   standalone: true,
  templateUrl: './image-upload.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ImageUploadComponent {
  constructor(private storage: Storage) {}

  uploadFile(event: any) {
    const file = event.target.files[0];
    const filePath = `images/${file.name}`;
    const storageRef = ref(this.storage, filePath);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.then(() => {
      getDownloadURL(storageRef).then(url => console.log('File URL:', url));
    });
  }
}

Modify image-upload.component.html:

<input type="file" (change)="uploadFile($event)">

Step 5: Enhancing UI with Tailwind CSS

5.1 Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss --force
npx tailwindcss init

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind in styles.css:

/* You can add global styles to this file, and also import other style files */
@import "tailwindcss";

Modify image-upload.component.html:

<div class="container mx-auto p-6">
  <h2 class="text-2xl font-bold mb-4">Upload Image</h2>
  <input type="file" (change)="uploadFile($event)" class="border p-2">
  <p class="mt-2">Select an image to upload</p>
</div>

Conclusion

In this guide, we built a fully functional image gallery application using: ✅ Angular 19 for the frontend
✅ Firebase Storage for image hosting
✅ Firebase Auth for user authentication
✅ Tailwind CSS for modern styling

Social Media

LinkedIn: https://www.linkedin.com/in/starling-diaz-908225181/

GitHub: https://github.com/NSTLRD

Youtube: https://www.youtube.com/@Mentorly-e3b

Mentorly Academy: https://www.mentor-ly.com/