Local government information in the Philippines is scattered across Facebook posts, PDF attachments, and physical bulletin boards. For young people the practical effect is simple: they do not know what their city actually offers them, or how to take part in it. I built the Batangas Youth Civic Hub as a research initiative in partnership with the University of Batangas — one place where a student can find out what is happening and how to engage with it.
What I built
The site pulls news, upcoming events, local legislation, a directory of officials, emergency hotlines, and youth proposals from a single Postgres database, and surfaces what is coming up rather than what was posted most recently. I built it on Next.js 14 with the App Router and TypeScript, which means each of those sections renders on the server with its own metadata — the pages are shareable and indexable, which matters when the thing you are competing with is a Facebook post.
A CMS the office can run
A civic site nobody updates is worse than no site at all, so the CMS was not an afterthought. Content is written in a Tiptap rich-text editor inside a private admin area, with separate storage buckets for images and for documents, since a lot of local legislation only exists as a PDF. Sign-in works by email or Google, and a single role column is the only thing separating a reader from an editor — promoted in the database, enforced by row-level security, not by the interface.
Designed to be read
I gave it a custom map-poster design system in Tailwind rather than reaching for a component library. Government sites tend to look either intimidating or improvised, and neither invites an eighteen-year-old to read a piece of legislation. Treating the city as a place worth putting on a poster made the tone right, and building the tokens myself kept the whole thing light enough to load quickly on a phone over mobile data.
The build ships with a full seed dataset whose event dates are relative to the current time, so the demo always shows something upcoming — a small thing that makes a research prototype presentable on any day, to anyone. It is the project where I most clearly built for a reader who did not ask for it, and that shaped every decision from the routing down to the type.