Introduction
Creating a stock trading web application using React.js allows us to leverage the power of a modern front-end framework to build a more dynamic and interactive application. We’ll use React components, hooks, and state management to manage user interactions and data flow.
Project Overview
Features:
- A search bar to find stock information by ticker symbol.
- Display stock details like company name, current price, daily high, and low.
- Buttons to simulate buying and selling shares.
- Displaying portfolio details.
Tools and Technologies Used
- React.js: For building the user interface.
- Axios: For making HTTP requests to fetch stock data.
- CSS: For styling the page.
- Alpha Vantage API: To fetch real-time stock data (you need an API key).
Step 1: Setting Up the React Project
First, ensure you have Node.js and npm installed. Then, create a new React project using create-react-app.
npx create-react-app stock-trading-app
cd stock-trading-app
Step 2: Installing Axios
We’ll use Axios to make HTTP requests to the Alpha Vantage API. Install Axios by running:
npm install axios
Step 3: Setting Up the Project Structure
Inside the src folder, create the following files:
components/StockSearch.js– Component for searching stocks.components/StockInfo.js– Component for displaying stock details.components/Portfolio.js– Component for displaying the portfolio.App.js– Main component that ties everything together.App.css– CSS file for styling.
Step 4: Building the Components
4.1. Creating the StockSearch Component
This component will contain the input field to enter a stock symbol and a button to search for the stock.
Create a file named StockSearch.js inside the components folder:
// src/components/StockSearch.js
import React from 'react';
const StockSearch = ({ onSearch }) => {
const [symbol, setSymbol] = React.useState('');
const handleSearch = () => {
if (symbol.trim() !== '') {
onSearch(symbol.trim().toUpperCase());
}
};
return (
<div className="stock-search">
<input
type="text"
value={symbol}
onChange={(e) => setSymbol(e.target.value)}
placeholder="Enter stock symbol (e.g., AAPL)"
/>
<button onClick={handleSearch}>Search</button>
</div>
);
};
export default StockSearch;
4.2. Creating the StockInfo Component
This component will display the fetched stock information.
Create a file named StockInfo.js inside the components folder:
// src/components/StockInfo.js
import React from 'react';
const StockInfo = ({ stock }) => {
return (
<div className="stock-info">
{stock ? (
<>
<h2>{stock.symbol}</h2>
<p>Price: ${stock.price}</p>
<p>High: ${stock.high}</p>
<p>Low: ${stock.low}</p>
</>
) : (
<p>No stock selected.</p>
)}
</div>
);
};
export default StockInfo;
4.3. Creating the Portfolio Component
This component will display the user’s portfolio.
Create a file named Portfolio.js inside the components folder:
// src/components/Portfolio.js
import React from 'react';
const Portfolio = ({ portfolio }) => {
return (
<div className="portfolio">
<h2>Portfolio</h2>
{Object.keys(portfolio).length > 0 ? (
<ul>
{Object.entries(portfolio).map(([symbol, data]) => (
<li key={symbol}>
{symbol}: {data.shares} shares at ${data.price.toFixed(2)} each
</li>
))}
</ul>
) : (
<p>No stocks bought yet.</p>
)}
</div>
);
};
export default Portfolio;
Step 5: Building the Main ‘App’ Component
The App component will use the StockSearch, StockInfo, and Portfolio components. It will manage the state and handle logic for fetching data and updating the portfolio.
Update App.js to the following:
// src/App.js
import React, { useState } from 'react';
import axios from 'axios';
import StockSearch from './components/StockSearch';
import StockInfo from './components/StockInfo';
import Portfolio from './components/Portfolio';
import './App.css';
const App = () => {
const [stock, setStock] = useState(null);
const [portfolio, setPortfolio] = useState({});
// Function to fetch stock data
const fetchStockData = async (symbol) => {
const apiKey = 'your_api_key_here'; // Replace with your API key
const apiUrl = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`;
try {
const response = await axios.get(apiUrl);
const data = response.data['Global Quote'];
if (data) {
setStock({
symbol: data['01. symbol'],
price: parseFloat(data['05. price']),
high: parseFloat(data['03. high']),
low: parseFloat(data['04. low'])
});
} else {
setStock(null);
alert('Stock data not found.');
}
} catch (error) {
console.error('Error fetching stock data:', error);
setStock(null);
alert('Failed to fetch stock data. Please try again.');
}
};
// Function to buy stock
const buyStock = () => {
if (stock && stock.symbol) {
setPortfolio((prevPortfolio) => {
const newPortfolio = { ...prevPortfolio };
if (newPortfolio[stock.symbol]) {
newPortfolio[stock.symbol].shares += 1;
} else {
newPortfolio[stock.symbol] = {
shares: 1,
price: stock.price
};
}
return newPortfolio;
});
}
};
// Function to sell stock
const sellStock = () => {
if (stock && stock.symbol && portfolio[stock.symbol]) {
setPortfolio((prevPortfolio) => {
const newPortfolio = { ...prevPortfolio };
if (newPortfolio[stock.symbol].shares > 1) {
newPortfolio[stock.symbol].shares -= 1;
} else {
delete newPortfolio[stock.symbol];
}
return newPortfolio;
});
}
};
return (
<div className="App">
<header>
<h1>Stock Trading App</h1>
</header>
<StockSearch onSearch={fetchStockData} />
<StockInfo stock={stock} />
<div className="actions">
<button onClick={buyStock} disabled={!stock}>Buy</button>
<button onClick={sellStock} disabled={!stock}>Sell</button>
</div>
<Portfolio portfolio={portfolio} />
</div>
);
};
export default App;
Step 6: Styling the Application
Add some CSS to make the app look clean and user-friendly. Update the App.css file:
/* src/App.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.App {
text-align: center;
padding: 20px;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
.stock-search {
margin: 20px 0;
}
.stock-search input {
padding: 10px;
width: 250px;
margin-right: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.stock-search button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.stock-search button:hover {
background-color: #0056b3;
}
.stock-info, .portfolio {
background-color: white;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}
.actions {
margin: 20px 0;
}
.actions button {
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.actions button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.actions button:not(:disabled) {
background-color: #28a745;
color: white;
}
.actions button:not(:disabled):hover {
background-color: #218838;
}
Step 7: Running the Application
Replace
"your_api_key_here"with your actual Alpha Vantage API key inApp.js.Start the React development server:
npm start
- Open your browser and navigate to
http://localhost:3000to see your stock trading app in action.
