AI Mentor Wisdom - Hackathon Submission Story

Inspiration

In a world drowning in generic AI chatbots, we asked ourselves: what if seeking wisdom could be magical? What if instead of talking to yet another corporate assistant, you could sit with Gandalf by a crackling fire, receive a knowing wink from Dumbledore, meditate with Master Yoda, or strategize with Ender Wiggin?

We were inspired by the timeless wisdom these fictional mentors have given to millions across generations. Each character represents a different approach to guidance - Gandalf's nature-rooted philosophy, Dumbledore's whimsical yet profound insights, Yoda's cryptic Jedi wisdom, and Ender's tactical brilliance. We wanted to create an experience that goes beyond utility to touch something deeper: the human need for meaningful connection and guidance, even from AI.

The spark came when we realized Bolt.new could help us build something truly immersive in just hours, not weeks. We could create not just one AI experience, but four completely unique ones, each with its own visual universe and personality.

What it does

AI Mentor Wisdom transforms AI assistance into an immersive storytelling experience. Users begin their journey by entering their name at a mystical landing page, then choose from four legendary mentors, each offering a limited number of precious conversations (5 per character).

Each mentor provides:

• Authentic character voices: Powered by OpenAI with carefully crafted prompts, each mentor speaks exactly as fans would expect
• Immersive themed environments: Gandalf's forest realm with floating leaves, Dumbledore's magical office with sparkles, Yoda's galactic meditation chamber with moving stars, and Ender's tactical command center with grid overlays
• Real AI conversations: Not scripted responses, but genuine AI-powered wisdom tailored to each user's questions
• Persistent user sessions: Your conversation history follows you across sessions, making each interaction meaningful
• Beautiful animations: Typing effects, smooth transitions, and environmental animations that make the experience feel alive

The app remembers each user's journey, creating a sense of progression and value in the limited conversations available. It's not just about getting answers - it's about the experience of seeking wisdom from characters who've shaped our understanding of courage, strategy, and growth.

How we built it

The Tech Stack:

• Frontend: React + Vite + Tailwind CSS, built entirely with Bolt.new in around 2 hours
• Backend: Supabase Edge Functions hosting our OpenAI integration
• AI: OpenAI GPT-3.5-turbo with character-specific system prompts
• Deployment: Vercel for the frontend, Supabase for serverless functions

The Process:

Rapid Prototyping with Bolt.new (120 minutes)

• Created the entire frontend structure with a comprehensive prompt and a few back and forths with Bolt
• Bolt generated all components, routing, and state management
• Got a working prototype deployed in record time

Secure AI Integration (45 minutes)

• Built Supabase Edge Functions to protect our OpenAI API key
• Crafted character-specific prompts that capture each mentor's essence
• Implemented fallback responses for resilience

Visual Polish (2 hours)

• Designed four unique themes with custom color palettes and fonts
• Added environmental effects (floating leaves, sparkles, starfields, grid overlays)
• Implemented smooth animations and transitions
• Created a captivating landing page with parallax effects

User Experience Refinement (1.5 hours)

• Fixed session persistence to properly track users across visits
• Added conversation limits to create scarcity and value
• Implemented typing animations for realistic AI responses
• Ensured mobile responsiveness

Key Technical Decisions:

• Used Bolt.new for incredibly fast initial development
• Chose Supabase Edge Functions for secure, serverless API handling
• Implemented client-side state management for instant responsiveness
• Created modular theme system for easy character switching

Challenges we ran into

Session Persistence Bug: Initially, user conversation counts reset on each visit. We had to redesign our localStorage structure to properly tie data to usernames while handling edge cases like case sensitivity.

Character Authenticity: Creating system prompts that consistently captured each character's unique voice was challenging. Yoda's reversed syntax, Gandalf's poetic metaphors, Dumbledore's balance of whimsy and wisdom - each required careful tuning.

Time Pressure: With only 5 hours, we had to make tough decisions about features. We chose polish over quantity, focusing on making 4 perfect experiences rather than 10 mediocre ones.

API Security: Realizing we couldn't safely use API keys in frontend code, we had to quickly pivot to implement Supabase Edge Functions, adding complexity but ensuring security.

Visual Differentiation: Making each mentor's environment feel truly unique while maintaining performance was tricky. We solved this with CSS-only effects that run smoothly even on mobile devices.

Accomplishments that we're proud of

• Built a production-ready app in 5 hours using Bolt.new's incredible capabilities
• Created 4 distinct AI personalities that genuinely feel like their characters
• Designed immersive environments that transport users into each mentor's world
• Implemented secure API architecture that protects sensitive keys
• Achieved perfect mobile responsiveness without sacrificing desktop experience
• Built proper user session management that remembers individual journey progress
• Created smooth, polished animations that make every interaction feel magical
• Delivered an emotional experience, not just a technical demo - users actually feel like they're getting wisdom from beloved characters

Most importantly, we built something that makes people stop and say "wow" - which was our goal from the start.

What we learned

Bolt.new is a game-changer: We generated a complete, production-ready React app in 120 minutes. The time saved on boilerplate let us focus on what matters - the user experience.

Character is everything: The difference between a generic chatbot and our mentors isn't just the prompts - it's the entire experience. Visual design, animations, and even loading states contribute to the illusion.

Constraints breed creativity: Having only 5 conversations per mentor seemed limiting, but it actually made each interaction feel more valuable and encouraged thoughtful questions.

Polish beats features: We could have added more mentors or features, but focusing on perfecting four experiences created something more memorable than a feature-packed but rough app.

Edge Functions are perfect for AI apps: Supabase's Edge Functions solved our security concerns while maintaining the responsiveness users expect from modern apps.

Emotional design matters: The best feedback wasn't about the AI accuracy - it was about how the app made people feel. The floating leaves, the typing animation, the welcome back message - these details created emotional connection.

Speed and quality aren't mutually exclusive: With the right tools (Bolt.new) and clear vision, you can build something both fast AND polished.

This project proved that hackathons aren't just about technical prowess - they're about creating experiences that resonate with users. By combining cutting-edge tools like Bolt.new with thoughtful design and beloved characters, we created something that transcends the typical "hackathon project" to become something people actually want to use.

What's Next?

While built for the hackathon, AI Mentor Wisdom has potential beyond this competition:

• Add more mentors from different fictional universes
• Implement voice interactions for even more immersion
• Create mentor-specific mini-games or challenges
• Build a community where users share wisdom received
• Develop mobile apps for wisdom on-the-go

But for now, we're just proud to have built something that brings a smile to people's faces and maybe, just maybe, helps them find the guidance they're looking for - one conversation at a time.

Built With

• and
• animation:
• animations
• backend)
• css3
• for
• frontend-framework:-react-18-with-vite-rapid-development:-bolt.new-(entire-frontend-built-in-30-minutes!)-styling:-tailwind-css-backend:-supabase-edge-functions-(deno-runtime)-ai:-openai-gpt-3.5-turbo-api-state-management:-react-hooks-(usestate
• localstorage
• session
• storage:
• supabase
• transitions
• useeffect)-deployment:-vercel-(frontend)