Calanasan MDRRMO Emergency Operations Center Portal

Inspiration

Calanasan is a remote and mountainous municipality where typhoons, heavy rainfall, flooding, landslides, road obstructions, and communication limitations can affect communities and emergency operations. Important information such as weather conditions, hazard updates, emergency contacts, incident reports, evacuation facilities, and operational resources often comes from different sources.

I wanted to bring these resources together in one accessible portal for residents, responders, barangay officials, schools, and local disaster-management personnel. The objective was not simply to build another general information website, but to create a practical platform shaped by the geography, hazards, resources, and public-service needs of Calanasan.

I am not an information technology expert or a professional programmer. I began this individual initiative with local disaster-management knowledge, a clear public-service objective, a willingness to learn, and the determination to transform an idea into a working system.

What it does

The portal functions as a digital Emergency Operations Center and public-safety information hub. It brings public information, situational-awareness resources, preparedness materials, and protected operational tools into one responsive website.

Its features include:

• Municipal, barangay, and nearby-municipality weather and rainfall monitoring
• Five-day weather outlooks and heat-index information
• Earthquake, flood, landslide, volcano, and forest-fire monitoring references
• PAGASA advisories, satellite images, radar, PHIVOLCS information, and NASA FIRMS references
• Citizen incident reporting and incident-monitoring entry points
• Emergency hotlines and public quick-help guidance
• Evacuation-center information and monitoring tools
• Interactive hazard, incident, barangay, and road maps
• DPWH road-alignment and kilometer-post references
• Road-obstruction, damage, and landslide reporting support
• Operations logs, resource tracking, situation reports, and coordination tools
• Barangay and school DRRM directories
• ICS forms, IEC materials, Citizen's Charter information, and training resources
• Responsive desktop and mobile layouts
• An installable Progressive Web App with selected offline support

Road and hazard information supports awareness and coordination. It does not replace official agency advisories, engineering assessments, closure orders, or field validation. Administrative and officer functions are protected, while the main public experience can be reviewed without an account.

How I built it

The portal uses HTML5, CSS3, and JavaScript. Leaflet.js and GeoJSON support interactive maps and geographic information. Firebase Hosting publishes the site, while Google Apps Script supports selected backend workflows. Progressive Web App features—including a manifest, service workers, browser caching, responsive layouts, and selected offline support—help make the portal useful on mobile devices and under limited-connectivity conditions.

The portal also connects to or references weather and hazard-information sources such as OpenWeatherMap, Open-Meteo, PAGASA, PHIVOLCS, and NASA FIRMS. Because these external sources have different formats, schedules, and availability, the interface must account for delayed, cached, restricted, or unavailable information.

The portal existed before OpenAI Build Week. During the event, I used Codex with GPT-5.6 to review, improve, test, document, and extend it. Codex and GPT-5.6 helped me:

• Understand and navigate a large HTML, CSS, and JavaScript codebase
• Trace technical problems across interface, Firebase, and caching logic
• Diagnose errors and develop scoped corrections
• Improve responsive behavior and mobile navigation
• Repair and review operational features such as the Activity Snapshot workflow
• Improve DPWH road-alignment, kilometer-post, and road-incident features
• Review Progressive Web App and deployment configuration
• Identify security and repository-hygiene concerns
• Prepare testing guidance, technical documentation, and submission materials

I provided the local DRRM context, intended users, operational requirements, content, priorities, and acceptance decisions. I reviewed and tested the AI-assisted work and remain responsible for the project's direction, safety, accuracy, and continuing development. Codex and GPT-5.6 are development tools in this project; they are not presented as sources of official emergency information.

Challenges I faced

My greatest challenge was developing a complex portal without formal training as an IT professional or programmer. I had to learn unfamiliar concepts, understand errors, evaluate proposed solutions, test changes, and repeat the process until the system behaved as intended.

Another major challenge was bringing together information from different agencies and services. External sources use different formats, update schedules, access methods, and reliability levels. The portal therefore has to handle unavailable feeds, browser restrictions, slow connections, incomplete data, and cached information without presenting unverified information as newly confirmed or official.

Designing for both public users and emergency personnel was also difficult. The portal contains many resources, but during emergencies information must remain understandable and accessible. This required continuing work on navigation, mobile layouts, visual hierarchy, role protection, and low-connectivity behavior.

Finally, I had to balance improvement with safety. Near the submission deadline, I prioritized scoped, testable repairs instead of risky architectural changes, protected officer functions, removed sensitive configuration from the judging repository, and documented the portal's limitations.

Accomplishments that I am proud of

I am proud that I transformed a public-service objective into a functioning municipality-focused emergency-management portal despite not being a professional programmer or IT specialist.

The project combines hazard awareness, weather monitoring, incident reporting, emergency contacts, evacuation information, road and DPWH references, maps, operational resources, training materials, and local DRRM directories in one platform. It is designed around the actual barangays, geography, hazards, and coordination needs of Calanasan rather than treating the municipality as a generic location.

I am also proud of the responsible way I used AI. Codex and GPT-5.6 accelerated learning, investigation, implementation, review, and documentation, while human judgment, local knowledge, testing, and responsibility remained central.

The project's local focus is a strength. Calanasan serves as the pilot environment for a model that could eventually be made configurable for other remote and hazard-prone municipalities. This wider potential is presented as a future direction, not as an unsupported claim of current national or international adoption.

What I learned

This project taught me that a person does not need to begin as a technical expert to create something valuable. A clear purpose, patience, perseverance, responsible use of available technology, and a willingness to keep learning can overcome many technical limitations.

I learned about web development, API integration, geospatial visualization, responsive design, offline support, caching, deployment, data security, and emergency communication. I also learned that AI is most useful when it supports human judgment and a clearly defined objective—not when it replaces verification, responsibility, domain knowledge, or operational decision-making.

Most importantly, I learned that disaster-management technology must be locally relevant, understandable, dependable, and transparent about its limitations. A broad platform is not automatically more valuable than a focused one; meaningful impact depends on whether the system addresses the real needs of its intended users.

What’s next

The portal remains a continuing project. My immediate priorities are to keep testing its public and protected workflows, improve reliability, gather structured feedback, strengthen information validation, and refine the experience for mobile and limited-connectivity users.

Future improvements may include:

• Stronger real-time data synchronization and notification support
• Enhanced role-based access and officer controls
• Expanded barangay-level information
• Additional offline and low-bandwidth capabilities
• Improved operational reports, analytics, and export tools
• SMS alert integration where suitable services and authority are available
• Multilingual public information where practical
• A municipality configuration process for barangays, hotlines, coordinates, facilities, and local content
• Deployment and administrator documentation for possible replication

The long-term roadmap is local proof first, followed by responsible replication. After continued development and evaluation in Calanasan, the platform could be adapted for other municipalities by configuring their local identity, barangays, emergency contacts, facilities, hazard maps, procedures, and geographic data. It does not yet claim national or international use; it demonstrates a credible foundation for future adaptation.

Built for a real community. Guided by local disaster-management knowledge. Developed for responsible replication.

Built With

• app
• apps
• codex
• css3
• firebase
• firms
• geojson
• google
• hosting
• html5
• javascript
• leaflet.js
• nasa
• open-meteo
• openai
• openweathermap
• pagasa
• phivolcs
• progressive
• references
• script
• service
• web
• worker