---
title: "Building a Realtime Trello Board with Supabase and Angular"
description: "The tutorial builds a Trello-style project-management board with Supabase, Angular, and Tailwind rather than stopping at a small “hello world” example. It defines boards, lists, cards, users, and user_boards in Postgres SQL, adds magic-link authentication, and uses Row Level Security policies plus helper functions and triggers to control access and maintain relationships. Angular components and services use the Supabase JavaScript client, while realtime is enabled for cards and lists and exposed through an Observable that applies INSERT, UPDATE, and DELETE events to local board state. The resulting clone supports shared boards for invited, already registered users, and the article provides SQL and source code for running the project with a Supabase instance."
---

# Building a Realtime Trello Board with Supabase and Angular

[Supabase](https://yomu.fyi/company/supabase) · simon\_grimm · Aug 24, 2022

**Type:** Tutorial

## Summary

The tutorial builds a Trello-style project-management board with Supabase, Angular, and Tailwind rather than stopping at a small “hello world” example. It defines boards, lists, cards, users, and user\_boards in Postgres SQL, adds magic-link authentication, and uses Row Level Security policies plus helper functions and triggers to control access and maintain relationships. Angular components and services use the Supabase JavaScript client, while realtime is enabled for cards and lists and exposed through an Observable that applies INSERT, UPDATE, and DELETE events to local board state. The resulting clone supports shared boards for invited, already registered users, and the article provides SQL and source code for running the project with a Supabase instance.

## Context

The article addresses the gap between a small Supabase hello-world example and a larger, real-world application by building a Trello-style board with boards, lists, cards, authentication, user sharing, and realtime updates.

## Approach / What changed

The implementation uses Supabase with Postgres SQL tables, Row Level Security policies, a board-membership lookup function, database triggers, and magic-link authentication. An Angular application uses the Supabase JavaScript client, while realtime subscriptions for cards and lists feed an Observable that updates local state for INSERT, UPDATE, and DELETE events.

## Takeaways

- The schema uses boards, lists, cards, users, and user\_boards tables; cards and lists use cascading foreign keys, and cards store both list\_id and board\_id.
- Row Level Security policies restrict board access through get\_boards\_for\_authenticated\_user(), which returns board IDs associated with the authenticated user.
- Realtime subscriptions combine card and list changes into one Observable, and the board component applies INSERT, UPDATE, and DELETE events to its local arrays.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Authentication](https://yomu.fyi/topic/authentication), [Postgres](https://yomu.fyi/topic/postgres), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Supabase](https://supabase.com/blog/building-a-realtime-trello-board-with-supabase-and-angular)
- Source URL: https://supabase.com/blog/building-a-realtime-trello-board-with-supabase-and-angular
- Ingested by Yomu: 2026-08-28T20:00:58.716Z

[Read original post](https://supabase.com/blog/building-a-realtime-trello-board-with-supabase-and-angular)