SoyoonKO
SoyoonKO

01

SatCHAT

Conversational AI platform for satellite data

Role
Sole frontend on v1 · one of two on v2
Period
2024.03—2026.10
Stack
  • Next.js (App Router)
  • TypeScript
  • Mapbox GL
  • MapLibre
  • OpenLayers
  • TanStack Query
  • Turborepo
  • WebSocket / SSE
Links
Product sitemapix (open source)

Overview

I owned the frontend of a satellite imagery analysis SaaS for two years and eight months, from the v1 launch through the move to a v2 monorepo.

You draw an area on the map, the product finds imagery for it, and you keep asking — change detection, time series — in chat.

I was the sole frontend engineer on v1 and one of two on v2.

Problem

Analysing satellite imagery meant installing dedicated software, pre-processing the scenes, then computing and reading spectral indices. Without domain training you could not even start.

The product set out to replace all of that with drawing a shape on a map and asking a question.

Constraint

  1. The source scenes do not fit in a browser

    A single scene is far past what a browser can download and draw in one piece. Users still expect it to stay smooth while they pan and zoom.

  2. Answers arrive as a stream that can break

    Results stream in rather than arriving at once. When the connection drops, the user is left looking at half an answer.

  3. Four locales ship together

    The interface ships in English, Korean, Japanese and Indonesian. Not just copy — numbers, dates and line breaking all behave differently per locale.

Decision

  1. Fetch tiles, not scenes

    Cloud Optimized GeoTIFF tiles bring down only the area on screen. Spectral indices such as NDVI render through the same path, so switching an index never re-downloads a scene.

  2. Cloud masks arrive coarse first

    An empty map while the precise mask computes reads as a broken product. A coarse mask paints first and the detailed one loads in behind it, so the wait still shows something true.

  3. Moved the stream to WebSocket

    I moved the streaming transport from EventStream to WebSocket and kept the socket alive with ping-pong. Long conversations stopped losing their answers midway.

  4. Pulled the map logic out of the app

    AOI drawing, the comparison view and the spatial file parsers moved into a shared package, removing duplication between apps. That package is now open source.

Interface

Drawing an area-of-interest polygon over satellite imagery in SatCHAT
  1. 01Vertices are dragged to adjust. Self-intersecting shapes and areas below the minimum are rejected while you draw.
  2. 02The area reads back at once, so the user can judge the scope before hitting search.
  3. 03The conversation continues on the same screen — map and chat never split apart.
Drawing an area gives its size immediately and leads straight into search.
The analysis panel in SatCHAT, showing analysis modes, spectral indices and the selected imagery
  1. 01Single, comparison and time series split the analysis modes. The mode chosen sets how many scenes the list below requires.
  2. 02Choosing a spectral index redraws through the same COG tile path — switching an index never re-downloads the scene.
  3. 03Each scene carries its capture time and ground sample distance. To re-check a result later, its provenance has to stay on screen.
What to analyse and how, chosen in one panel.
Comparing two dates of satellite imagery side by side in SatCHAT
  1. 01The handle moves the seam. Drag one side and the other follows — if the two dates drift apart, the comparison itself is wrong.
  2. 02Both sides share one index scale. With different scales, the same colour would mean different values.
Two dates sit side by side, with both maps locked to the same pan and zoom.

Engineering

  1. AOIThe drawn shape is validated and passed on as coordinates
  2. SearchImagery covering those coordinates is found
  3. COG tilesOnly the visible area comes down as tiles
  4. WebSocketAnalysis streams in without dropping
  5. CanvasIndices, masks and the comparison view stack on one screen

  1. Three map engines

    v1 started on OpenLayers and moved to Mapbox GL; v2 added MapLibre. Map interaction sits behind a shared package so the app code does not move when the engine does.

  2. Validation while you draw

    Self-intersection and minimum-area checks run as the shape is drawn. Let a bad polygon through to search and the error only surfaces much later.

  3. Fewer redraws

    A throttled resize observer keeps the map from redrawing on every frame while the window is being resized.

  4. Knowing when it breaks

    Sentry covers client, edge and server. Lighthouse runs against screens behind the login, and pull requests go through an automated check pipeline.

Result

A closed beta in July 2024 led to the public launch that December, which came with the first paid subscription contract — a public research institute in Korea.

The press reported it as the first commercial chatbot in the satellite field. The shared map package was opened up and is still in use.

Screens are taken from the public product site. No company code or internal material is included.