Homepage
Learning Page
Create your own Story
Generated Story
Progress Page

📚 CartoonClassroom

🎯 Inspiration

We realized that many educational tools for kids felt boring, mechanical, or too textbook-like. But kids love cartoons, stories, and colorful worlds!
We thought — what if we make learning feel like an adventure, where cartoon characters take kids through fun situations while sneakily teaching them real-world topics?

That's how CartoonClassroom was born — a vibrant, story-based educational platform that explains complex concepts in a "Explain Like I'm 5" comic-style format.

🚀 What it does

Lets kids choose their age, location, classroom, and favorite cartoon characters.
Kids enter any topic (like "volcanoes", "internet", or "emotions").
A short, funny comic story is generated where the characters are part of a mission that teaches the topic.
Features include:
- 📖 Comic viewer with animations and progress tracking
- 🔁 “Refresh Story” if they didn’t understand
- ❓ Doubt-clarifying chatbot
- 📥 Download and 📤 Share options
- ✅ Mark as Learned and bookmark system
- 🏆 Badge collection and learning paths

Everything is kid-safe, text-only, with vivid UI/UX and CSS animations. No copyrighted images are used.

🧱 How we built it

Frontend

React.js (Vite) + Tailwind CSS
Lottie animations + keyframe effects for colorful UI
Redux Toolkit for global state

Backend

Node.js + Express.js
MongoDB Atlas for storing users, favorites, and story history

AI Integration

Google Gemini API (free tier): used for story generation
Prompt engineering ensures age-appropriate, topic-relevant, funny and creative stories

Hosting & Dev

Replit + GitHub
Entire project built inside Replit using AI Agent and manual refinement

🧗 Challenges we ran into

Making sure characters were part of the story, not just narrators
Filtering AI output for age-safety, creativity, and fun
Building colorful, responsive UI that appeals to 6-12-year-olds
Handling situations where no favorite character matched the topic
Avoiding images due to copyright — text-only comic storytelling required extra creativity

🏆 Accomplishments we're proud of

Created a complete education platform using only free APIs and tools
Crafted a story generator that adapts to age, location, topic, and character preference
Built a vibrant, accessible comic viewer that feels like a game
Designed everything to work offline, safe, and easy to use