27 - Real-Time Stock Ticker with Updates

Description

Create a React application that provides a real-time stock ticker with updates. The ticker should show the ticker symbol, company name, and current market price, update the price automatically at predetermined intervals (e.g., every 5 seconds), highlight price changes with color indicators, and allow users to search for specific stocks by symbol or company name.

Algorithm

1. Create a state variable to store the stock data.

2. Define a function to fetch stock data from a financial API.

3. Define a function to update the stock prices at predetermined intervals.

4. Define a function to highlight price changes with color indicators.

5. Define a function to handle user search input.

6. Render the stock ticker interface.

Classes

• StockTicker: A component that represents the stock ticker interface.

• StockDataFetcher: A component that represents the stock data fetching functionality.

• PriceUpdater: A component that represents the price updating functionality.

• SearchBar: A component that represents the search bar functionality.

Code

StockTicker.js

import React, { useState, useEffect } from 'react';
import StockDataFetcher from './StockDataFetcher';
import PriceUpdater from './PriceUpdater';
import SearchBar from './SearchBar';

function StockTicker() {
  const [stockData, setStockData] = useState({});
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const fetchStockData = async () => {
      const stockData = await StockDataFetcher.fetchStockData();
      setStockData(stockData);
    };
    fetchStockData();
  }, []);

  useEffect(() => {
    const updatePrices = async () => {
      const updatedStockData = await PriceUpdater.updatePrices(stockData);
      setStockData(updatedStockData);
    };
    const intervalId = setInterval(updatePrices, 5000);
    return () => clearInterval(intervalId);
  }, [stockData]);

  const handleSearchInput = (searchQuery) => {
    setSearchQuery(searchQuery);
  };

  const filteredStocks = stockData.filter((stock) => {
    const tickerSymbol = stock.tickerSymbol.toLowerCase();
    const companyName = stock.companyName.toLowerCase();
    const searchQueryLower = searchQuery.toLowerCase();
    return tickerSymbol.includes(searchQueryLower) || companyName.includes(searchQueryLower);
  });

  return (
    <div>
      <h2>Stock Ticker</h2>
      <SearchBar onSearchInput={handleSearchInput} />
      <ul>
        {filteredStocks.map((stock) => (
          <li key={stock.tickerSymbol}>
            <span>
              {stock.tickerSymbol} ({stock.companyName})
            </span>
            <span>
              {stock.currentPrice} ({stock.priceChange > 0 ? '▲' : '▼'})
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default StockTicker;

StockDataFetcher.js

import React from 'react';
import axios from 'axios';

function StockDataFetcher() {
  const fetchStockData = async () => {
    const apiURL = `<stock-url>`;
    const response = await axios.get(apiURL);
    const stockData = response.data;
    return stockData;
  };

  return <div />;
}

export default StockDataFetcher;

PriceUpdater.js

import React from 'react';
import axios from 'axios';

function PriceUpdater() {
  const updatePrices = async (stockData) => {
    const updatedStockData = [];
    for (const stock of stockData) {
      const apiURL = `(link unavailable);
      const response = await axios.get(apiURL);
      const currentPrice = response.data.currentPrice;
      const priceChange = currentPrice - stock.currentPrice;
      updatedStockData.push({ ...stock, currentPrice, priceChange });
    }
    return updatedStockData;
  };

  return <div />;
}

export default PriceUpdater;

SearchBar.js

import React from 'react';

function SearchBar({ onSearchInput }) {
  const handleSearchInput = (event) => {
    const searchQuery = event.target.value;
    onSearchInput(searchQuery);
  };

  return (
    <input
      type="search"
      placeholder="Search for a stock"
      onChange={handleSearchInput}
    />
  );
}

export default SearchBar;

Explanation

The StockTicker component renders the stock ticker interface. The StockDataFetcher component fetches stock data from a financial API. The PriceUpdater component updates the stock prices at predetermined intervals. The SearchBar component handles user search input.

Possible Future Enhancements

• Add more features to the stock ticker, such as charts and news.

• Improve the user interface and user experience.