DEV Community: Suryansh Swarn

How Do You Turn Raw NASA Satellite Streams into a High-Performance Geospatial Interface?

Suryansh Swarn — Sat, 16 May 2026 08:23:49 +0000

As developers, we routinely build dashboards for predictable data like server metrics or revenue funnels. But tracking volatile, live planetary anomalies is a completely different challenge. During natural hazards, critical telemetry is often fragmented across chaotic feeds, creating a dangerous systemic vulnerability for responders and researchers.

To solve this, I engineered Disaster-map-NASA-EONET—a tactical geospatial console designed to ingest, normalize, and render live global hazard data onto a high-performance, reactive map interface. Here is an architectural deep dive into how I overcame asynchronous data bottlenecks and built a client-side state that scales seamlessly.

The Tech Stack

To ensure fluid frame rates and low rendering latency without the bloat of heavy commercial platforms, the application uses a highly optimized front-end pipeline:

React 19 & Vite 8: Handles the core declarative UI architecture with concurrent rendering and hyper-fast development builds.
Leaflet & React-Leaflet: Grants lightweight, direct client-side control over GIS rendering loops and tile layers.
Tailwind CSS v4: Utilizes the compile-time @tailwindcss/vite engine to provide zero-runtime styling with minimal asset weight.
Recharts: Ingests raw statistical arrays to render multi-axis spatial telemetry and data charts.

Design System

A tracking console is only as effective as its cognitive throughput. If the UI is cluttered, critical analytical insights get lost under the visual noise. I structured the application with a distinct "Control Room" aesthetic focused on high visual contrast and modern layering:

The Cinematic Mapping Layer: Instead of standard map styles, I used Leaflet’s tile layers to craft a deep, dark slate environment. When active satellite mode is disabled, the map shifts to a monochrome space-black canvas, causing the bright warning indicators of active natural events to stand out vividly.
The Collapsible Control Deck: The command sidebar leverages responsive, text-transformative utility styles and glassmorphic translucent paneling (backdrop-blur-md). It overlays global data feeds, classification parameters, and real-time filters directly across the screen width without completely occluding the main tracking area.

The Engineering Challenge

The primary engineering obstacle when working with NASA's Earth Observatory Natural Event Tracker (EONET) API was managing Asynchronous Spatial Normalization and Downstream Filtering.

1. Eliminating Redundant Network Load via Downstream Separation

The API query returns thousands of natural events over a yearly timeline. Querying NASA's servers every time a user toggles a category filter would easily exhaust API rate limits, spike network bandwidth, and stall client rendering.

To solve this, I designed a multi-tiered state loop:

An upstream network synchronizer hooks onto chronological shifts (the year filter) to fetch the raw data snapshot into allEvents.
A separate downstream effect watches client-side categorical selections to filter the in-memory array locally. This completely eliminates unneeded network overhead, shifting the filtering complexity from an asynchronous $O(N)$ network request to a lightning-fast client-side operation.

2. Normalizing Polygons into Standard Bounding Geometries

Furthermore, the EONET database represents geographic features using uneven data models. Some hazards are specified via simple point coordinates, while massive events like hurricanes or wildfires are provided as complex Polygon coordinate grids.

Passing a raw geometry array directly into a standard map marker breaks Leaflet, resulting in catastrophic application failures. I wrote defensive structural parsing logic to safely unpack multi-dimensional array indices down to fallback coordinates on the fly.

Here is how the core orchestration is implemented in the codebase:

// From App.jsx: Decoupled Upstream Networking & Downstream In-Memory Filtering
useEffect(() => {
  const fetchEvents = async () => {
    if (categories.length === 0) return; // Guard clause against empty category maps
    setIsLoading(true);
    setError(null);
    try {
      const url = `https://eonet.gsfc.nasa.gov/api/v3/events/geojson?status=all&start=${filters.year}-01-01&end=${filters.year}-12-31`;
      const res = await fetch(url);
      if (!res.ok) throw new Error('API communication failed. Likely rate limited by NASA.');

      const data = await res.json();
      setAllEvents(data.features || []);
    } catch (err) {
      console.error(err);
      setError("NETWORK_ERR: " + err.message);
    } finally {
      setIsLoading(false);
    }
  };
  fetchEvents();
}, [filters.year, categories.length]);

// Apply local categorization filtering downward to prevent network thrashing
useEffect(() => {
  let fetchedEvents = allEvents;
  if (filters.categories.length > 0) {
    fetchedEvents = fetchedEvents.filter(ev => {
      const evCats = ev.properties?.categories || [];
      return evCats.some(c => filters.categories.includes(c.id));
    });
  }
  setEvents(fetchedEvents);
}, [filters.categories, allEvents]);

// From DisasterMap.jsx: Bounding Geometry Normalization and Fail-Safe Fallbacks
{events.map((ev) => {
  if (!ev.geometry || !ev.geometry.coordinates) return null;

  let coord;
  // Handle Polygon / MultiPolygon arrays smoothly to safely extract marker anchors
  if (ev.geometry.type === 'Polygon' || ev.geometry.type === 'MultiPolygon') {
    const poly = Array.isArray(ev.geometry.coordinates[0][0])
      ? ev.geometry.coordinates[0][0]
      : ev.geometry.coordinates[0];
    coord = [poly[1], poly[0]]; // Extract [lat, lng] projection values securely
  } else {
    coord = [ev.geometry.coordinates[1], ev.geometry.coordinates[0]];
  }

  // Failsafe condition to prevent React from throwing errors on unmapped coordinates
  if (!coord || isNaN(coord[0]) || isNaN(coord[1])) return null;

  return (
    <Marker 
      key={ev.properties?.id || Math.random()} 
      position={coord} 
      icon={getIcon(ev.properties?.categories?.[0]?.id)}
    >
      {/* Dynamic Popup UI Layout */}
    </Marker>
  );
})}

Responsive Design & Progressive Web App Capabilities

Building a tool that tracks planetary events requires absolute accessibility. Disasters don't happen exclusively when you are sitting in front of a 27-inch desktop monitor.

Responsive Layout Architecture

To build an interface resilient to varying viewports, I leveraged Tailwind's responsive breakpoint layers:

The primary control sidebar features a flexible width layout (w-[320px] max-w-[100vw]) coupled with clean, hardware-accelerated transitions (translate-x-0 vs -translate-x-full).
On smaller devices, the menu panel completely retracts with smooth CSS transitions, shifting interactive map control toggles to a dedicated corner icon trigger to preserve valuable screen real estate.

PWA Capabilities

I also integrated Progressive Web App capabilities into the build configuration. By writing a comprehensive web app manifest layout (manifest.json), the browser recognizes the application as an independent web console app. Users can directly install the app to their local home screen on mobile devices or their desktop dock, launching it within a standalone native application frame without browser navigation wrappers.

The Console Interface

Figure 1: The tracking interface rendering live event telemetry. Standard leaflet markers are optimized into performant numbered groupings using react-leaflet-cluster to prevent main-thread UI blocking.

Figure 2: The Global Distribution Analytics sidebar rendering statistical summaries of volcanic, wildfire, and severe storm occurrences across the globe using interactive SVG layouts.

Engineering Review

Developing this project across a focused engineering sprint highlighted the critical intersection of client-side performance optimization and defensive data ingestion. Initially, rendering hundreds of individual geospatial DOM nodes introduced severe main-thread lag, a critical bottleneck that I resolved by integrating react-leaflet-cluster to virtualize grouped anomalies and sustain a flawless 60 FPS rendering cycle. Concurrently, navigating the volatility of public open-source telemetry streams underscored that defensive programming is non-negotiable when architecture relies on external payloads; implementing rigorous validation layers—such as checking coordinate bounds via isNaN(), isolating geometry mutations, and structuring robust state fallbacks—proved essential to guarantee runtime stability and insulate the UI from catastrophic crashes caused by malformed API data.

Deployments

The application is fully operational, integrated with live automated build checks via Vercel's deployment network. Explore the implementation links below to review the codebase architecture or view live planetary indicators:

Live disaster-map-nasa-eonet.vercel.app
Repository: GitHub - Disaster-map-NASA-EONET

Stop Fighting AI Formatting: How I Built a "Sanitizer" for Messy AI Markdown

Suryansh Swarn — Thu, 14 May 2026 17:51:39 +0000

The Problem: The "AI-to-Doc" Friction

We’ve all been there. You ask an AI like ChatGPT, Gemini, or NotebookLM to explain a complex topic. The output is great, but when you copy-paste it into a professional document or a standard editor, it looks... broken.

The biggest culprits? LaTeX delimiters. AI tools love using \[ ... \] for block math and $ ... $ for inline math. Most web-based markdown parsers don’t recognize these out of the box, leaving your document littered with backslashes and brackets instead of beautiful equations.

I decided to build a solution: Markdown Latex Pdf generator. A tool to solve this "messy copy-paste" journey.

The Tech Stack

To keep the app fast and responsive, I went with:

React (Vite): For the reactive UI.
Marked.js: For high-speed markdown parsing.
KaTeX: For math rendering that actually looks like a textbook.
html2pdf.js: To turn that "Liquid Glass" UI into a portable document.

The Engineering Challenge: The Regex "Sanitizer"

The core "intelligence" of this app isn't just the rendering; it’s the pre-processing. I realized that before I could hand the text over to marked.js, I had to translate "AI-speak" into "Standard-Markdown."

When I started building the app, I realized that simply using a markdown parser like marked.js wasn't enough. AI tools often wrap math equations in brackets that standard libraries don't recognize by default.

I had to implement a custom RegEx Sanitizer to "clean" the text before it even hit the parser.

The Code Snippet that fixed it:

// Sanitizing AI-specific delimiters to standard LaTeX $ and $$
const sanitized = rawInput
  .replace(/\\\[/g, '$$$$') // Convert \[ to $$
  .replace(/\\\]/g, '$$$$') // Convert \] to $$
  .replace(/\\\(/g, '$')    // Convert \( to $
  .replace(/\\\)/g, '$');   // Convert \) to $

By implementing this "middleware" logic, I ensured that no matter how the AI formats the math, my app translates it into a standard format that KaTeX and marked.js can render perfectly.

Aesthetic Engineering: The "Liquid Glass" UI

As someone who bridges the gap between software utility and visual storytelling, I couldn't settle for a plain white text box. I engineered a "Liquid Glass" aesthetic.

Using modern CSS backdrop-filter: blur(), fixed mesh gradients, and a sleek dark-mode-first approach, the app feels like a premium desktop tool rather than a basic web form. It provides a "zen" environment for refining AI-generated content.

Modern Workflow: PWA & Mobile Responsiveness

A productivity tool is useless if it only works on a 27-inch monitor. I focused on two key features to make this app truly "portable":

Fully Responsive Design: Using a fluid grid system, the "Liquid Glass" editor scales perfectly from a desktop setup to a mobile screen. Whether you are refining an AI response on your phone or your laptop, the UI remains intuitive and clutter-free.
PWA Capable: I implemented a Web App Manifest and service worker configuration. This means you can "Install" the app directly onto your Windows, macOS, or Android device. It lives in your dock or app drawer, launches instantly, and feels like a native system utility.

My Journey & Documentation

Building this wasn't just about the code; it was about solving a personal workflow bottleneck. I wanted a way to turn a quick AI chat into a clean PDF I could share or submit, without the formatting headache.

Key Links:

Live Demo: https://markdown-pdf-self.vercel.app/
GitHub Repository: SuryanshSwarn09/markdown-pdf