Strategy AI Maker

Inspiration

"What if anyone, anywhere, could turn their vision into a clear, actionable plan—regardless of resources or expertise?"

This question drove the creation of Strategy AI Maker.

• Problem: 90% of people fail to start or sustain a successful business without a roadmap. Existing tools are either too complex, costly, or generic.

• Gap: A lack of accessible, intelligent, and globally inclusive solutions for dreamers who need practical guidance.

• Vision: Build a tool that democratizes success by combining AI power (Google Gemini) with simplicity, multilingual support (19 languages), and real-world adaptability.

What I Learned

1. Technical Skills:

   • Mastered Google Gemini API integration for dynamic AI responses.
     
   • Built a real-time feedback system for goal refinement .
     
   • Implemented ElevenLabs TTS for voiceovers and PDF generation for exportable roadmaps.
     

2. User-Centric Design:

   • Prioritized intuitive onboarding (e.g., one-click API setup).
     
   • Balanced depth and simplicity: Users get detailed roadmaps without feeling overwhelmed.
     

3. Global Accessibility:

   • Multilingual support isn’t just a feature—it’s a mission to empower underserved communities.
     

How I Built the Project

Tech Stack

• Frontend: React.js + Tailwind CSS (responsive, interactive UI)
  
• Backend: Supabase (auth, database)
  
• AI Engine: Google Gemini API (roadmap generation, feedback)
  
• Voiceover: ElevenLabs TTS API
  
• PDF Export: jsPDF library
  

Key Development Steps

1. Onboarding Flow:

   • Created a seamless setup for users to input their Gemini API key and optional ElevenLabs key.
     

2. Goal Refinement Engine:

   • Built real-time feedback using Gemini API to validate and enhance user goals .
     

3. Adaptive Q&A System:

   • Designed 9 dynamic questions split into 3 phases, with responses shaping follow-up queries.
     

4. Roadmap Generator:

   • Structured output with:
     
     • Executive Summary
       
     • Key Success Factors
       
     • Risks & Mitigation
       
     • Phase-by-Phase Breakdown (expandable activities, step-by-step guides, KPIs, budgets).
       

5. Enhancements:

   • Added voiceover buttons for audio narration.
     
   • Integrated Refine Button for live AI chat to tweak tasks.
     
   • Enabled PDF export for shareable plans.
     

Challenges Faced

1. Technical Hurdles:

   • API Latency: Optimized Gemini API calls to ensure fast, responsive feedback.
     
   • Real-Time Updates: Solved flickering UI during dynamic question generation using React hooks.
     

2. Design Complexity:

   • Information Overload: Simplified roadmap structure with collapsible sections and clear CTAs (e.g., "Expand Activity").
     

3. Multilingual Support:

   • Ensured translations preserved context for strategic terms (e.g., "KPI" vs. localized equivalents).
     

4. Hackathon Constraints:

   • Prioritized MVP features (core roadmap generator) over polish, then iterated based on feedback.
     

Final Thoughts

Strategy AI Maker isn’t just an app—it’s a movement to empower global dreamers. By merging cutting-edge AI with empathy-driven design, we’ve created a tool that turns uncertainty into clarity. Whether you’re in Nairobi, Tokyo, or São Paulo, your vision deserves a roadmap.

🚀 Hackathon Lesson: Innovation thrives when we focus on solving real problems for real people—fast, inclusively, and fearlessly.

Built With

• bolt
• elevenlabs
• netlify
• supabase