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 look

Perfect 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 Setup

bash

CopyEdit

npm create vite@latest stock-tracker --template react cd stock-tracker npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Tailwind Setup (tailwind.config.js):

js

CopyEdit

content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],

Tailwind in index.css:

css

CopyEdit

@tailwind base; @tailwind components; @tailwind utilities;

🔗 API Setup with Alpha Vantage

Sign up at AlphaVantage.co and grab your API key.

Example fetch call:

js

CopyEdit

const 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 Data

Example JSX:

jsx

CopyEdit

🎨 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 cap

Source 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 (

);
}

// 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 (

);
}

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe