Mentor Ai

• 

  ​The intuitive main dashboard where students select their target exam to begin a personalized AI-guided journey.

• 

  ​Subject selection interface for language exams like TOEFL, offering specialized prep for Reading, Listening, Speaking, and Writing.

• 

  ​Students can opt for a structured practice quiz or use the 'Ask Mentor AI' feature for instant, step-by-step help.

• 

  Dynamic Quiz Interface: AI-generated questions with instant feedback and deep conceptual explanations to ensure mastery.

• 

  Step-by-step logical reasoning: Mentor AI breaks down complex problems into digestible steps to ensure deep understanding.

Inspiration

​The inspiration for Mentor AI comes from the massive gap in access to high-quality test prep. While elite students have access to private tutors who teach "the logic" and "shortcuts," many others are left with just answer keys. I wanted to build a multilingual, AI-driven mentor that provides that "tutor-level" strategic insight for free, focusing on the most competitive exams like SAT, YKS, and IELTS. ​## What it does ​Mentor AI is a comprehensive learning platform that features: ​Multimodal Problem Solver: Students can upload photos of complex questions. Using Gemini's Vision capabilities, the app identifies the topic and explains the underlying logic. ​Dynamic Quiz Engine: Instead of static questions, it generates adaptive quizzes that focus on "high-error" topics. ​Gamified Retention: Features a Daily Streak system and Subject-Specific Mastery tracking (hitting 5-streaks triggers milestone rewards). ​Anti-Guess Verification: The mentor doesn't just say "Correct"; it verifies the student's methodology to ensure conceptual mastery. ​## How I built it ​I developed a modern, scalable architecture using: ​Frontend: React 18 with TypeScript for type-safe, robust code execution. ​Styling: Tailwind CSS for a "mobile-first," sleek dashboard UI with custom animations. ​AI Engine: Integrated Gemini Pro & Pro Vision API via a custom service layer (geminiService.ts) to handle text and image-based reasoning. ​State Management: Implemented persistent state using React Hooks (useState, useEffect) and LocalStorage to ensure students never lose their progress or streaks. ​Icons & UI: Leveraged Lucide-React for a clean, intuitive visual language. ​## Challenges I ran into ​The biggest challenge was managing multimodal state—handling image uploads, processing them through the AI, and maintaining a seamless chat history simultaneously. I had to implement a custom Persistence Layer to synchronize the UI with the AI's responses while ensuring the Daily Streak logic correctly calculated time differences to keep students motivated. ​## Accomplishments that I'm proud of ​I am proud of the Milestone System. Seeing the app successfully trigger a "Mastery Award" after a student hits a 5-question streak in a difficult subject like "Calculus" or "English Reading" makes the learning process feel like a game rather than a chore. ​## What I learned ​I gained deep experience in Multimodal AI integration and learned how to translate complex pedagogical strategies (like the Socratic method) into System Instructions that control AI behavior. This project also strengthened my skills in building highly interactive UIs that handle real-time data fetching.

Built With

• css
• gemini
• lucide
• react
• typescript
• vite