Your intelligent stock analysis platform

A modern, responsive web application built with React and TypeScript that provides comprehensive stock market analysis, portfolio management, and financial insights powered by real-time market data.

Try it out here!

Link to the backend repo

• Stock quotes and market data
• Company profiles and financial metrics
• Market news and analysis
• AI generated analysis of risks and competitive advantages

• Track stock holdings and cash positions
• Portfolio valuation
• Drag-and-drop portfolio reordering
• Performance tracking
• Interactive pie chart visualization

• Monitor favorite stocks
• Customizable watchlist ordering
• Quick access to stock details

• Calculate potential returns and target prices
• Scenario analysis tools
• Supports 2 methods: EPS and FCF

• Intelligent stock symbol search
• Company lookup and discovery

• Google OAuth integration
• Guest access mode
• Secure session management
• Protected routes

• Node.js 18+
• npm or yarn
• Backend API server (configured separately)

1. Clone the repository

   git clone https://github.com/SimonMilord/stonkers.ai.git
   cd stonkers.ai

2. Install dependencies

   npm install

3. Environment Setup Create a .env file in the root directory:

   VITE_BACKEND_URL=your_backend_api_url

4. Start the development server

   npm start

5. Open your browser Navigate to http://localhost:3000

• React 19 - Modern UI library with hooks and context
• TypeScript - Type-safe JavaScript development
• Vite - Fast build tool and development server

• Mantine 7.16 - Modern React components library
• Chart.js - Interactive charts and data visualization
• React Icons - Comprehensive icon library
• CSS Custom Properties - Theming and responsive design

• React Context - Authentication and stock data management
• Custom Hooks - Reusable business logic
• Local State - Component-level state management

• React Router 5 - Client-side routing
• Protected Routes - Authentication-based access control

• ESLint - Code quality and consistency
• Prettier - Code formatting
• PostCSS - CSS processing and optimization

src/
├── components/           # Reusable UI components
│   ├── addHoldingForm/   # Portfolio stock/cash addition
│   ├── calculatorFormCard/  # Investment calculator
│   ├── companyProfileCard/  # Company information display
│   ├── portfolioTable/   # Portfolio holdings table
│   ├── searchBox/        # Stock symbol search
│   └── ...
├── contexts/            # React Context providers
│   ├── authContext.tsx  # Authentication state
│   └── stockContext.tsx # Stock data management
├── hooks/               # Custom React hooks
│   ├── usePortfolioHoldings.ts  # Portfolio state management
│   ├── useStockData.ts  # Market data fetching
│   └── ...
├── pages/               # Main application pages
│   ├── homePage.tsx     # Market overview
│   ├── portfolioPage.tsx # Portfolio management
│   ├── watchlistPage.tsx # Stock watchlist
│   ├── calculatorPage.tsx # Investment calculator
│   └── ...
├── types/               # TypeScript type definitions
├── utils/               # Utility functions and API calls
└── styles/              # Global styles and themes

• Real-time tracking of stock holdings and cash positions
• Drag-and-drop reordering with persistent backend sync
• Performance metrics including total value, gains/losses
• Interactive visualizations with pie charts

• Finnhub API integration for real-time market data
• Bulk quote fetching for optimal performance
• Error handling and fallbacks for reliable data access
• Caching strategies for improved user experience

• Responsive design for mobile and desktop
• Loading states and error handling for smooth interactions
• Toast notifications for user feedback
• Dark theme support with CSS custom properties

The next major release will bring powerful new features and enhancements:

• WebSocket integration for automatic quote refresh
• Real-time portfolio value updates

• Query suggestions for improved stock discovery
• Enhanced company lookup capabilities

• Earnings summary page with comprehensive analysis
• Insider transactions tracking for better investment insights
• AI-powered comprehensive stock reports with deep analysis
• Enhanced earnings surprise analysis

• Multi-currency support for international portfolios
• Transaction history tracking for detailed performance analysis
• Advanced performance metrics and benchmarking
• Enhanced portfolio analytics dashboard

• Additional chart types and timeframes
• Advanced portfolio visualization tools
• Performance comparison charts

• Extended investment parameters for more accurate projections
• Additional valuation methods and models
• Scenario analysis with multiple variables

• Multiple watchlist support for better organization
• Notes and annotations for each stock
• Custom alerts and notifications

Stay tuned for these exciting updates coming in 2026!

The project is configured for Vercel deployment with:

• Automatic builds from develop branch
• SPA routing configuration
• Environment variable support

The application integrates with a backend API for:

• Authentication - Google OAuth and guest access
• Portfolio data - CRUD operations for holdings
• Watchlist management - Stock tracking and organization
• Market data - Real-time quotes and company information
• AI inference - Groq inference API to generate content

• Code splitting with React lazy loading
• Memoized calculations for expensive operations
• Bulk API requests to minimize network calls
• Progressive loading for improved perceived performance

This project is licensed under the MIT License - see the LICENSE file for details.

• Finnhub.io - Financial data API
• Mantine - React components library
• Chart.js - Data visualization
• React - UI framework
• Groq - AI Inference API