HackMentor AI - Your 24/7 AI Pair Programmer

Inspiration 💡

The inspiration for HackMentor AI came from a deeply personal frustration we've all experienced: coding alone at 2 AM with no one to help.

During my countless hackathon nights, I watched talented developers struggle with bugs that could've been caught in seconds with a quick code review. I saw friends abandon great ideas because they got stuck on implementation details. I experienced the burnout from coding for hours without breaks, the security vulnerabilities that slipped into production, and the performance issues we only discovered too late.

But the meta-moment that sparked HackMentor was this hackathon itself. While brainstorming ideas, I thought: "What if I built a tool to help hackathon participants... at a hackathon?" A tool that judges themselves would immediately understand and use. That's when it clicked - create an AI mentor that watches you code and helps in real-time, just like having a senior developer sitting next to you.

The vision was clear: democratize access to expert code review and mentorship for every developer, regardless of experience level or timezone.

---

What it does 🚀

HackMentor AI is an intelligent coding assistant that provides real-time mentorship through multiple interaction modes:

Core Features:

1. 👁️ Vision-Powered Screen Analysis

• Watches your screen using GPT-4 Vision AI
• Extracts code from screenshots automatically
• Provides contextual feedback based on what you're working on
• Works with any IDE or code editor

2. 💬 Smart Chat Interface with Auto Code Detection

• Paste code directly into chat for instant review
• AI automatically detects code blocks (with or without markdown)
• Ask questions in natural language: "Why is my API call failing?"
• Get detailed explanations with code examples

3. 🎤 Voice-First Interaction

• AI speaks feedback using ElevenLabs text-to-speech
• Feels like pair programming with a human mentor
• Voice commands: "Review my code", "Explain this function"
• Browser fallback for universal accessibility

4. 🔍 Comprehensive Code Analysis

• Bug Detection: Catches syntax errors, logic bugs, type mismatches
• Security Scanning: Identifies XSS, SQL injection, exposed API keys
• Performance Optimization: Detects unnecessary re-renders, memory leaks, inefficient algorithms
• Best Practices: Suggests proper naming, code structure, patterns
• Accessibility: Checks for a11y issues in frontend code

5. 🏥 Developer Wellness Monitoring

• Tracks coding session duration
• Break reminders every 30 minutes (configurable)
• Health score based on continuous coding time
• Prevents burnout with gentle nudges

6. 💰 Cost & Sustainability Metrics

• Estimates cloud infrastructure costs from code patterns
• Calculates carbon footprint based on code efficiency
• Suggests optimizations for both cost and environmental impact
• Covers FinTech and Sustainability tracks

7. 📚 Context-Aware Learning

• Adapts explanations to your skill level
• Teaches concepts as you encounter them
• Progressive difficulty in suggestions
• Learns from your coding patterns

---

How we built it 🛠️

Tech Stack:

Frontend:

• Next.js 14 with App Router for modern React development
• TypeScript for type safety and better developer experience
• Tailwind CSS + Shadcn UI for beautiful, consistent design
• Framer Motion for smooth animations
• MediaRecorder API for screen capture

Backend:

• Next.js API Routes for serverless functions
• Supabase (PostgreSQL) for database, authentication, and real-time features
• Upstash Redis for caching and rate limiting

AI & ML:

• GPT-4o-mini (OpenAI) for vision-based code extraction from screenshots
• Groq API (Llama 3.1 70B) for lightning-fast code analysis
• Voyage AI for code embeddings and semantic search (RAG future implementation)
• ElevenLabs API for natural text-to-speech with browser fallback

Deployment:

• Vercel for hosting with edge functions
• GitHub for version control

Architecture:

User Interface (Next.js)
        ↓
Screen Capture / Chat Input
        ↓
API Routes (Next.js)
        ↓
    ┌───┴───┐
    ↓       ↓
Vision AI   Code Analysis
(GPT-4V)    (Groq Llama 3.1)
    ↓       ↓
    └───┬───┘
        ↓
Response Generator
        ↓
Voice Synthesis (ElevenLabs)
        ↓
User Receives Feedback

Development Process:

Week 1: Foundation

• Set up Next.js 14 project with TypeScript
• Designed database schema in Supabase
• Implemented authentication with Google OAuth
• Created basic UI components with Shadcn

Week 2: Core AI Integration

• Integrated OpenAI GPT-4 Vision for screenshot analysis
• Connected Groq API for fast code analysis
• Built chat interface with real-time updates
• Implemented code detection in chat messages

Week 3: Advanced Features

• Added voice synthesis with ElevenLabs
• Built screen capture functionality
• Implemented health monitoring system
• Created metrics dashboard (cost/carbon tracking)

Week 4: Polish & Optimization

• Improved UI/UX with animations
• Added loading states and error handling
• Optimized API calls with caching
• Created demo page for judges
• Comprehensive testing and bug fixes

Key Technical Decisions:

Why Groq over other LLMs?

• 10x faster inference (critical for real-time feedback)
• Free tier with generous limits (14,400 requests/day)
• Excellent code understanding with Llama 3.1 70B

Why GPT-4o-mini for Vision?

• Best-in-class OCR for code extraction
• Affordable pricing ($0.15/1M tokens)
• Reliable multimodal understanding

Why Supabase?

• PostgreSQL with pgvector for future RAG implementation
• Built-in authentication and real-time subscriptions
• Generous free tier perfect for hackathons

Why Next.js 14?

• Server and client components for optimal performance
• API routes eliminate need for separate backend
• Edge runtime for global low latency

---

Challenges we ran into 🧗

1. Screen Capture Cross-Browser Compatibility

Problem: MediaRecorder API works differently across browsers, especially Safari.

Solution: Implemented progressive enhancement with feature detection. Added fallback to chat-only mode for unsupported browsers. Focused on Chrome/Edge where screen sharing works best.

2. Vision AI Accuracy for Code Extraction

Problem: Initial OCR was extracting garbled code with formatting issues, especially with syntax highlighting and dark themes.

Solution:

• Preprocessed screenshots to improve contrast
• Fine-tuned GPT-4 Vision prompts to focus on code structure
• Added validation layer to check if extracted text is valid code
• Implemented retry logic with different prompts if initial extraction failed

3. Real-time Performance Under Load

Problem: AI analysis was taking 5-10 seconds, too slow for "real-time" feedback.

Solution:

• Switched from GPT-4 to Groq Llama 3.1 for 10x faster inference
• Implemented Redis caching for repeated code patterns
• Optimized prompts to reduce token count
• Added streaming responses for incremental feedback

4. Cost Management for Free Tier

Problem: OpenAI and ElevenLabs APIs can get expensive quickly.

Solution:

• Used GPT-4o-mini instead of GPT-4 (15x cheaper)
• Implemented aggressive caching strategy
• Added rate limiting per user (10 requests/hour free tier)
• Created browser fallback for voice (Web Speech API)
• Designed system to work entirely on free tiers

5. Code Detection in Natural Language

Problem: Users paste code without markdown backticks, making detection difficult.

Solution:

• Built smart regex patterns to detect code blocks
• Analyzed indentation patterns (2+ spaces = likely code)
• Checked for language-specific keywords (function, const, class, etc.)
• Added confidence scoring - only analyze if >80% sure it's code

6. Health Monitoring Without Being Annoying

Problem: Break reminders every 30 minutes felt intrusive during flow state.

Solution:

• Made reminders gentle toasts (not modal popups)
• Added "Snooze 15 min" option
• Reduced frequency if user dismisses repeatedly
• Only show reminders during active coding (not idle)

7. Balancing Multiple AI Models

Problem: Managing API keys, rate limits, and fallbacks for 3+ AI services.

Solution:

• Created unified AI abstraction layer
• Implemented graceful degradation (GPT-4V → fallback to Groq for code)
• Added comprehensive error handling
• Built retry logic with exponential backoff

8. Responsive Design for Code Display

Problem: Code blocks overflow on mobile, syntax highlighting breaks layout.

Solution:

• Used horizontal scroll for code blocks on mobile
• Implemented responsive font sizes
• Added copy button for easy code sharing
• Tested thoroughly on iPhone and Android

---

Accomplishments that we're proud of 🏆

1. Actually Solving a Real Problem

This isn't a "cool demo" - it's a tool I genuinely use while coding. During development, HackMentor caught bugs in its own codebase multiple times. Meta? Absolutely. Useful? Incredibly.

2. Multi-Modal AI Integration

Successfully combined three different AI models (Vision, LLM, TTS) into one seamless experience. Each handles what it does best, creating a system greater than the sum of its parts.

3. Real-Time Performance

Achieved <3 second response time for code analysis, making the "real-time" claim actually true. This required significant optimization and smart architecture choices.

4. Accessible to Everyone

Built with progressive enhancement - works great with latest tech, but degrades gracefully for older browsers. Chat mode works even without screen sharing. Voice has browser fallback.

5. All Four Tracks Covered Organically

• AI/ML: Vision AI, Groq LLM, embeddings architecture
• HealthTech: Developer wellness monitoring, burnout prevention
• FinTech: Cloud cost analysis and optimization suggestions
• Sustainability: Carbon footprint calculation, code efficiency metrics

This wasn't forced - each feature naturally addressed a track because they're all interconnected in modern development.

6. Production-Ready Code Quality

• TypeScript throughout for type safety
• Comprehensive error handling
• Loading states and fallbacks everywhere
• Mobile responsive
• Accessibility compliant
• Clean, documented code

7. Free Tier Viability

Entire system runs on free tiers of various services. This means HackMentor can actually be used by students and developers worldwide without cost barriers.

8. Built During a Hackathon, For Hackathons

The ultimate meta achievement - created a tool to help hackathon participants while participating in a hackathon. Used HackMentor to debug HackMentor. 🤯

---

What we learned 📚

Technical Learnings:

1. Vision AI is Powerful but Tricky

• Prompt engineering for vision models is different from text LLMs
• Image preprocessing (contrast, resolution) significantly impacts accuracy
• OCR still struggles with certain fonts and color schemes
• Always have validation and fallbacks

2. Real-Time AI Requires Creative Architecture

• Traditional request-response is too slow
• Streaming responses improve perceived performance
• Caching is crucial for cost and speed
• Edge functions reduce latency globally

3. Multi-Modal UX is Complex

• Users don't think in "modes" (text vs voice vs screen)
• Best UX lets users switch seamlessly
• Each mode needs its own optimizations
• Fallbacks should be invisible

4. Free Tiers Have Limits

• Design with constraints from day one
• Rate limiting is a feature, not a bug
• Caching isn't optional - it's essential
• Always have a degraded-but-functional mode

Product Learnings:

1. Solve Your Own Problem

• Built something I needed while building it
• Instant feedback on what works vs what doesn't
• Authentic use cases drive better features
• Dog-fooding leads to better products

2. Meta Products Have Unfair Advantages

• Judges immediately "get it" when it solves their problem
• Demo writes itself when the audience is the user
• Word-of-mouth spreads faster in communities
• Building for yourself = building for your peers

3. Progressive Enhancement Wins

• Not everyone has latest Chrome
• Mobile matters even for "desktop" tools
• Graceful degradation > feature-gating
• Accessibility isn't optional

Personal Learnings:

1. Scope Management is Critical

• Initial idea had 20 features
• Shipped with 7 core features done well
• Quality > quantity in hackathons
• A polished MVP beats a buggy full product

2. Time Box Everything

• Set 2-hour limits for each feature
• If not done in 2 hours, move on
• Polish at the end, not during building
• Ship > perfect

3. Health Monitoring Isn't Just a Feature

• I needed the break reminders I built
• Coding for 18 hours straight isn't productive
• The irony of building health features while burning out
• Practice what you build

4. Community Feedback is Gold

• Showed early versions to developer friends
• Their "wait, this is actually useful" confirmed direction
• Bug reports from real users beat testing alone
• Building in public creates accountability

---

What's next for HackMentor AI 🚀

Short-Term (Next 3 Months):

1. RAG-Powered Knowledge Base

• Implement vector search with Voyage AI embeddings
• Index documentation for React, Next.js, TypeScript, etc.
• Provide contextual code examples from official docs
• Learn from user's past code and mistakes

2. Multi-User Collaboration

• Team coding sessions with shared AI mentor
• Real-time code review for pair programming
• Team analytics (who's stuck, who needs help)
• Collaborative debugging

3. GitHub Integration

• Auto-review pull requests before merge
• Comment on code with suggestions
• Track code quality trends over time
• Integration with CI/CD pipelines

4. VS Code Extension

• Native IDE integration
• Inline suggestions as you type
• Sidebar panel with HackMentor
• One-click fixes

Mid-Term (Next 6 Months):

5. Advanced Health Features

• Posture detection using webcam (opt-in)
• Eye strain analysis and blue light warnings
• Pomodoro technique integration
• Wellness score with trends

6. Learning Paths

• Personalized roadmaps based on code analysis
• Skill assessment from coding patterns
• Recommended tutorials and resources
• Progress tracking with achievements

7. Mobile App

• React Native app for iOS/Android
• Voice-only mode for accessibility
• Quick code reviews on the go
• Push notifications for insights

8. Advanced Metrics

• Technical debt quantification
• Refactoring recommendations
• Architecture analysis
• Performance benchmarks

Long-Term (Next Year):

9. Custom AI Training

• Companies can train HackMentor on internal codebases
• Style guide enforcement
• Domain-specific best practices
• Private knowledge base

10. Enterprise Features

• Team analytics dashboard
• Manager view for productivity insights
• Onboarding automation for new hires
• Custom integrations (Slack, Jira, etc.)

11. Marketplace

• Community-contributed code patterns
• Specialized agents (React expert, Security expert, etc.)
• Monetization for contributors
• Premium templates and guides

12. Research & Publications

• Publish findings on developer productivity with AI
• Share anonymized data on common coding mistakes
• Contribute to open-source AI tools
• Academic partnerships

Moonshot Goals:

🎓 Education Platform

• Partner with coding bootcamps
• Free tier for students verified via .edu emails
• Curriculum integration
• Teacher dashboard for class analytics

🌍 Global Accessibility

• Support for 10+ programming languages (not just English)
• Localized documentation
• Regional cloud deployments for low latency
• Offline mode with on-device models

🤝 Open Source Core

• Open-source the base architecture
• Community-driven development
• Plugin ecosystem
• Transparency in AI decision-making

💡 AI Research Lab

• Dedicated team for improving code understanding
• Novel architectures for real-time analysis
• Contributing to open-source LLMs
• Making AI mentorship accessible to all

---

Impact Vision 🌟

We envision a future where every developer, regardless of experience or location, has access to world-class mentorship.

HackMentor AI is just the beginning. Our ultimate goal is to:

• Reduce the learning curve for new developers from years to months
• Prevent burnout by making coding healthier and more sustainable
  
• Democratize access to expert code review and best practices
• Accelerate innovation by helping developers build faster and better
• Create a global community of developers learning together

27 million developers worldwide. If HackMentor can help even 1% of them code better, that's 270,000 developers building better software, creating more value, and enjoying their craft more.

That's the future we're building. One line of code at a time.

---

Try HackMentor AI Today! 🎉

Live Demo: hack-mentor-ai.vercel.app

GitHub: github.com/yashodipmore/HackMentor.ai

Demo Video: [Coming Soon]

Contact: yashodipmore2004@gmail.com

---

Built with for SNOW FEST 2026 by Yashodip More

"Code Better. Learn Faster. Build More."

Built With

• elevenlabs
• gemini
• groq
• mongodb
• redis
• supabase
• vision
• voyage