datadr1ven

Posted on Mar 1

StarGather: Shared Astronomy Observation Log with Instant Sky Map Viewer (DEV Weekend Challenge: Community)

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

I built this for local amateur astronomy clubs — the kind of passionate groups that organize star parties, share telescopes, and get excited about showing each other cool things in the night sky.

Here in Albuquerque, New Mexico, we have great access to dark skies just outside the city, and clubs like the Albuquerque Astronomical Society or informal backyard groups are always buzzing with “you’ve gotta see this!” moments.

The problem: sightings and notes get scattered across texts, WhatsApp, notebooks, or forgotten emails. It’s hard to quickly share + visualize what someone else just observed without everyone pulling out their own planetarium app.

What I Built

StarGather is a super-lightweight web app that lets club members:

Log quick observations (object name + short notes)
See a shared feed of what the group has recently spotted
Click any entry → instantly open a real professional interactive sky map centered exactly on that object

The killer feature is the sky map: it uses Aladin Lite (the same viewer professional astronomers use) to resolve names like “M42”, “Jupiter”, “Betelgeuse”, or “M31 Andromeda” and show a smooth, pannable, zoomable view of the real sky.

It’s deliberately minimal — perfect for phones at a star party or dark-sky site.

Live demo: https://star-gather.vercel.app

Repo: https://github.com/datadr1ven/StarGather

Demo

Live app: https://star-gather.vercel.app

Screenshots:

Shared feed with quick-log form

Clicking an observation opens the interactive sky map

(For the full code, README, and more details see the repo: https://github.com/datadr1ven/StarGather)

Code

GitHub repo (includes the full single-page MVP code):

https://github.com/datadr1ven/StarGather

The core magic is in app/page.tsx — one file with the feed, form, and Aladin embed.

Key snippet for the sky map modal initialization:

window.currentAladin = A.aladin('#aladin-container', {
  target: '${selectedObject}',
  fov: 25,
  showReticle: true,
  showZoomControl: true,
  showFullscreenControl: true,
  showCooGridControl: true,
});

(Aladin Lite loads via simple CDN <script> — no npm package needed!)

How I Built It

Frontend: Next.js 14 (App Router) + Tailwind CSS for the dark, spacey UI
Sky magic: Aladin Lite v3 (official CDN embed from CDS — https://aladin.cds.unistra.fr/AladinLite/)
State: Pure React useState (no backend/database for this ultra-lean MVP — everything lives in the browser)
Deploy: Vercel (one-command push)

Built in under 2 hours on a Saturday morning — focused on maximum “wow” with minimum moving parts.

The goal was to ship something visual and genuinely fun for astronomy folks, while nailing the community + impressive-tech-trick vibe the challenge asks for.

Thanks for checking it out!

Would love feedback:

Would this be useful at your local star party?
What’s the one feature that would make it club-ready?
Any Aladin power-user tips?

Clear skies! 🌌

astronomy #opensource #nextjs #weekendchallenge #community

DEV Community