Atlas

Atlas is science fiction brought to life - ask questions about the world and get real-time answers on a globe.

Comment

Inspiration

I wanted a globe I could talk to. Google Earth is beautiful, but it doesn't actually tell you what's happening, where. And there are news feeds, but they're not spatial, so there's no real solution out there. A lot of my inspiration came from science fiction. There's a Chinese detective SciFi show called Mobius (Chinese: 不眠日), and I remember a lot of scenes with these sort of "intelligence dashboards." That's what I wanted to build.

What it does

Atlas is an AI-powered globe. You ask it anything, like "highlight elections" or "show me earthquakes" and it sends your question through an LLM that returns a structured list, highlights those countries or events on the globe, and pans the camera and shows a text answer in the side panel. It's got a live stock ticker across the top pulling real prices and a collapsible news feed on the left.

How we built it

  • Frontend: React + TypeScript + Vite. react-globe.gl for the 3D Earth, which uses Three.js under the hood. Tailwind for styling.
  • Backend: Supabase Edge Functions. Separate functions for the stock ticker, news feed, and the main query pipeline that does the NLP → country JSON conversion.
  • AI: OpenAI for the natural-language → structured-country-highlight step. The model is prompted with the current date and a schema; it returns a list of ISO country codes, short labels, and per-country explanations.
  • Polygons: Country shapes come from a public GeoJSON. When the AI returns ["UKR", "ISR", "YEM", ...], we filter the GeoJSON features and feed them to react-globe.gl's polygonsData at semi-transparent fill.
  • Stock prices and news are pulled through Edge Functions so the API keys never touch the client. Both components have fallbacks so the UI degrades gracefully when an endpoint rate-limits.
  • Deployment: Published via MeDo's one-click deploy, which handled the TLS + domain setup.

Challenges we ran into

  • Getting the AI to return enough countries, and recent enough ones. The first few versions returned three or four results from years ago because the model was being cautious. Fixed by explicitly telling it the current date and asking for 8–15 regions per query.
  • Polygon rendering. Countries are GeoJSON MultiPolygons and my first attempt just rendered dots at centroids, which looks terrible for a country like the US or Russia. Switched to full shape rendering with controlled altitude so they float a bit above the globe surface without clipping.
  • Z-index. The news panel, the answer panel, the stock ticker, and the globe compositor all wanted to be on top at the same time. Took three iterations to get a layering order where opening one panel didn't cover important text from another.
  • Answer Panel width. It kept covering half the globe. Eventually dropped it from 420px to 340px, which was right.

Accomplishments that we're proud of

  • The globe actually answers questions. You type a question and countries flash up. It's the thing I set out to build.
  • It's fast. The query round-trip is under a few seconds in most cases, and the globe stays interactive the whole time.
  • It's beautiful.

What we learned

  • LLM-backed queries work better when you constrain the output shape tightly. "Return 8-15 countries as ISO codes with 1-2 sentence explanations" is way more reliable than "return relevant countries."
  • Supabase Edge Functions are the right call for anything that needs a secret key. Client-side API keys would have been embarrassing.

What's next for Atlas

Turn it into a real intelligence tool for economists, analysts, journalists, and more.

  • More default cells so new users don't start at a blank prompt (elections, natural disasters, commodity prices, demographic shifts).
  • Timeline slider so you can scrub through the last 30 days of whatever you're querying.
  • Watchlist mode - pin a query and have it auto-refresh + notify.
  • Multi-region comparative view - "show me protest frequency in OECD countries" and see a heatmap across those countries side by side.
  • Agentic layer - let an AI agent hit the globe as a tool so it can reason spatially about the world.

Built With

Share this project:

Updates

Submission history