 |
Weekly Code QuickiesBecome a full stack web developer by learn HTML, CSS, JavaScript, TypeScript, React JS, Next.js , Tailwind CSS, Bootstrap, Git &GitHub, and more... Join me now in this awesome adventure! Author: Norbert B.M.
Weekly Code Quickies is a podcast designed for programmers and developers of all skill levels. Each episode is a bite-sized, quick-hit of valuable information and tips on a specific programming languages, back to front-end frameworks, best tools, emerging technologies, and best practices for working remotely. The podcast is perfect for those who are short on time but still want to stay up-to-date with the latest developments in the industry, including the latest tech news, new technologies, and gaming industry updates. norbertbmwebdev.substack.com Language: en Contact email: Get it Feed URL: Get it iTunes ID: Get it |
Listen Now...
Build a Live Stock Price Tracker with React, Tailwind CSS & Alpha Vantage API
Friday, 25 July, 2025
Looking to build your own real-time stock market tracker app? In this hands-on tutorial, we’ll use React, Tailwind CSS, and the Alpha Vantage API to create a sleek and functional live stock price tracker.Whether you’re a frontend dev or a beginner trying to get into finance tech, this is a project-based learning opportunity that teaches practical skills while building something useful.In this project, you'll learn how to:- Fetch live stock prices from an API using React hooks- Manage dynamic lists and user input- Display loading states and error handling- Style your app with Tailwind CSS for a professional lookPerfect for beginners and intermediate developers looking to boost their React skills!🛠️ What We'll Build* 🔍 A stock search bar with live suggestions* 💰 A dashboard showing real-time prices* 📉 Dynamic price color change (green/red)* 📱 Clean Tailwind-powered responsive UI* 🌐 API integration with Alpha Vantage (free key!)🚀 Technologies Used* React + Vite* Tailwind CSS* Alpha Vantage API (Get your key)* React hooks: useState, useEffect, fetch🧱 Project SetupbashCopyEditnpm create vite@latest stock-tracker --template react cd stock-tracker npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -pTailwind Setup (tailwind.config.js):jsCopyEditcontent: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],Tailwind in index.css:cssCopyEdit@tailwind base; @tailwind components; @tailwind utilities;🔗 API Setup with Alpha VantageSign up at AlphaVantage.co and grab your API key.Example fetch call:jsCopyEditconst fetchStockPrice = async (symbol) => { const res = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_KEY`); const data = await res.json(); return data['Global Quote']; };📊 Displaying Stock DataExample JSX:jsxCopyEdit {stockName} 0 ? 'text-green-500' : 'text-red-500'}`}> ${stockPrice} ({priceChange}%) 🎨 UI Tips with Tailwind CSS* Use grid-cols-2 or flex justify-between for layouts* Add a search input with a dropdown using absolute, bg-white, z-10* Animate loading state with animate-pulse📱 Optional Enhancements* Save recent stock symbols to localStorage* Add a chart using Chart.js or Recharts* Show currency, volume, or market capSource Code:import React, { useState, useEffect } from "react"; // StockPrice component fetches and displays the price for a given ticker function StockPrice({ ticker = "" }) { const [price, setPrice] = useState(null); // Holds the fetched price const [loading, setLoading] = useState(true); // Loading state const [error, setError] = useState(null); // Error state useEffect(() => { // Fetch stock price from Alpha Vantage API const fetchStockPrice = async () => { try { setLoading(true); const apiKey = import.meta.env.VITE_ALPHAVANTAGE_API_KEY; // Uncomment and set your API key const response = await fetch( `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${ticker}&apikey=${apiKey}` ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); // Check if the API returned a valid price if (data["Global Quote"] && data["Global Quote"]["05. price"]) { setPrice(parseFloat(data["Global Quote"]["05. price"]).toFixed(2)); setError(null); } else { setError("Could not retrieve price for this ticker."); setPrice(null); } } catch (e) { setError(`Error fetching data: ${e.message}`); setPrice(null); } finally { setLoading(false); } }; fetchStockPrice(); // Call the fetch function when ticker changes }, [ticker]); return ( {/* Display the ticker symbol */} {ticker} {/* Show loading spinner while fetching */} {loading && ( Loading price... )} {/* Show error message if there is an error */} {error && {error}} {/* Show the price if loaded successfully */} {!loading && !error && price !== null && ( ${price} )} {/* Show message if no data is available */} {!loading && !error && price === null && ( No data available. )} ); } // Main StockPriceTracker component manages the list of tickers and input export default function StockPriceTracker() { const [tickers, setTickers] = useState(["NVDA", "MSFT", "GOOGL"]); // Initial tickers const [input, setInput] = useState(""); // Input for new ticker // Add a new ticker to the list const addTicker = () => { const val = input.trim().toUpperCase(); if (val && !tickers.includes(val)) { setTickers([...tickers, val]); setInput(""); } }; return ( {/* App title */} My Stock Tracker {/* Input and Add button for new tickers */} setInput(e.target.value)} placeholder="Add ticker (e.g. AAPL)" /> Add {/* Display StockPrice components for each ticker */} {tickers.map((ticker) => ( ))} ); } Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
