South African landlord SaaS

Property management, made simple.

A standalone Angular 18 SPA that talks directly to Supabase from the browser — no API server. Tracks properties, tenants, rent, and payments in ZAR with timezone-safe (UTC+2) status math and an offline-capable PWA shell. Hosted as a static build on Vercel.

SPA PWA BaaS i18n × 4

Pages / routes

Core services

DB tables

Archit. issues

Stack

FrontendAngular 18 · TypeScript 5.5
StateSignals + RxJS 7.8
UITailwind · Bootstrap · ng-bootstrap
BackendSupabase v2.75
PWA@angular/service-worker
HostVercel (static)
TestsKarma · Jasmine
i18nEN · AF · ZU · XH

Interactive architecture map

Reads top → bottom: external infrastructure → client entry → app bootstrap → router → shell → features → services → database. Drag to pan, scroll to zoom, click any node for details.

main flow fan-out / spawn uses / consumes

50%

scroll pan · ⌘/ctrl+scroll or pinch zoom · drag pan · esc exit

01 External Infrastructure cdn · hosting · identity

Vercel

hosting · CD

Static SPA host. SPA rewrites /(.*) → /index.html. Build via npm run build:vercel; output dist/propza/browser.

Google OAuth

via Supabase Auth

Social login. signInWithOAuth({ provider:'google' }), redirectTo /dashboard?beta=granted.

Google Fonts

font-display: swap

Inter 400/600/700 · Inter Tight 600/700/800 · preconnect declared in index.html.

02 Client Entry index.html · main.ts · ngsw-config.json

Browser · PWA Shell

index.html → main.ts → bootstrapApplication()

ServiceWorker (prod) View Transitions

03 App Bootstrap root component · global overlays

AppComponent

src/app/app.component.ts

standalone

Preloader

Lottie · 4s hold

Confirmation

global modal

Toast Layer

toasts$ stream

04 Router & Guards app.routes.ts · CanActivateFn × 3

Router & Guards

src/app/app.routes.ts · src/app/core/guards/

all routes eagerly loaded

authGuard

requires session → /login

guestGuard

if session → /dashboard

betaAccessGuard

localStorage gate

⚠ betaAccessGuard is client-side only; not a security boundary.

/ · /beta-access · /login · /register · /reset-password
┌─ AuthenticatedShellComponent [betaAccessGuard, authGuard]
│ ├ /dashboard ├ /properties ├ /property/:id
│ ├ /tenants ├ /tenant/:id ├ /payments ├ /settings
└─ ** → NotFoundComponent

05 Authenticated Shell layout/ · mounts protected feature outlet

AuthenticatedShellComponent

Mobile green hero · Desktop sidebar · <router-outlet> mount

ScrollRestore host MobileShellTitle

06 Feature Modules features/* · standalone components

auth

5 files

· LoginComponent
· RegisterComponent
· ResetPasswordComponent
· BetaAccessComponent

Google OAuth

dashboard

· Metrics + 6-month chart
· Upcoming rents (4)
· Activity stream (6)
· Inline search (debounced)

combineLatest

properties

· PropertyList · PropertyDetail
· PropertyCard component
· AddPropertyModal
· property-status.config

CRUD Storage upload

tenants

· TenantList · TenantDetail
· TenantCard component
· AddTenantModal (vacant only)
· tenant-status.config

filter chips

payments

· Filterable ledger
· Property + free-text search
· Totals · average · count
· Mobile launcher pattern

read-only

settings

mobile+desktop split

· SettingsDesktop (385 LOC)
· SettingsMobile (1145 LOC)
· 10 modal components

profile · theme · export

07 Shared UI Library cross-feature components & pipes

shared/

imported directly by features & layout (no flow line; cross-cutting)

8 components · 1 pipe

Preloader

Lottie

Confirmation

global

Toast

stream

BottomNav

mobile

HeaderBanner

greeting

IOSInstall

A2HS modal

PwaPrompt

beforeinstall

SummaryCard

stat tile

ShortNumberPipe

R 1.2M · R 1K

08 Core Services providedIn: 'root' · grouped by responsibility

Data3 svc

SupabaseService

client singleton · refreshAll$ bus

PropertyService

properties$ · payments$ · loading$

TenantService

tenants$ · loading$

Both subscribe to SupabaseService.refreshAll$

Identity3 svc

AuthService

signals: session · user · userName

BetaAccessService

localStorage · base64 compare

ThemeService

signal · localStorage · profiles.theme

Auth events drive theme effect & user-scoped queries

Rent Engine2 svc

RentDueService

authoritative · monthly · ZA TZ (UTC+2)

RentHelperService

monthly + weekly · ⚠ legacy

⚠ overlap — consolidation recommended

UX & Modals6 svc

Confirmation

promise modal

ModalOptions

responsive NgbModal

MobileShellTitle

title override

ScrollRestore

per-path Y cache

PwaInstall

A2HS · iOS detect

ToastService

shared/component pair

Utilities4 svc

TranslationService

EN · AF · ZU · XH · 1828 LOC

SanitizationService

XSS · DB write guard

ErrorService

normalize → AppError

LoggerService

env-gated console

09 Supabase Backend Auth · Postgres + RLS · Storage · RPC

Supabase

Browser ↔ DB direct (no API server)

Auth (JWT) RLS owner-scoped PostgreSQL JWT in localStorage

Active tables

properties

RLS

owner_id · status (vacant/occupied) · rent_amount · currency · lease_url · notes

tenants

RLS (via props)

property_id (CASCADE) · rent_due_date · rent_status · deposit_amount

payments

RLS (via props)

property_id (CASCADE) · period (YYYY-MM) · amount · multi-row partial

Storage

bucket

leases · path {userId}/{ts}_{file}

⚠ bucket policies not version-controlled

RPC

SECURITY DEFINER

delete_current_user() · called by AuthService.deleteAccount()

⚠ function definition not in repo

Legacy & implicit not provisioned by repo migrations

tenancies (legacy)

deprecate

start_date · end_date · rent_due_day · still written by AddPropertyModal, read by PropertyDetail

profiles (implicit)

missing migration

id = auth.users.id · full_name · theme · notifications_enabled · RLS only IF EXISTS

Key data flows

The eight most important runtime sequences inside Propza.

Email/password login

happy path

LoginComponent.submit() calls AuthService.signInWithPassword
Supabase Auth REST request; onAuthStateChange fires
Signals session + user updated
Router.navigateByUrl('/dashboard')
authGuard + betaAccessGuard re-evaluate → allow

Google OAuth

redirect

Click "Continue with Google" → signInWithOAuth({ provider:'google', redirectTo:'/dashboard?beta=granted' })
Browser ↔ Google consent
Return to /dashboard?beta=granted with hash; Supabase parses (detectSessionInUrl: true)
App reads ?beta=granted hint, but localStorage flag still drives betaAccessGuard — minor inconsistency.

Property list load

combineLatest

combineLatest([properties$, payments$, loading$])
PropertyService.refreshAll() → loads properties (with nested tenants join) + payments
Per-row status via RentDueService.getStatusForTenant(...)
Client-side filter, search, sort → PropertyCard grid

Save payment + reconcile

retry on 23505

Period = RentDueService.getCurrentPeriod() (YYYY-MM)
INSERT payments; on duplicate-period (legacy unique constraint), advance month + retry × up to 12
recalculateTenantStatusFromPayments() walks forward up to 12 months to find first unpaid period
UPDATE tenants.rent_due_date + rent_status if changed
PropertyService.loadProperties() refreshes; UI re-renders

Tenant delete cascade

multi-table mutation

DELETE from tenants
UPDATE properties SET status='vacant', tenant=null WHERE id=…
SupabaseService.triggerRefreshAll() fan-outs to property + tenant services
BehaviorSubjects emit; all subscribed views re-render

Theme sync

signal-driven effect

Effect watches AuthService.user() signal
On login: SELECT profiles.theme; if diff → apply + persist localStorage['propza_theme']
User toggle: setTheme(t) → DOM class + UPDATE profiles.theme
Logout clears the synced user id

Beta access gate

security: friction-only

Guard reads environment.requiresBetaAccess; if false → allow
Else checks localStorage['propza_beta_access']==='granted'
BetaAccessComponent: 6 digits → btoa(code) === environment.betaAccessCodeHash → set flag
Note: base64 is not a hash; trivially bypassed by anyone in DevTools.

Data export

latent bug

Parallel SELECT * for properties · payments · tenancies
Bug: queries payments.eq('owner_id', uid) but payments has NO owner_id column → returns empty
JSON.stringify + Blob → propza-export.json download

Database schema

Five tables (3 migrated, 2 inferred). RLS owner-scoped via auth.uid().

properties

RLS enabled

id uuid PK
owner_id uuid → auth.users
name text
address text
rent_amount numeric/integer
currency text // always 'ZAR'
status text // vacant | occupied
lease_url text?
tenant text? // denorm, double-bookkeeping
notes text?
created_at timestamptz
updated_at timestamptz

⚠ Migration 001 declared different columns (status='available'/'maintenance', rent_frequency, bedrooms, etc.). Runtime schema diverged.

tenants

RLS via properties

id uuid PK
property_id uuid → properties (CASCADE)
name text
email text?
phone text?
rent_amount integer
rent_status text // paid|overdue|upcoming|vacant
rent_due_date date
lease_start_date date?
lease_end_date date?
deposit_amount integer // not in mig 003
notes text?
created_at / updated_at

payments

RLS via properties

id uuid PK
property_id uuid → properties (CASCADE)
period text // YYYY-MM
amount numeric
payment_date date
payment_method text?
notes text?
paid_at timestamptz
created_at timestamptz

History: unique(property_id, period) added in 002+005, DROPPED in 006 to allow partial payments.

tenancies (legacy)

undocumented

id uuid PK
property_id uuid → properties
start_date date
end_date date?
rent_due_day smallint // 1-31

No migration in repo. Still written by AddPropertyModalComponent & read by PropertyDetailComponent. Recommend deprecate → drop.

profiles

not in repo

id uuid PK = auth.users.id
full_name text
theme text // light|dark
notifications_enabled boolean

No CREATE TABLE migration. 004 RLS policies are wrapped in IF EXISTS. Fresh project will fail silently.

Storage · leases

bucket

PDF / document uploads for tenant leases.

path: {userId}/{timestamp}_{filename}
access: getPublicUrl() used by app
policies: not version-controlled

RLS · migration timeline

001

properties + permissive RLS (any authed user)

002

payments + unique(property,period)

003

tenants + permissive RLS + updated_at trigger

004

Owner-scoped RLS (auth.uid()=owner_id, EXISTS for child tables, profiles policies IF EXISTS)

005

payments.period (backfill via payment_date) + reaffirm unique

006

DROP unique constraint → allow partial payments

007

properties.notes column

⚠ Migrations 001 + 003 created permissive RLS policies. Migration 004 added the correct owner-scoped ones but never DROPPed the legacy ones. If both are active in production, RLS may be effectively bypassed for SELECT. Verify with SELECT * FROM pg_policies WHERE schemaname='public'.

Property management, made simple.

Interactive architecture map

Key data flows

Database schema

properties

tenants

payments

tenancies (legacy)

profiles

Storage · leases

RLS · migration timeline

Architectural issues