COCO | Devpost

Architecture

Inspiration

Coco started from a simple frustration: kids often watch videos passively, and the learning moment disappears as soon as the video ends. We wanted to turn that one-way experience into a two-way one, where children can watch, draw, speak, and get feedback in real time.

The vision was to combine the familiarity of a YouTube-style interface with the engagement of interactive learning checkpoints. Instead of asking, “Did you watch it?”, we wanted parents and kids to ask, “What did you learn from it?

What it does

Coco is an AI-powered interactive learning platform for kids. It combines a familiar short-video browsing experience with active learning episodes.

Kids browse and open interactive episodes.
During episodes, they answer checkpoints using voice and drawing.
Coco evaluates responses with AI and gives immediate feedback.
Parents get a dashboard showing watch activity, completed experiences, and concepts to reinforce at home. So instead of passive screen time, Coco turns content into participation and measurable learning signals.

How we built it

A. We built Coco as a full-stack Next.js app with modular API integrations:

Frontend: Next.js + React + Tailwind for a YouTube-style home, episode views, and parent portal.
Interactive engine: Episode playback flow with checkpoint prompts and child responses.
AI pipeline: Multi-API chaining for speech-to-text, checkpoint evaluation, and feedback.
Backend routes: API endpoints for transcription and evaluation, designed to be provider-agnostic via env config.
Data + analytics: Client activity tracking for parent insights (watch time, completion, concept reinforcement).

B. High-level flow:

Child opens an episode
Child responds via voice/drawing at checkpoints
Response goes through transcription + evaluation pipeline
Coco returns immediate feedback
Parent dashboard reflects learning activity over time

Challenges we ran into

Our biggest challenge was multi-API chaining and AI orchestration in a real-time user flow.

Coordinating transcription, evaluation, and feedback without noticeable lag
Handling asynchronous and partial failures gracefully
Keeping responses consistent across different content types and checkpoints
Preserving a smooth kid-friendly UX even when backend steps had variable latency
Designing for resilience was key: one slow or failing API should not break the full learning experience.

Accomplishments that we're proud of

Built a working end-to-end interactive learning product, not just a demo UI
Successfully integrated multi-step AI evaluation into kid-facing episode flows
Shipped a polished, familiar browsing experience with rich interactive content
Added a meaningful parent layer with concept reinforcement insights
Deployed and iterated quickly while maintaining a coherent product direction

What we learned

A. Great AI products need great orchestration, not just strong models B. Latency management and fallback logic are as important as accuracy C. For kids, UX clarity and responsiveness directly impact engagement D. Parent-facing trust grows when learning signals are understandable and actionable E. Building modular APIs early makes fast iteration much easier later

What's next for COCO

Adaptive learning paths: personalize next episodes based on checkpoint performance
Stronger concept mastery tracking: trend lines and mastery scores over time
Teacher/guardian mode: class or multi-child progress views
Richer multimodal interactions: gesture-based and collaborative checkpoints
Safety + quality layer: tighter content moderation and age-specific tuning
Scalable AI pipeline: smarter routing, caching, and retry policies for lower latency

Our next goal is to make Coco not just interactive, but deeply personalized — so every child gets the right learning challenge at the right moment.