LearnPlay

• 

  UI/UX

Inspiration

Learning tough topics like machine learning or math often feels like decoding a foreign language. We wanted to make studying playful and personal — something that feels like chatting with a friendly tutor instead of reading a textbook. That’s how LearnPlay was born — a mix of teaching and fun, powered by AI.

What it does

LearnPlay turns any topic into an engaging learning experience. It explains concepts with analogies, summarizes the core ideas in three bullet points, walks through an example, and ends with a check question. It can also generate quizzes, playful stories, or real-world correlations (like comparing backpropagation to cooking pancakes!).

How we built it

We built LearnPlay using React for the frontend and a Node.js/Express backend that connects with an LLM (Large Language Model) via API. The chat UI streams messages in real time, and users can upload study materials for context. We used Markdown rendering for dynamic explanations and local storage for quiz scoring.

Challenges we ran into

Handling streaming AI responses smoothly in the UI

Parsing mixed outputs (Markdown, JSON, text) from the model

Keeping the app lightweight while supporting file uploads and progress tracking

What we learned

We learned how to integrate streaming APIs with React, manage asynchronous data flow, and design an adaptive tutoring interface that balances clarity and creativity.

What’s next

We plan to add:

A progress dashboard with topic mastery visualization

Voice-based interactions for accessibility

Multiplayer “study duel” mode for collaborative learning

Built With

• node.js
• react.js