Investment Compass

An interactive, gamified investment education platform that guides users through an investment journey, teaching investing through real scenarios, behavioral insights, and AI-powered coaching.

Comment

1. Inspiration

Suggested Content:

  • Problem: Traditional investment education is passive - people read articles or watch videos but don't experience real decision-making pressure
  • Gap: No platform that combines interactive simulation, behavioral finance awareness, and AI coaching
  • Goal: Create an educational tool that teaches through experience, not just information
  • Target: Make investing education accessible, engaging, and psychologically realistic

Personal Touch Needed:

  • Why you chose this challenge category
  • Personal connection (if any) to investment education needs
  • What motivated you to build this specific solution

2. What It Does

Key Points to Highlight:

  • Interactive 43-year investment journey simulation (age 22 to 65)
  • 4 life stage scenarios with realistic decision points
  • AI-powered Socratic coach that challenges thinking (Google Gemini integration)
  • Real-time behavioral bias detection (loss aversion, herd mentality, overconfidence, etc.)
  • Personalized PDF investment plan generation
  • Custom character selection and financial profile customization
  • Portfolio visualization with growth charts
  • localStorage persistence for resume capability

Features to Emphasize:

  1. Learn by Doing: Users make real portfolio allocation decisions and see consequences
  2. Safe to Fail: Experience market crashes without financial risk
  3. AI Coaching: Socratic method challenges users to think deeper
  4. Behavioral Insights: Understand cognitive biases in real-time
  5. Personalization: Custom starting profiles and journey character
  6. Takeaway Value: Downloadable PDF plan for real-world use

3. How We Built It

Technical Architecture:

  • Frontend: React 19 + TypeScript for type safety
  • Styling: Tailwind CSS v4 with custom CSS variable system for theming
  • State Management: React Context API (UserJourneyContext) for global journey state
  • Routing: React Router v6 for multi-page navigation
  • Data Visualization: Recharts for portfolio charts and growth visualization
  • PDF Generation: jsPDF for personalized investment plan documents
  • AI Integration: Google Gemini API (gemini-2.5-flash model) with custom Socratic prompts
  • Persistence: localStorage for journey state across page refreshes

Development Process:

  • Used Vite for fast development and hot module replacement
  • Component-based architecture (AI, behavioral, character, portfolio, scenarios)
  • Service layer separation (calculations, AI, PDF generation)
  • TypeScript for type safety across all interfaces
  • Custom Tailwind color system matching brand identity

Key Files/Components:

  • src/context/UserJourneyContext.tsx: Global state management with localStorage persistence
  • src/services/geminiAI.ts: AI integration with Socratic method prompting
  • src/services/pdfGenerator.ts: PDF generation with colored sections and charts
  • src/components/scenarios/: 4 scenario components (FirstJob, MarketCrash, LifeMilestone, PreRetirement)
  • src/components/ai/AIChallenger.tsx: Interactive AI coach interface

Build Highlights:

  • Implemented localStorage persistence to prevent data loss on refresh
  • Custom character selection with aging visuals across scenarios
  • Real-time portfolio calculations based on allocation and market scenarios
  • Dynamic PDF generation with user journey data visualization

4. Challenges We Ran Into

Technical Challenges:

  1. Infinite Loop Issues: Recharts ResponsiveContainer causing rendering loops - fixed by using fixed dimensions
  2. State Management Complexity: Managing journey state across multiple scenarios - solved with Context API and localStorage
  3. PDF Text Overlap: jsPDF text positioning issues - fixed with proper spacing calculations and page break handling
  4. Navigation Loops: Home page redirecting completed journeys - implemented state-based navigation prevention
  5. AI Integration: Getting Gemini API responses in Socratic style - refined system prompts iteratively
  6. TypeScript Strict Mode: Type-only imports required with verbatimModuleSyntax - systematically fixed across codebase

Design Challenges:

  1. Dark Theme Text Readability: Cards with dark backgrounds had unreadable text - reverted to white cards with dark text
  2. Modal Styling: Dark modal with dark text - changed to light theme for better contrast
  3. Color Consistency: Matching Tailwind custom colors across components - standardized using CSS variables

Time/Scope Challenges:

  1. Solo Development: Built entire application alone in hackathon timeframe
  2. Feature Prioritization: Balancing completeness with feasibility
  3. Testing: Ensuring all scenarios work correctly with custom profiles

5. Accomplishments That We're Proud Of

Technical Achievements:

  • Built complete full-stack application solo in hackathon timeframe
  • Implemented complex state management with localStorage persistence
  • Created AI integration with custom Socratic method prompts
  • Built comprehensive PDF generation system with charts and colored sections
  • Developed 4 unique scenario experiences with different decision mechanics
  • Achieved zero critical bugs - all core features working end-to-end

User Experience:

  • Smooth navigation flow from character selection through results
  • Persistent state across page refreshes (localStorage)
  • Professional UI with consistent theming
  • Responsive design working on mobile and desktop
  • Clear visual feedback for portfolio changes and decisions

Educational Value:

  • Unique combination of interactive simulation + AI coaching + behavioral finance
  • Realistic market crash scenario with emotional impact
  • Forced mistakes with post-mortem analysis teaching moments
  • Comprehensive PDF output for real-world application

Differentiators:

  • Only platform combining Socratic AI method with investment education
  • Behavioral bias detection integrated into decision flow
  • Character-based journey with aging visuals adds emotional connection
  • Custom profile support makes it relevant to each user's situation

6. What We Learned

Technical Learnings:

  • React Context API best practices for complex state management
  • jsPDF library capabilities and limitations for document generation
  • Google Gemini API prompt engineering for consistent Socratic responses
  • Recharts rendering optimization (fixed dimensions vs ResponsiveContainer)
  • localStorage serialization/deserialization for complex TypeScript objects with Date objects
  • Tailwind CSS v4 CSS-based theme system vs traditional config

Product/UX Learnings:

  • Importance of state persistence in web apps (prevents frustration)
  • Dark themes require careful text contrast considerations
  • Progressive disclosure helps manage complexity (character → profile → scenarios)
  • Visual feedback (charts, colors) makes abstract concepts tangible
  • AI coaching feels more authentic with Socratic method vs direct answers

Educational Design:

  • Experiential learning is more engaging than passive content
  • Forced mistakes create better learning moments than success-only paths
  • Behavioral finance concepts are easier to understand when experienced
  • Long-term perspective (43 years) helps users see compound effects

7. What's Next for Investment Compass

Short-term Improvements:

  • Add more scenario variations and decision points
  • Enhance AI coaching with more contextual responses
  • Improve PDF generation with more detailed visualizations
  • Add social sharing of journey results
  • Implement progress saving to cloud (optional accounts)

Medium-term Features:

  • Multi-player comparison mode (see how friends' decisions compare)
  • More sophisticated portfolio calculations (tax implications, different asset classes)
  • Additional behavioral biases detection
  • Gamification elements (badges, leaderboards, achievements)
  • Mobile app version

Long-term Vision:

  • Partner with financial education institutions
  • Integrate with real investment platforms for actual portfolio setup
  • Expand to retirement planning scenarios
  • Community features for discussing strategies
  • Certification program upon completion

Technical Roadmap:

  • Performance optimization (code splitting, lazy loading)
  • Accessibility improvements (ARIA labels, keyboard navigation)
  • Internationalization support
  • Analytics dashboard for educators
  • API for third-party integrations

Educational Enhancements:

  • More granular knowledge level adaptation
  • Additional teaching moments in scenarios
  • Interactive tutorials for first-time users
  • Video explanations of complex concepts
  • Practice mode with unlimited restarts

Built With

Share this project:

Updates