Frosty Spark

Inspiration

I teach an afterschool program for K-8 students, and the "administrative chaos" is real. Taking attendance takes away from learning time, and simply getting 20 kids logged into a new coding tool can take half the class because they can't read the whiteboard credentials clearly. I wanted to build a "digital hearth"—a warm, seasonal hub that automates the boring stuff (attendance, password sharing) and uses AI to spark creativity, so we can focus on the fun parts of learning.

What it does

Frosty Spark is a real-time classroom companion that connects a Teacher Dashboard to Student devices instantly.

• For Teachers: It's a command center. Teachers can create sessions, use Google Gemini to generate lesson plans instantly, and share resources. A key feature is the "Credential Mode," which securely displays usernames and passwords large on student screens, eliminating the "I can't see the board" excuse.

• For Students: It's a gamified portal. They join via a simple code, tap to mark attendance, and get instant access to files and links. The "Big Screen" Demo: We built a "Code Transfer Station" where students can paste their code snippet, hit send, and it instantly appears on the teacher's projector for the whole class to debug together.

• AI Art Studio: Students can generate their own seasonal avatars/stickers using Gemini's image generation models.

How we built it

We decided to go all-in on Generative AI and Real-time capabilities:

• Frontend: We used React with Vite and Tailwind CSS to build a responsive, highly animated UI. We implemented a custom theming engine that switches the entire app's color palette and assets between "Winter," "Spring," "Fall," and "Halloween" modes.
• Backend & Sync: We used Supabase for Auth and Database. Crucially, we leveraged Supabase Realtime subscriptions. This allows the teacher to push a URL or a Code Snippet, and it pops up on every student's device within milliseconds, without them needing to refresh.
• AI Integration: We integrated the Google Gemini API (@google/genai SDK). We used gemini-3-flash-preview for text tasks like generating lesson plans from a single topic keyword. We used gemini-2.5-flash-image (Nano Banana) for the "Class Poster" and "Student Sticker" generators to create safe, vector-style graphics on the fly.

Challenges we ran into

Context & State Management: Managing the "Vibecoding" flow was tricky. Specifically, ensuring that when a student joins, they are strictly isolated to that specific session and don't see data from previous classes. We had to implement strict RLS policies and frontend checks to clear stale state.

Real-time Latency:Getting the "Code Transfer Station" to feel instant required fine-tuning our Supabase subscription logic to handle postgres_changes efficiently without flooding the client.

Prompt Engineering: getting the AI to generate consistent, kid-friendly vector art required iterating on our system prompts to ensure the output didn't look too realistic or scary for the younger kids.

Accomplishments that we're proud of

• The "Credential Modal": It sounds simple, but solving the specific pain point of securely sharing login info with a room full of 8-year-olds is a huge win for classroom flow.
• *Seamless Tech Stack: * We successfully glued together React, Supabase Realtime, and Gemini AI into a cohesive experience. It doesn't feel like "an app with AI bolted on"—the AI feels like a core teaching assistant.
• The Aesthetic: We are proud of the UI polish. The floating emojis, the glassmorphism effects, and the instant theme switching make it genuinely fun to look at.

What we learned

We learned that ideas are not limited by coding speed anymore. AI tools act as force multipliers that help us tackle everyday tasks—like lesson planning or asset generation—much faster. We also learned the power of "Local First" thinking; adding offline support for local storage meant the app keeps working even if the school Wi-Fi gets spotty.

What's next for Frosty Spark

We want to make teaching even more fun!

• Expand to SaaS: Polish the teacher onboarding so any afterschool program can sign up.
• More Gamification: Add a "Badge" system where the AI analyzes student code and awards badges for creativity or clean syntax.
• LMS Integration: Allow exporting attendance data directly to Google Classroom.

Built With

• antigravity
• google-cloud-studio
• react
• supabase
• typescript
• vercel