BetterTaytay: Bridging Taytayeños with Municipal Governance

Project Overview

BetterTaytay is an open-source, community-driven civic portal built to make the government of the Municipality of Taytay, Rizal accessible, transparent, and user-friendly for all citizens (Taytayeños).

The portal serves as a localized, municipal-focused fork of the broader BetterGov.ph initiative, carrying forward and expanding on the foundation established by the BetterLB (Los Baños) project. BetterTaytay streamlines navigation through complex government services, archives legislative files, and hosts a transparency dashboard displaying procurement budgets and infrastructure projects.

Key Portal Features

BetterTaytay provides Taytay residents and developers with a variety of interactive modules:

Public Services Directory

Comprehensive citizen's charter database.
Easily searchable list of municipal services, grouped by department.
Detailed requirement checklists, associated fees, and step-by-step transaction pipelines.

Legislative Portal (Under construction)

Centralized archive of ordinances, resolutions, and executive orders passed by the Sangguniang Bayan of Taytay.
Fully searchable text database with PDF links to official legislation.

Transparency & Procurement Dashboard

Standardized summaries of local government budget allocations and revenue statistics.
Feed of ongoing procurement bids and infrastructure contracts integrated with external agency reporting.

Municipal Government Directory

Department directories with up-to-date contact information, physical addresses, and active personnel details.
Unified local emergency hotlines page.

Discover Directory

Centralized routes of history, vibrant culture, local attractions, interactive map, and travel hub of the Municipality of Taytay, Rizal
GeoJSON mapping to reflect geospatial information on different layers.

Multi-language Support

Localization support using i18next for seamless English and Filipino translation toggles across all pages.

The Tech Stack

BetterTaytay is engineered with a modern, serverless stack designed for minimal hosting costs and optimized edge delivery:

Frontend

React 19 & Vite – Fast client-side rendering with strict TypeScript type safety.
Tailwind CSS v4 & Kapwa Design System – Custom utility classes mapped to custom design tokens (e.g., bg-kapwa-surface, text-kapwa-text-strong) for unified, accessible branding.
Radix UI Primitives – Screen-reader friendly, accessible interactive components.
React Router – Clean routing structures.

Cloudflare Backend

Cloudflare Pages & Functions – Low-latency edge delivery with serverless backend API endpoints.
Cloudflare D1 (SQLite) – Edge-replicated database storing directory data, user logs, and metadata.
Cloudflare KV – Fast key-value store cache handling API responses (such as local weather feeds) with custom TTLs.

Search and Search Fallback

Meilisearch – Ultra-fast fuzzy search indexing for legislative archives.
Fuse.js – Lightweight client-side fuzzy search fallback when Meilisearch is unavailable.

Data Processing Pipeline

Python-based ETL Pipeline – Script-driven scraper, normalizer, and parser that converts unstructured legislative PDFs into clean, standardized JSON files ready for seeding the database.
Python-based News Pipeline - Script-driven scraper, normalized, and parser that converts RSS feed into clean, standardized JSON data ready for KV caching

System Architecture

The interaction model of BetterTaytay connects a static front-end web shell with serverless edge databases and remote searches:

┌─────────────────────────────────────────────────────────────┐
│                        Browser (Client)                     │
│  React 19 SPA + Tailwind CSS v4 + Kapwa Design System       │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Cloudflare Pages                         │
│  Static frontend + Serverless API functions                 │
└─────────────────────────────────────────────────────────────┘
              │                              │
              ▼                              ▼
    ┌──────────────────┐            ┌──────────────────┐
    │  Cloudflare D1   │            │   Meilisearch    │
    │  (SQLite DB)     │            │  (Fuzzy Search)  │
    └──────────────────┘            └──────────────────┘

Customization and Forking for other LGUs

One of BetterTaytay's primary strengths is its reusable architecture. It is built to be easily forkable for other Local Government Units (LGUs) in the Philippines. LGUs can configure their own version by modifying:

Branding Configurations (/config/lgu.config.json):

{
  "lgu": {
    "name": "Taytay",
    "fullName": "Municipality of Taytay",
    "province": "Rizal",
    "region": "Region IV-A",
    "officialWebsite": "https://taytayrizal.gov.ph"
  },
  "portal": {
    "name": "BetterTaytay",
    "domain": "bettertaytay.org"
  }
}

Translation Dictionaries (/src/i18n/): Update language translations for specific local phrases.
Data Files (/src/data/): Swap JSON files mapping local barangays, department details, and emergency hotlines.

Setup & Development

1. Clone & Install

git clone https://github.com/zzelif/bettertaytay.git
cd bettertaytay
npm install

2. Run the Development Server

npm run dev

The application runs locally at http://localhost:5173.

Future Improvements

To expand BetterTaytay's impact, the roadmap includes:

Barangay-level directories: Extending the services guide down to individual barangay centers.
Enhanced Data Pipelines: Automating the ingestion of local legislative documents directly from the municipal Sangguniang Bayan's Facebook posts (offical government site lacks the documents).
Public Feed Updates: Integrating real-time transit and local alert systems for Taytay residents.
Additional real-time transparency data: Extending the public transparency records to show budget execution, flood-control projects, and project tracking in Taytay, Rizal