PulseSG

PulseSG is a real‑time public health platform for policymakers, fusing dengue outbreak and air quality data into a single dashboard for rapid, data‑driven crisis response.

Comment

What it does

PulseSG is a web-based platform designed to be the single source of truth for public health officials. Our solution tackles the problem by:

Aggregating Live Data: The system automatically fetches and processes the latest data for Dengue Clusters and the Pollutant Standards Index (PSI) directly from Singapore's official data.gov.sg APIs.

Providing Actionable Intelligence: It presents this complex data in an intuitive, easy-to-understand interface with two main views:

Overview Page: A high-level summary that highlights the most critical concerns at a glance, such as the top dengue hotspot and the average nationwide PSI reading.

Dedicated Dashboards: Detailed pages for both Dengue and PSI, featuring interactive maps with color-coded polygons based on official alert levels, and sortable lists of top active clusters or regional readings.

Enabling Targeted Emergency Alerts: The platform's core feature is its alert dispatch system. From the dashboard, a policymaker can identify a high-risk area (e.g., a specific dengue cluster or a region with high PSI) and, with a single click, dispatch a tailored SMS alert via the Twilio API. This message is sent only to a database of citizens registered in that specific area, ensuring the communication is timely, relevant, and reaches everyone, including underserved populations without smartphones or reliable internet.

How we built it

Core Framework & Language: Next.js 14+ (App Router): Chosen for its powerful Server Component architecture, enabling efficient server-side data fetching and a clean separation between server logic and client interactivity. React 18 & TypeScript: Used for building a robust, type-safe, and maintainable component-based user interface.

Frontend Development: Tailwind CSS: A utility-first CSS framework used for rapidly creating a clean, professional, and responsive light-mode design system. React-Leaflet: Leveraged to render interactive maps, visualizing GeoJSON data for dengue clusters with dynamic, data-driven styling based on official alert colors.

Backend & Data Processing: Next.js API Routes: Serverless functions provide the backend infrastructure for endpoints like /api/health-data, /api/subscribe, and the alert dispatch routes. Server-Side Logic: The backend processes and summarizes raw data from multiple sources into a single, clean payload, reducing the computational load on the frontend. Redis: Those that have subscribed to the notification system are saved on a Redis database

External APIs & Services: data.gov.sg: The authoritative source for live Dengue Cluster and PSI data. Twilio SMS API: The critical third-party service integrated for sending targeted SMS notifications, forming the backbone of our alert system

Development & Deployment: Git & GitHub: For version control and collaborative development using a feature-branch workflow. npm: For managing all project dependencies. VS Code Live Share: Utilized for effective pair programming and real-time debugging.

Challenges we ran into

Initial Environment Setup: We encountered and resolved initial configuration issues with Tailwind CSS by performing a clean project rebuild, reinforcing the importance of a solid project foundation.

Server-Side Data Fetching: We faced a "server-fetching-itself" deadlock when a Server Component tried to fetch its own API route. We learned and implemented the best-practice solution: the Direct Function Import Pattern, where Server Components call data-fetching logic directly, making the application faster and more reliable.

TypeScript & Prop-Drilling: Debugging type errors related to mismatched props between parent and child components (e.g., defaultView, clusters) was a valuable learning experience that highlighted the power of TypeScript in maintaining a robust data flow through the application.

What's next for PulseSG

Future Improvements

  • Multilingual Support: Build support for multiple languages (e.g., Chinese, Malay, Tamil) to increase accessibility for diverse user groups.

  • Offline Capabilities: Develop a Progressive Web App (PWA) version that caches data and works offline, ensuring that the tool remains accessible even in areas with poor internet connectivity.

  • Misinformation Verification Tools: Integrate external APIs or build custom modules to cross-reference incoming data and flag potential inaccuracies automatically.

  • Implement Policymaker Push Notifications: Build out the backend logic to store simulated citizen push subscriptions and the frontend "Dispatch Alert" button to create a full, end-to-end targeted alert system.

  • Historical Data & Trend Analysis: Integrate a database to store historical data, allowing for the creation of charts that show trends over time and potentially predict future hotspots.

  • Expand Data Sources: The adaptable architecture allows for easy integration of more data sets, such as hospital bed capacity, vaccination rates, or even public transport congestion during a crisis.

  • Authentication: Implement a secure login system for authorized policymakers.

Built With

Share this project:

Updates