Clarify

Education shouldn't be language dependent.

Comment

Inspiration

Learning doesn't speak just one language. Across the United States, over 5 million English Learning (EL) students face a quiet crisis in our classrooms, a number that has surged by 1 million in just the past decade. These students aren't falling behind because they lack intelligence or capability. They're struggling because language barriers stand between them and understanding the material they're being taught.

I created Clarify to break down those barriers. Every student deserves to learn in the language they think in, while mastering subjects taught in English. Education should be accessible to everyone, regardless of the language they speak at home.

What it does

Clarify is an AI-powered study assistant that helps students understand their assignments in their preferred language. Students can snap a photo of their homework, type a question, or speak directly to the app.

Within seconds, Clarify:

  • Translates the problem into one of 7 supported languages (Spanish, Chinese, Arabic, Vietnamese, French, Hindi, Portuguese)
  • Explains the solution with step-by-step guidance tailored to the student's grade level (1st grade through college)
  • Speaks the explanation aloud using natural-sounding multilingual text-to-speech
  • Offers two modes: Full explanations for understanding, or Hints Mode for learning independently
  • Enables follow-up questions via text or voice in the student's language
  • Saves homework history so students can review past explanations
  • Builds a study guide for students to have extra conceptual review and practice problems

How I built it

Tech Stack:

  • Frontend: React + TypeScript + Vite for a fast, modern web app
  • Styling: Tailwind CSS for responsive, mobile-first design
  • AI Analysis: Google Gemini 2.5 Flash API for homework analysis and explanations
  • Text-to-Speech: ElevenLabs multilingual v2 API for natural audio in 7+ languages
  • Voice Input: Web Speech API for speech-to-text in multiple languages
  • Backend: Firebase (Authentication, Firestore, Storage) for user data and conversation history
  • State Management: Zustand for lightweight global state
  • Deployment: Vercel for instant global deployment

Key Features Implemented:

  • Camera integration for scanning handwritten/typed homework
  • Real-time voice transcription with continuous listening
  • Grade-level adaptive AI prompting (different explanations for 3rd graders vs college students)
  • Hints Mode toggle for learning-focused guidance
  • Conversation threading for follow-up Q&A
  • Audio playback with Howler.js for cross-browser compatibility

Challenges I ran into

Multilingual Speech Recognition: Mapping user language preferences to browser-supported speech recognition codes was tricky. I solved it by using English for homework questions (since most assignments are in English) and the user's target language for follow-up conversations.

Audio Loading States: React 18's automatic batching caused the audio loading indicator to skip rendering. I fixed this by wrapping audio generation in setTimeout to ensure proper render cycles.

Real-time Voice Input UX: Users wanted to pause while speaking without the recognition stopping. I implemented continuous listening with a manual "Done" button instead of auto-submit.

SPA Routing on Vercel: Client-side routing with React Router required proper vercel.json rewrites configuration to prevent 404 errors.

Accomplishments that I'm proud of

✅ True multilingual support: Not just translation, but culturally aware explanations in 7 languages with natural-sounding voice output

✅ Three input methods: Scan, type, OR speak so students can learn however feels most comfortable

✅ Hints Mode: Encourages independent learning instead of just giving answers

✅ Grade-level adaptation: The same math problem gets explained differently to a 4th grader vs a high school student

✅ Seamless voice experience: Speech-to-speech functionality makes it accessible for students who struggle with reading/typing

✅ Production deployment: Fully functional web app deployed to Vercel with Firebase backend

What I learned

Context is everything: Personalizing AI responses based on grade level dramatically improves understanding

State management complexity: Managing multiple async operations (AI analysis, audio generation, file uploads) requires careful state design

Browser APIs are powerful: Modern web APIs like Web Speech and MediaDevices enable native app-like experiences

Deployment configuration: Understanding build systems, environment variables, and deployment is crucial for production apps

What's next for Clarify

Short-term:

  • More languages: Expand to support 20+ languages including Korean, Japanese, Russian, Tagalog
  • Subject-specific tutors: Specialized AI models for math, science, literature, etc.
  • Parent dashboard: Track student progress and homework completion

Long-term:

  • Mobile apps: Native iOS and Android apps with camera optimization
  • Handwriting recognition improvements: Better OCR for messy handwriting
  • Study groups: Collaborative learning with classmates in their preferred languages
  • Teacher integration: Insights for educators on common student struggles
  • Gamification: Reward badges and streaks for consistent learning

Clarify isn't just a homework helper. It's a bridge to educational equity for multilingual families.

Built With

Share this project:

Updates