DEV Community

Cover image for AI Engineering: Advent of AI with goose Day 5
Erica
Erica

Posted on

AI Engineering: Advent of AI with goose Day 5

#goose #ai #adventofai

Day 5: Gesture-Controlled Flight Tracker with Real-Time AI

My Winter Flight Tracker. OMG we are here as in the future. lol
Let me contain my excitement. So I designed my Winter Flight Tracker. My UI features a winter-themed design with a teal and glow aesthetic, animated snowfall, glowing icons.

The gesture-controlled interface displays real flight data from live APIs. This showing actual flights with departure times, airlines, prices, and an interactive map with glowing teal flight paths.

Now for the star of the show MEDIAPIPE! I absolutely adore this. All I thought was this can help million with disabilities. It seems to be an accessibility type technology. It so futuristic and magical. Yes this absolutely is** modern AI engineering** that combines ML models with real-world data.

It created a magical experience for me.

I thought of the movie Minority Report as well when first saw Media Pipe in action. I ran out of token so fast with this because I had to change the hand gestures to peace sign, and pointer, goose designed with fist, palm, and thumb. Also the UI because I love the design aspect. *For the more elaborate projects and to make it to ultimate (which I was able to do some), perhaps we can be allotted more tokens.

I built a touchless, winter-themed flight tracker UI powered by Google’s MediaPipe hand tracking, merging AI, accessibility, and real aviation data – and it runs on your webcam!

With MediaPipe: The Ultimate Touchless Flight Tracker 🛫❄️

The Challenge
“Build a fully gesture-controlled flight tracker with a winter/holiday theme. Real-time flight data. MediaPipe hand tracking. Deployed online. Bonus: make it magical.”

I made it magical and more!

Could you resist? I couldn’t. I could barely contain my exciting me will building an designing this application.

Technology & Tools I Used

  • Google MediaPipe Hands: Real-time computer vision, 21 hand landmarks, 30-60 FPS… all in-browser!
  • Goose Developer & Shell Extensions: AI assistant wrangled my scaffolding, dependencies, and CSS tweaks.
  • Leaflet.js: Dynamic, interactive flight maps.
  • Real aviation API: For live flights.
  • CSS3, JavaScript: All the interactive magic (animations, gesture logic, glassmorphism, glowing icons).

What I Built as an AI Engineer
AI-Powered Hand Tracking ✋

  • Detects hand poses instantly using MediaPipe – just a webcam, no special hardware!
  • Custom JS interprets “peace sign,” “point,” and “fist” into navigation commands (scroll, pause, back-to-top).
  • Computer-vision

Real-Time Flights on a Glowing Map 🌍

  • Flight data cards animate in and out with glassy, snow-dusted styling.
  • Live flight routes visualized, with sorting and wintery map themes.
  • Responsive, beautiful UI for mobile and desktop.

Magical Winter UI Effects ✨

  • Animated snowfall everywhere (CSS + canvas magic).
  • Glassmorphic, teal tinted overlays and glowing icons.
  • Back-to-top gesture triggers a little snowstorm effect!

Accessibility

  • 100% touchless – perfect for kiosks, mobility aids, cold-weather navigation, or demoing the coolest tech around.
  • Works anywhere a webcam can.
  • This is a game changer! We need more technology, AI driven technology that can help and improve the lives or millions with disabilities and impairments.

The AI Engineering Process

  1. Scaffolded UI, JS, and map logic with Goose
  2. Rolled in hand gesture detection with custom gesture -> action mappings
  3. Styled with glassmorphism and teal gradients, live-tweaked for “feel”
  4. Integrated real aviation APIs and MediaPipe, then tuned for 60 FPS smoothness

Challenges and Solutions

  • Index.html Naming: Got a 404 on deploy until I remembered Vercel wants index.html, not index-final.html. Easy fix!
  • Performance: Tuned the hand tracking debounce interval and frame throttle to keep things buttery-smooth across devices.

What I Learned

  • Combining real-world AI (MediaPipe) and real data (APIs) unlocks wild new web experiences.
  • Accessibility can be FUN and futuristic.
  • AI now supercharges classic “hard” UI/UX problems, from interactive design to tough debugging.

Powered By

Final Thoughts
What started as a new challenge and learning experience, turn into such an impressive technology that literally blew me away. This amazing application developed beautifully, Vercel-deployed, AI-driven, magical winter flight tracker I’m genuinely proud to share.

I now study technologies like MediaPipe, AR ** and *Spatial *Intelligence*. I hope to work more these technologies soon. **Accessibility * is so dear to me, these technologies implemented will help those with **disabilities **tremendously.

Day 5: Complete. Magic: Real. Next stop: the clouds.

This post is part of my Advent of AI journey - AI Engineering: Advent of AI with goose Day 5 of AI engineering challenges.

Follow along for more AI adventures with Eri!

Top comments (0)