HintWise

HintWise is a mobile app built with Lynx that rethinks the UI of learning in the AI era. It's an AI copilot designed to foster critical thinking.

Comment

HintWise Logo

🌟 Inspiration

Our inspiration came directly from the hackathon's theme: "Rethinking UI/UX in the AI Era."

We observed a pattern with modern LLMs: they are incredibly powerful at providing instant answers, but this very strength can foster passive learning. As students and builders, we've all felt the temptation to simply ask an AI for a solution, bypassing the valuable struggle of actually learning.

We were inspired by the Socratic method—the idea that learning is best achieved through guided questioning. This led us to ask:

"What if we designed an AI interface that intentionally puts the human back in the loop?"

We wanted to build a tool that uses AI not as an answer key, but as a wise mentor that guides users toward their own "aha!" moments. This project is our answer to making AI a partner in building critical thinking, not a replacement for it.

🚀 What it does

HintWise is an AI-powered learning assistant that transforms the traditional question-and-answer interaction into a structured, problem-solving journey.

Instead of giving an immediate solution, it follows a unique, three-step process:

  1. Summarize & Clarify
    When a user asks a question, HintWise first uses Gemini AI to rephrase it into a clear, concise problem statement. This confirms the user's intent, a key pattern in agentic UI.

  2. Guide with Hints
    The app then provides a single, actionable hint to get the user started. The user is encouraged to think and try solving the problem themselves.

  3. Progressive Assistance
    If the user is still stuck, they can request additional hints. A deliberate 60-second cooldown timer on this feature encourages reflection. Only as a last resort can the user request the full, step-by-step solution.

✨ To spark curiosity, the home screen features a dynamic, generative UI with animated rows of scrolling question suggestions, powered by Gemini AI.

🛠️ How we built it

We fully embraced the spirit of the hackathon by using Lynx as our exclusive UI stack.

  • Core Framework: Built with @lynx-js/react, allowing declarative, component-based patterns for a truly native UI from a single TypeScript codebase.
  • AI Integration: Used the Google Gemini API (gemini-2.5-flash-preview-05-20) to power:
    • Problem summarization
    • Contextual hint generation
    • Detailed solutions
    • Dynamic question suggestions for the home screen
  • State Management & Performance:
    • Managed logic with React-style hooks (useState, useEffect, useRef, useMemo)
    • Fixed a performance bug by isolating text input state into its own component (preventing re-renders and ensuring smooth animations)
    • Implemented independent loading states to avoid race conditions
  • Rich Animations:
    • Rotating rainbow border → pure CSS3 @keyframes
    • Infinitely scrolling suggestion rows → Lynx Web Animation API (element.animate())

⚡ Challenges we ran into

  • Animation Performance

    • Bug: scrolling animations stuttered every time the user typed.
    • Solution: isolated input state into a separate component → eliminated re-renders.

  • Asynchronous UI Race Conditions

    • Bug: a single isLoading flag caused "HintWise is thinking..." to disappear too soon.
    • Solution: built a loadingStates object to track each API call independently.

  • Adapting to Framework Specifics

    • Discovered Lynx didn’t support CSS pointer-events → caused build errors.
    • Solution: removed it and used JavaScript logic for disabling buttons during cooldown.

🏆 Accomplishments that we're proud of

  • Human-in-the-Loop UI: Not just another chatbot—our design forces engagement and critical thought.
  • Polished & Performant Lynx App: Smooth animations and dynamic UI with a native feel.
  • End-to-End Prototype: From home screen to worksheet to settings, HintWise feels like a complete product.

📚 What we learned

  • The Power of Lynx

    • Cross-platform development with web tech → performant, native-feel UI.
    • Learned performance tricks like state isolation.

  • UI Design in the AI Era

    • Designing for AI ≠ just retrieving info. It’s about structuring conversations.
    • Introducing deliberate friction (e.g., cooldown timers) creates more meaningful user experiences.

  • Nuances of Asynchronous UI

    • Learned how to manage multiple async events while keeping the UI in sync.

🔮 What's next for HintWise

We believe HintWise can grow into a powerful learning platform. Future directions include:

  • User History & Personalization
    Tailor hints based on past struggles and learning progress.

  • Multi-Modality
    Allow users to upload images (e.g., math problems, diagrams).

  • Gamification
    Introduce streaks/points for solving problems with fewer hints.

  • Subject-Specific Tutors
    AI "tutors" specialized in Physics, History, Coding, etc. for more domain-specific guidance.

Share this project:

Updates