Skip to main content

​
Google Open Source Integrations

Visita leverages powerful open-source libraries from Google to enhance data validation, offline capabilities, and addressing precision.

​
Plus Codes (Open Location Code)

Many areas in South African informal settlements lack formal street addresses. We use Plus Codes (Open Location Code) to provide digital, offline-friendly addresses for every signal.

​
Implementation

  • Library: open-location-code (via local wrapper)
  • Utility: lib/plus-codes.ts
  • Format: 8FJJ+4X Johannesburg (Short code with locality)

​
Usage

We automatically generate/display Plus Codes in the SignalCard based on coordinate data. 
import { PlusCodes } from '@/lib/plus-codes';

const code = PlusCodes.encode(lat, lng); // Returns full code (e.g., 5G5C8FJJ+4X)
const short = PlusCodes.shorten(code, lat, lng); // Returns local code (e.g., 8FJJ+4X)

​
Phone Number Validation

To ensure reliable communication with residents and sellers, we use Google’s libphonenumber for strict parsing and validation of South African phone numbers.

​
Implementation

  • Library: google-libphonenumber
  • Utility: lib/phone-utils.ts

​
Capabilities

  • Mobile Validation: Strictly enforce valid SA mobile numbers (082, 076, etc.) for user accounts.
  • Formatting: Standardize input to E.164 format (+2782...) for database storage and SMS services.
import { PhoneUtils } from '@/lib/phone-utils';

const isValid = PhoneUtils.isValidSAMobile('0821234567'); // true
const dbFormat = PhoneUtils.formatForDB('082 123 4567'); // "+27821234567"

​
Progressive Web App (PWA)

Visita is a fully offline-capable PWA using Serwist (the modern successor to Google Workbox).

​
Service Worker

Located at app/sw.ts, our Service Worker handles:
  • Precaching: Critical assets for instant load.
  • Runtime Caching:
    • Mapbox Tiles: Stale-while-revalidate strategy for map interactions.
    • Supabase Storage: Cache-first strategy for ward maps and user uploads.
    • Google Fonts: Cache-first for consistent typography.

​
Manifest

The dynamic manifest (app/manifest.ts) enables “Add to Home Screen” functionality, making the web app feal like a native mobile application with a focused UI (no browser bar) and brand colors.