Lomilindol×- +
Lomilindol
LOMILINDOL is an Earthquake Monitoring Web Application powered by Tailwind CSS, React, Node.js, and MySQL. It allows the public to monitor live earthquake updates sourced via web scraping from PHIVOLCS, a trusted Philippine government scientific agency. The system automatically gathers the latest seismic data, stores it, and displays it in real time through an intuitive and responsive interface.
Overview
Type
Team Project — 3 Members (Hackathon)
Status
Completed - Local
Users
Open iT Hackathon — Awarded 3rd Place (November 20, 2025)
The Problem
What problem?
Most Filipinos lack a fast, accessible way to check real-time earthquake data. Official sources like PHIVOLCS exist, but their interface can be slow and hard to navigate, especially during an actual seismic event.
Why build it?
As a hackathon entry for Open iT 2025, we wanted to build something that addresses a genuine public safety concern in the Philippines. Earthquakes are frequent and the lack of accessible real-time data leaves communities underprepared.
The Solution
What was built?
LOMILINDOL is a full-stack web application that scrapes and displays real-time earthquake bulletins from PHIVOLCS. Users get instant toast notifications whenever a new earthquake is detected, along with distance detection and a clean dashboard.
How it works
A Node.js + Express backend scrapes PHIVOLCS at regular intervals and stores the data in a MySQL database. The React frontend polls the API and renders live updates, with distance calculations and toast alerts surfaced to the user.
My Role
Team Project — 3 Members (Hackathon)
- →Frontend developer using React.js and Tailwind CSS
- →Designed and built the main dashboard UI and earthquake list views
- →Fetched and integrated backend API data on the client side
- →Implemented CRUD operations for managing earthquake report records
Process & Thinking
How I approached it
Researched publicly available seismic data sources in the Philippines — checking PHIVOLCS, PAGASA, and other local geophysical agencies for API access. Finding none, we built a custom web scraper using Node.js.
Why this approach?
Chose React for its component model, which made it easy to isolate the earthquake card, notification system, and map view as independent pieces. Kept the Express API thin so we could move fast.
Key Insight
💡 Identified that most affected communities lacked access to real-time earthquake data from agencies like PHIVOLCS, leaving them unprepared during seismic events. Built a simple, fast dashboard to bridge that gap.
Tech Stack
Key Decisions
·Used MySQL with phpMyAdmin for a quick and familiar database setup during the hackathon timeframe.
·Chose React for building reusable, dynamic UI components that display live earthquake data.
·Used Express.js as a lightweight REST API layer between the scraper and the frontend.
·Tailwind CSS enabled rapid UI iteration without leaving JSX, critical given the hackathon deadline.
Architecture
System Architecture Diagram
Features
Real-Time Notification Alerts
Instant toast notifications delivered to the user whenever a new earthquake is detected and scraped from PHIVOLCS — no page refresh needed.
Earthquake Distance Detection
Each earthquake alert includes calculated distance data so users can quickly gauge how far the epicenter is from their location.
ReCaptcha Security
Google ReCaptcha integration on sensitive forms to prevent automated abuse of the reporting and submission system.
Challenges & Learnings
Challenge
PHIVOLCS does not expose a public API, so all earthquake data had to be extracted through scraping.
Learning
Found an open-source scraper on GitHub that extracted data directly from PHIVOLCS, saving us from building one from scratch and letting us focus on the dashboard itself.
Challenge
Figuring out how to present seismic data in a way that felt immediate and actionable for users monitoring live events.
Learning
Implemented instant display of incoming earthquake records without requiring users to log in, making seismic data immediately accessible to anyone who needs it.
Challenge
Building a full-stack app with data ingestion, a responsive UI, and a working demo within a single hackathon day left little room for iteration.
Learning
Prioritized the core MVP first, scraper → API → database → display, before adding features like distance detection, toast alerts and earthquake record management, keeping the build stable throughout.
Results & Outcome
Deployment
Completed - Local
Users
Open iT Hackathon — Awarded 3rd Place (November 20, 2025)