Frontend: 3D globe with status-colored markers (react-globe.gl)

[Jose-Gael-Cruz-Lopez]

Context

The centerpiece — a 3D interactive globe with a marker per in-person hackathon. Depends on #15 (data) and #14 (scaffold).

What to build

1. npm i react-globe.gl three.
2. src/components/Globe.tsx:
   • <Globe globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg" backgroundColor="#0d1117" />
   • pointsData = geocoded hackathons; pointLat={d=>d.lat}, pointLng={d=>d.lng}.
   • Color by status: open → #3fb950, opens_soon → #d29922, closed → #6e7681 (pointColor).
   • Small pointAltitude, a visible pointRadius; optional glow ring.
   • Auto-rotate (controls().autoRotate = true, slow), drag + zoom enabled.
   • Responsive: resize globe to container on window resize.
3. Mount it in the main area from Frontend: Scaffold Vite + React + TS + Tailwind app (site/) #14. Smooth at the current ~24 points.

Acceptance

• Globe renders with earth-dark texture, auto-rotates, drag/zoom works
• One marker per geocoded hackathon, colored by state
• Resizes with the viewport, no layout overflow
• Smooth performance with current dataset
  Depends on: Frontend: Scaffold Vite + React + TS + Tailwind app (site/) #14, Frontend: Supabase data layer (client, types, fetch) #15

---

Part of #10 · Design spec · Repo data lives in .github/scripts/listings.json