FreeCodeCamp

How to Build a Realtime Chat Application with Angular 20 and Supabase

Chat applications let you talk in real-time with your friends, family, or coworkers, and help you quickly, effectively, and efficiently transfer of information. When you’re building modern web applications, chat applications are now pretty much a req...

Jun 17, 2025 - 08:50
 0
How to Build a Realtime Chat Application with Angular 20 and Supabase

Chat applications let you talk in real-time with your friends, family, or coworkers, and help you quickly, effectively, and efficiently transfer of information. When you’re building modern web applications, chat applications are now pretty much a requirement to enable collaboration and enhanced the user experience.

In this tutorial, we will break down how to build a chat application using modern technologies like Angular and Supabase. Building this chat application will help you learn features such as Google OAuth 2.0 for authentication, Angular router for navigation, the CanActivate route guard for route protection, and how to call Supabase functions to create, fetch and delete chats.

On the backend, you will learn how to create database tables in Supabase. You’ll also learn about Supabase functions and Supabase triggers.

Table of Contents

Prerequisites

  • HTML

  • JavaScript

  • TypeScript

Installations and Account Configuration:

Before we begin, make sure you have the following installed and ready:

  • Node.js and npm: Angular requires Node. You can check to see if you have it (and what version you have) by running node -v in your terminal.

  • Angular CLI: This is the command-line tool to scaffold and manage Angular projects. If you don’t have it, install it with npm install -g @angular/cli. Verify with ng version.

  • A Supabase account: Supabase offers a free tier. Sign up on the Supabase website if you haven’t already.

You can also watch the video version of this article below, or on my YouTube channel:

How to Create the User Interface of the Angular Application

To create the user interface of the application, we’ll use Bootstrap 5. In the index.html file of the Angular application, you are going to paste the Bootstrap 5 CDN link as seen below: 

html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgChattitle>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

head>

<body>
  <app-root>app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous">script>

body>

html>

Above, you have two CDN links from Bootstrap 5. The first is the tag within the head section, while the second is the