STEMify - Science & Digital Citizenship Lessons For Kids

Inspiration

Science, Technology, Engineering, & Mathematics (STEM) education for young minds (ages 4 to 12) often feels rigid or inaccessible. We wanted to build an engaging, interactive platform that feels like a game but acts as a powerful educational tool. The inspiration came from observing how children interact with storybooks and interactive media, blending that curiosity with structured science lessons.

What it does

STEMify on MeDo is a vibrant, interactive web application designed to teach kids science through story driven lessons and quizzes. It provides a limited-time free unrestricted access to a massive library of content including 10 seasons, 70 episodes, 350 scenes, and 350 quiz questions. Each episode features a unique mascot, fully narrated audio, engaging imagery, and interactive quizzes to reinforce learning.

How we built it

Our journey began with a custom built backend. We spent over two weeks designing the architecture and exposing the STEMify database content via a robust RESTful API. We utilized Qwen 3.6plus, Gemini 3, and Codex for the initial architecture development. By the time we were ready to build the frontend on MeDo, our initial 300 signup credits had expired, leaving us with only daily credits and just three days until the hackathon deadline!

This tight constraint forced us to be incredibly judicious. We spent a significant amount of time meticulously crafting a comprehensive prompt and testing our custom API to ensure the backend functioned perfectly. Once the API structure specifications were ready, we shared them with MeDo. Astoundingly, MeDo built a fully functional learning app end to end using just three prompts (two deep prompts and one fast prompt). The AI agent generated a responsive React 19 web application using TypeScript, Vite, TailwindCSS 3, and Zustand, seamlessly integrating our massive content library.

Challenges we ran into

The biggest hurdle was time and credit constraints. With only daily credits and three days left, there was no room for error. Integrating complex, deeply nested JSON data structures from our Firestore backend into the generated UI required extremely careful prompt engineering to ensure MeDo got it right the first time. Ensuring the UI correctly synchronized audio playback with visual feedback during the interactive quizzes was tricky, especially handling edge cases like randomized answer choices while maintaining correct audio mapping.

Accomplishments that we're proud of

We successfully bridged a comprehensive Firebase backend with a fully generated MeDo frontend without losing any fidelity in the user experience. MeDo parsed our API specs and built the entire frontend in just three prompts! The app looks stunning on both mobile and desktop, performs flawlessly, and handles our massive scale of media heavy content (10 seasons, 70 episodes, 350 scenes, and 350 quiz questions) seamlessly. We are incredibly proud of the detailed prompts we crafted and the robust API architecture that efficiently serves hundreds of assets.

What we learned

We learned the immense power of combining detailed architectural specifications with MeDo's generative capabilities. By providing a clear API bridge implementation guide and a well structured consumption prompt, we discovered that AI can build highly complex, state driven applications efficiently, even under extreme constraints. We also learned that spending time perfecting the prompt and API specs upfront saves invaluable time and credits during the actual generation phase.

What's next for STEMify - Science Lesson For Kids

We plan to expand the content library with new subjects beyond basic science. Technically, we aim to introduce an API Gateway for advanced rate limiting and analytics, and potentially add offline support by pre generating content bundles. We are also exploring multi language support to make these engaging lessons accessible to children worldwide.

Built With

• css
• firebase
• google-cloud
• medo
• react
• rest-api
• vite