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
Create a state variable to store the stock data.
Define a function to fetch stock data from a financial API.
Define a function to update the stock prices at predetermined intervals.
Define a function to highlight price changes with color indicators.
Define a function to handle user search input.
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.
Last updated