🔗 Quick Links
- Video Demo: Watch on YouTube
📺 Watch Kyle's Demo
See SkyStats in action — the 3D globe, flying aircraft, and interactive dashboard:
The Builder
Kyle comes from a cloud architecture and backend engineering background, working with ETLs, data pipelines, and cloud infrastructure. For this competition, he wanted to step outside his day-to-day and revisit frontend development — something he hadn't done seriously since the Adobe Flash era.
AI Tool Workflow
Kyle used an AI-heavy workflow to build SkyStats entirely through natural language:
- Vercel V0: Generated the entire React dashboard and 3D scene
- ChatGPT: Created 3D scenes for shader/material tweaking, generated textures (hex tiles, height maps, normal maps), and pulled real aircraft statistics
- Zero handwritten code: Everything built through conversational prompts
What He Built: SkyStats
A dashboard answering one fascinating question: How much weight is in the air that is no longer sitting on earth?
- 3D Globe: Three.js spinning Earth with custom texture (Planet Pixel Emporium), vertex-lit with keyed-out oceans
- Flying Aircraft: Boeing 787 Dreamliner models (from Sketchfab) flying realistic paths using trigonometry — not geosynchronous, but actually moving
- Live Statistics: 71.3 million pounds across 150 aircraft, 4.5 million gallons of fuel, average 8-hour flights from 8 countries
- Interactive Filters: BI-style dashboard filtering by manufacturer (Boeing, Airbus), airline, country
- CRT Opening Effect: Globe loads with a retro CRT TV turn-on animation
The Creative Process
Kyle started with a vision: bring back that Flash-era interactivity. He didn't want to solve API integration problems (his day job) — he wanted to create something visually stunning.
"I wanted something that was sky colored, kind of gave that feel like I'm looking at an itinerary... These flights are randomly generated, but the stats are real."
AI as Creative Partner
The most impressive aspect wasn't just generating code — it was the iterative creative process:
- Texture Generation: ChatGPT created hex tile textures, normal maps, height maps, roughness maps, and specular maps on demand
- Shader Iteration: Kyle used a ChatGPT-built 3JS testing scene to tweak shader parameters in real-time
- Precision Control: "Don't parent the jet to the planet — I don't want geosynchronous orbit. Use trig functions to update every frame." And it did.
- Visual Refinement: "Key out the black landmass, make it vertex lit, no shiny spots" — resulting in planes flying through the keyed-out ocean
What Makes This Submission Work
- Unique Angle: Aircraft weight in the air — not flight tracking, but the physics of flight
- Visual Polish: Sky-blue motif, CRT effects, 3D interactivity that feels premium
- Cross-Domain: Backend engineer creating frontend art through AI
- Tool Generation: Creating helper tools (3D shader playground) as part of the process
- Creative Vision: Reviving the "cool web" of the Flash era with modern tech
"I spent longer than I wanted to, but I wrote zero code. I've only worked with React at one former job — I've primarily been backend and cloud stuff. So this was really fun to just be able to do it just through natural language."
The Flash Nostalgia
Kyle references the "cool web" of Adobe Flash — interactive sites, visual experiments, creative coding. While Apple may have killed Flash, the spirit lives on through WebGL, Three.js, and now AI-assisted creation. SkyStats proves you don't need to be a frontend specialist to build beautiful, interactive experiences.
The Lesson
AI tools don't just accelerate coding — they democratize entire domains. A backend engineer can now create sophisticated 3D visualizations without learning React deeply or Three.js from scratch. The barrier isn't knowledge anymore — it's vision.
Kyle shipped.
🏆 Think You Can Build Something Better?
The competition runs until March 5th. Ship early, ship often, and remember: