DEV Community

Gavin Rose
Gavin Rose

Posted on

Atlas

DEV Weekend Challenge: Earth Day

Explore Earth, One Swipe at a Time

Inspiration

Some of us spend hours every day scrolling. The format is compelling, and the habit is already formed. The question we asked ourselves was what if that scroll actually taught you something?

Atlas takes the interaction pattern everyone already knows and fills it with things worth knowing about the planet we live on... things like geology, ecology, ocean science, extreme weather, wildlife, and geography. No headlines, no opinions. Just Earth facts, beautifully presented.

What It Does

Atlas is a vertical swipe feed of Earth fact cards, built and deployed as a Flutter web app. Beyond the content, Atlas has a full progression system aimed to keep people engaged as they learn about the Earth.

  • XP and levels: you earn XP for every new card you read, every quiz you reveal, and every card you save. The XP system has eight explorer levels from Seedling to World Wonder, and each level unlocks a new ambient visual theme (Ocean, Forest, Dusk, Aurora, Glacier, Desert, Volcanic).
  • Achievements: ten unlockable achievements tied to meaningful milestones; exploring five nature cards, saving five cards, revealing five quizzes, exploring all categories, and more.
  • Daily streak: the app tracks consecutive days of use and surfaces your streak in the HUD once it hits day two.
  • Dynamic content: the feed mixes 60+ curated cards with live data pulled from four public APIs, refreshed every 24 hours: NASA APOD (astronomy images), USGS Significant Earthquakes (real-time seismic events), Wikipedia article summaries (25 curated Earth topics, four chosen at random per session), and Open Trivia DB (science and geography questions turned into Real or Fake cards).

How We Built It

The entire app is written in Flutter, hosted on Firebase Hosting.

Stack/Packages:

  • Flutter/Dart
  • Provider for state management
  • SharedPreferences for local persistence
  • http for API calls
  • flutter_animate for card entry animations and toast transitions
  • share_plus for native share sheet
  • Firebase Hosting

Challenges We Ran Into

Swipe-one-card-at-a-time. Flutter's PageView will happily let you queue multiple animateToPage calls, which causes the view to snap to the wrong card when the user swipes quickly. The fix was disabling the PageView's built-in gesture handling entirely and replacing it with a manual drag detector and an animation lock.

Accomplishments We're Proud Of

  • A scroll experience that feels genuinely close to TikTok or Reels, built entirely in Flutter for web, with no JavaScript.
  • A progression system that changes the visual environment of the app as you level up, so the reward is aesthetic and immediate, not just a number going up.
  • Live data from four different public APIs, unified into the same card format as the curated content, with graceful offline fallback.

What We Learned

Short form content, especially as text, forces content to be better. Writing 60+ cards where every headline had to land in under 15 words was harder than any of the actual programming or engineering! XD

We observed that while typically Flutter can be lacking for web development, when developing for designs that are mobile-first, Flutter was still able to shine although it felt like it took a little longer than doing something react-based may have taken.

What's Next

  • User-generated cards: a simple submission form where anyone can contribute a fact, queued for moderation before it enters the live feed.
  • More API sources: NOAA for weather extremes, iNaturalist for real-time species observations, NASA Earth imagery.
  • Personalisation β€” mood-based filtering (Relax / Curious / Mind-Blown tags are already on every card, just not yet surfaced in the UI).
  • Native mobile builds: the codebase is already cross-platform; the only web-specific concession is SharedPreferences over localStorage.

Built With

flutter dart firebase nasa-api usgs-api wikipedia-api open-trivia-db provider shared-preferences flutter-animate glassmorphism

Resources

The repo is publicly available here
The build itself can be found here

Top comments (0)