Web Design AI Header

Lesson 1: Stock Ticker Blueprint with API Integration

Build a stock ticker tracker that stores ticker symbols in a database and fetches live stock prices from an external API.

Live Example

See this feature in action:

View Live Stock Ticker Example

Lesson Objectives

  • Create a tickers blueprint with database integration
  • Build a database table to store ticker symbols, names, and prices
  • Implement forms to add new stock tickers (e.g., VTSAX, AAPL)
  • Integrate with a stock price API to fetch live market data
  • Create an 'Update Price' button that retrieves current stock prices
  • Display all tickers in a table with auto-incrementing IDs

Stock Ticker Blueprint with API Integration - Notes

Stock Ticker Feature Overview

The stock ticker blueprint allows users to:

  • Add new stock ticker symbols (e.g., VTSAX, AAPL, MSFT)
  • Store ticker symbol, name, and price in a local database
  • Update prices by clicking 'Update Price' to fetch live data
  • View all tracked tickers in a table with auto-incrementing IDs

Example: Add "VTSAX" (Total Stock Market) with $1 as initial price. Click "Update Price" and it will fetch the real current price from the stock API.

Database Schema

Create a tickers table with the following columns:

  • ticker_id: Integer, Primary Key, Auto-increment
  • symbol: Text (e.g., 'VTSAX', 'AAPL') - must match actual ticker symbols
  • name: Text (e.g., 'Total Stock Market') - descriptive name
  • price: Real/Float (current or initial price)

Important: The symbol field must be an exact match to real stock ticker symbols for the API to work correctly.

Blueprint Routes

Your tickers blueprint needs these routes:

@tickers_bp.route('/tickers')
def index():
    # Display all tickers from database

@tickers_bp.route('/tickers/add', methods=['POST'])
def add_ticker():
    # Add new ticker to database
    # Auto-increment ticker_id

@tickers_bp.route('/tickers/update/<int:ticker_id>')
def update_price(ticker_id):
    # Fetch live price from API
    # Update database with new price

Stock Price API Integration

Use the yfinance library for stock price data:

First, install the latest version:

pip install yfinance --upgrade

Example using yfinance library:

import yfinance as yf

def get_stock_price(symbol):
    ticker = yf.Ticker(symbol)
    data = ticker.info
    return data.get('currentPrice') or data.get('regularMarketPrice')

Important: Always use the latest version of yfinance as Yahoo's API changes frequently.

Alternative options if yfinance has issues:

  • Alpha Vantage (free tier, requires API key)
  • Finnhub (free tier available)

Add Ticker Form

Create an HTML form to add new tickers:

<form action="/tickers/add" method="POST">
    <input type="text" name="symbol" 
           placeholder="Symbol (e.g., VTSAX)" required>
    <input type="text" name="name" 
           placeholder="Name (e.g., Total Stock)">
    <input type="number" step="0.01" name="price" 
           placeholder="Initial Price" value="1">
    <button type="submit">Add Ticker</button>
</form>

Update Price Button

For each ticker in your table, add an 'Update Price' button:

<a href="/tickers/update/{{ ticker.ticker_id }}" 
   class="btn btn-primary">Update Price</a>

When clicked, this should:

  1. Get the ticker symbol from database
  2. Call the stock API to fetch current price
  3. Update the price field in the database
  4. Redirect back to /tickers to show updated price