Learn how a local government is organized, by exploring it

The problem

Anyone who has to work with a local government unit, whether a new employee, a supplier or a developer building software for it, first needs to know who does what. That knowledge is spread across the national local government code, special laws and local ordinances. An org chart on paper does not say which offices are required, who reports to whom or what each post does. I built the LGU Structure Explorer to make that map something you can click through and learn from in an afternoon.

Constraints

• No official staffing list. Headcounts and salary grades are approximate typical figures for learning, and the app says so on screen. They are not any local government's approved staffing.
• The law sets the shape. Each office needs its legal basis and its status (required, optional, common by ordinance, or required by a special law) at each level.
• No server. Everything runs in the browser, and what-if changes and course progress are saved there.
• Phones too. The chart needs a phone-friendly alternative.

What I did

Design

The app has three views of the same data. An org chart lets you drag, zoom and expand. An outline view works on phones, and a staffing table can be downloaded as CSV. A level ladder moves between national, province, city, municipality and village. Clicking an office opens a panel with its legal basis, mandate, functions and positions. The address bar keeps the level, view and search, so a link opens exactly the same view.

Engineering

The data is a typed catalogue of 58 entries at the province, city and municipal level (offices, special bodies such as the bids and awards committee, and national field offices), 16 at the village level and 14 national bodies. One catalogue serves all three local levels by using title tokens, so "Office of the Municipal Mayor" becomes "Office of the Governor" at province level. A pure tree builder scales headcounts by level and income class, applies the user's what-if edits and computes totals by employment status. The what-if editor lets you change the income class and headcounts, add positions and switch optional offices off. A personnel-cost check tests the result against the personal-services cap in the local government code, which allows 45 or 55 percent of the previous year's regular income depending on income class. Money is kept in whole currency units.

Course

A short course in one self-contained HTML file has seven lessons, from the levels of government to the personnel-cost cap. Each lesson has a hands-on task in the Explorer, a quick check and key takeaways. A 10-question final quiz needs eight correct answers to unlock a printable certificate.

Outcome

A finished study app at version 1.0.0 (October 2026), with about 2,600 lines of TypeScript and the course. A Netlify configuration is included and tells search engines not to index it. The same module also runs inside my e-Serbisyo prototype as its structure page. No usage has been measured.

What I'd change next time

The two copies of the data, one here and one inside e-Serbisyo, are separate, so a fix in one does not reach the other. Next time I would publish the catalogue as one shared package and add tests for the tree builder, which is pure and easy to test.