StockSense.AI

Get AI-powered explanations, real-time data, and research insights to understand the stock market.

Comment

StockSense.AI - Project Documentation

Inspiration

Stock market education has traditionally been intimidating and inaccessible for beginners. Many students and aspiring investors struggle to understand complex financial concepts, lack access to real-time market data, and find it difficult to learn at their own pace. We were inspired to create StockSense.AI to democratize stock market education by combining:

  • AI-Powered Learning: Making complex financial concepts accessible through conversational AI
  • Real-Time Data: Providing live market data with educational context
  • Adaptive Learning: Creating personalized learning paths that adapt to each student's understanding
  • Interactive Tools: Building quizzes, flashcards, and study materials automatically from learning sessions

Our goal was to create an educational platform that feels like having a personal finance tutor available 24/7, helping students learn stock analysis through hands-on practice with real market data.

What it does

StockSense.AI is an agentic AI workspace that transforms stock market learning into an interactive, personalized experience. The platform offers:

Core Features

  1. Interactive Chat Assistant with 4 specialized modes:

    • Research & News: Real-time market research with citations from trusted sources (Perplexity AI)
    • AI Stock Analysis: Educational explanations of fundamentals, technicals, and investment insights (Gemini AI)
    • Stock Data & Charts: Live stock prices, historical data, and visual charts with beginner-friendly explanations
    • Study Mode: Step-by-step adaptive learning with understanding checks

  2. Real-Time Stock Analysis:

    • Live stock prices and key metrics (P/E ratio, market cap, 52-week highs/lows)
    • Interactive charts and visualizations
    • Side-by-side stock comparisons with AI insights
    • Educational explanations for every metric

  3. Adaptive Learning System:

    • Personalized learning paths based on topic complexity
    • Step-by-step concept breakdowns
    • Understanding checks with multiple-choice questions
    • Alternative explanations when students are confused
    • Periodic review sessions

  4. Learning Tools:

    • Auto-Generated Quizzes: Create quizzes from any conversation
    • Flashcards: Generate flashcard decks for memorization
    • Learning Notes: Save important insights and explanations
    • Progress Tracking: Monitor learning progress and review history

  5. Research & Citations:

    • Real-time market news and trends
    • Citations from Investopedia, NSE, Yahoo Finance, and other trusted sources
    • Related questions to deepen understanding
    • YouTube video recommendations for visual learning

  6. Dashboard & Analytics:

    • View all research queries and conversations
    • Track learning statistics
    • Access saved quizzes, flashcards, and notes
    • Review learning history

How we built it

Frontend Architecture

Tech Stack:

  • React 18 with TypeScript for type-safe, component-based UI
  • Vite for fast development and optimized builds
  • React Router for client-side routing
  • Tailwind CSS + shadcn/ui for modern, accessible UI components
  • Recharts for data visualization
  • React Markdown for rendering AI responses

Key Components:

  • Chat.tsx: Main conversational interface with 4 query modes
  • AdaptiveLearning.tsx: Step-by-step learning system with understanding checks
  • FinanceData.tsx: Real-time stock data visualization
  • StockComparison.tsx: Side-by-side stock analysis
  • Learning.tsx: Centralized learning resources (quizzes, flashcards, notes)

Backend Architecture

Supabase Edge Functions (Deno runtime):

  • comet-search: Perplexity AI integration for real-time research
  • market-analysis: Gemini AI for educational explanations
  • finance-data: Stock data fetching and formatting
  • compare-stocks: Multi-stock comparison with AI insights
  • adaptive-learning: Personalized learning path generation
  • generate-quiz: AI-powered quiz creation
  • generate-flashcards: Flashcard deck generation

Database Schema (PostgreSQL via Supabase):

  • research_queries: Store all chat conversations and results
  • quizzes: Saved quiz questions and answers
  • flashcards: Flashcard decks
  • learning_notes: User-saved notes

AI Integration Strategy

Dual API Approach:

  1. Perplexity AI (Comet API):

    • Real-time web search and research
    • Current market data and trends
    • Citations from trusted sources
    • Used for: Research mode, adaptive learning content, quiz context

  2. Google Gemini AI:

    • Educational content formatting
    • Beginner-friendly explanations
    • Concept simplification and analogies
    • Used for: Analysis mode, learning content structuring, quiz/flashcard generation

Model Fallback System:

  • Implemented automatic fallback across multiple Gemini model variants
  • Handles API changes and model deprecation gracefully
  • Provides detailed error messages for debugging

Key Technical Decisions

  1. Session-Based Privacy: No user authentication required - uses browser session IDs
  2. Client-Side API Keys: API keys passed from frontend to Edge Functions for flexibility
  3. Real-Time Updates: Live stock data with educational context
  4. Markdown Rendering: AI responses rendered as formatted markdown
  5. Responsive Design: Mobile-first approach with Tailwind CSS

Challenges we ran into

1. API Model Compatibility

  • Problem: The google/gemini-2.5-flash model name wasn't recognized by the Lovable AI Gateway
  • Solution: Implemented a fallback system that tries multiple model variants (gemini-2.0-flash-exp, gemini-1.5-flash, etc.)
  • Impact: Made the system resilient to API changes and model deprecation

2. Error Handling & User Experience

  • Problem: Generic 500 errors didn't provide useful feedback
  • Solution: Created comprehensive error handling with detailed messages, hints, and status code handling
  • Impact: Users now get actionable error messages instead of generic failures

3. Combining Multiple AI APIs

  • Problem: Integrating Perplexity (real-time research) and Gemini (educational formatting) effectively
  • Solution: Designed a two-stage pipeline: Perplexity for research → Gemini for educational formatting
  • Impact: Best of both worlds - real-time data with beginner-friendly explanations

4. Adaptive Learning Complexity

  • Problem: Creating a learning system that adapts to student understanding
  • Solution: Built a multi-stage system with confusion detection, alternative explanations, and understanding checks
  • Impact: Personalized learning experience that adjusts to each student's needs

5. JSON Parsing from AI Responses

  • Problem: AI models sometimes return JSON wrapped in markdown code blocks
  • Solution: Implemented robust parsing that handles multiple formats (markdown, plain JSON, etc.)
  • Impact: Reliable data extraction regardless of AI response format

6. Real-Time Data Integration

  • Problem: Combining live stock data with educational explanations
  • Solution: Fetch data first, then generate contextual explanations using AI
  • Impact: Students learn with real, current market data

Accomplishments that we're proud of

1. Comprehensive Learning System

  • Built a complete adaptive learning platform with understanding checks, alternative explanations, and review sessions
  • Created a seamless flow from research → learning → assessment → review

2. Dual AI Integration

  • Successfully combined Perplexity AI (real-time research) and Gemini AI (educational formatting)
  • Created a pipeline that leverages each API's strengths

3. Resilient Architecture

  • Implemented model fallback system that handles API changes gracefully
  • Comprehensive error handling with detailed user feedback
  • Robust JSON parsing that handles multiple response formats

4. User Experience

  • Created an intuitive interface with 4 specialized query modes
  • Real-time stock data with educational context
  • Auto-generated learning materials (quizzes, flashcards) from conversations
  • Beautiful, modern UI with shadcn/ui components

5. Privacy-First Design

  • Session-based system that doesn't require user authentication
  • All data stored per-session, respecting user privacy
  • No tracking or analytics beyond learning progress

6. Educational Focus

  • Every feature designed with learning in mind
  • Citations from trusted sources
  • Beginner-friendly explanations for complex concepts
  • Visual learning with charts and YouTube recommendations

7. Full-Stack Implementation

  • Complete frontend with React + TypeScript
  • Backend with Supabase Edge Functions
  • Database schema for learning resources
  • Real-time data integration

What we learned

Technical Learnings

  1. API Integration Best Practices:

    • Always implement fallback mechanisms for third-party APIs
    • Provide detailed error messages for better debugging
    • Handle multiple response formats gracefully

  2. AI Model Management:

    • Model names can change or be deprecated
    • Fallback systems are essential for production applications
    • Different models excel at different tasks (research vs. formatting)

  3. Educational UX Design:

    • Breaking complex concepts into digestible steps improves learning
    • Understanding checks help identify knowledge gaps
    • Alternative explanations are crucial when students are confused

  4. Real-Time Data + AI:

    • Combining live data with AI explanations creates powerful learning tools
    • Context matters - educational explanations should reference actual data
    • Citations build trust and allow deeper research

  5. TypeScript & React:

    • Strong typing prevents many runtime errors
    • Component composition enables flexible, reusable UI
    • React Router makes single-page apps feel native

Product Learnings

  1. User Needs:

    • Students want to learn with real data, not just theory
    • Interactive learning beats passive reading
    • Personalized paths improve engagement

  2. Educational Design:

    • Multiple learning modes (visual, textual, interactive) cater to different learners
    • Assessment tools (quizzes, flashcards) reinforce learning
    • Progress tracking motivates continued learning

  3. Privacy Matters:

    • Session-based systems can provide great UX without requiring sign-ups
    • Users appreciate privacy-first approaches

What's next for StockSense.AI

Short-Term Enhancements

  1. Enhanced Visualizations:

    • More interactive charts with annotations
    • Technical indicator overlays with explanations
    • Portfolio simulation tools

  2. Advanced Learning Features:

    • Spaced repetition for flashcards
    • Learning streaks and achievements
    • Peer comparison (anonymous)

  3. Expanded Data Sources:

    • Cryptocurrency data
    • International markets
    • Economic indicators and news

Medium-Term Goals

  1. Personalized Learning Paths:

    • AI-generated curriculum based on learning goals
    • Skill assessments and recommendations
    • Adaptive difficulty adjustment

  2. Social Learning:

    • Study groups and discussions
    • Share quizzes and flashcards
    • Community-contributed content

  3. Mobile App:

    • Native iOS and Android apps
    • Offline mode for saved content
    • Push notifications for learning reminders

Long-Term Vision

  1. AI Trading Simulator:

    • Virtual portfolio with paper trading
    • Real-time market simulation
    • Performance analytics and learning insights

  2. Certification Program:

    • Structured courses with certificates
    • Industry-recognized credentials
    • Career pathways in finance

  3. Enterprise Features:

    • Team learning and collaboration
    • Admin dashboards for educators
    • Custom content creation tools

  4. Advanced AI Capabilities:

    • Voice interaction for hands-free learning
    • Image analysis of charts and graphs
    • Predictive insights with explanations

  5. Global Expansion:

    • Multi-language support
    • Regional market data
    • Localized educational content

Technical Improvements

  1. Performance Optimization:

    • Caching strategies for frequently accessed data
    • Optimistic UI updates
    • Progressive Web App (PWA) capabilities

  2. Accessibility:

    • Screen reader optimization
    • Keyboard navigation improvements
    • High contrast mode

  3. Analytics & Insights:

    • Learning analytics dashboard
    • Progress visualization
    • Weak area identification

StockSense.AI represents our vision of making stock market education accessible, interactive, and effective through the power of AI. We're excited to continue building features that help students master financial markets and make informed investment decisions.

Built With

Share this project:

Updates