This project provides a comprehensive trading view dashboard, allowing users to search for and view detailed information about stocks, cryptocurrencies, and other financial instruments.
- Search Functionality: Allows users to search for financial instruments using ticker symbols.
- Detailed Views: Displays comprehensive information about the selected instrument, including CEO, headquarters, industry, description, and more.
- Error Handling: Gracefully handles errors and provides user-friendly error messages.
git clone https://github.com/yourusername/trading-view.git
cd trading-view
npm install
npm start
- Open the application in your browser.
- Use the search bar to enter the ticker symbol of the financial instrument you're interested in.
- View detailed information about the instrument.
To keep API keys secure, we use environment variables:
const API_KEY = process.env.REACT_APP_API_KEY;
This ensures that the API key is not exposed in the code and can be securely managed.
To present large numbers in a user-friendly format:
function formatMarketCap(value) {
if (value >= 1e12) return `$${(value / 1e12).toFixed(2)}T`;
if (value >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
if (value >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
if (value >= 1e3) return `$${(value / 1e3).toFixed(2)}K`;
return `$${value}`;
}
To handle errors gracefully:
try {
// API call or other operations
} catch (error) {
console.error("An error occurred:", error.message);
}
To ensure descriptions are concise and user-friendly:
function truncateDescription(desc) {
const words = desc.split(' ');
if (words.length > 70) {
return words.slice(0, 70).join(' ') + '...';
}
return desc;
}
To search for a financial instrument using its ticker symbol:
function searchTicker(symbol) {
fetch(`https://api.example.com/search?symbol=${symbol}&apikey=${API_KEY}`)
.then(response => response.json())
.then(data => {
// Handle the data
})
.catch(error => {
console.error("Error fetching data:", error);
});
}
Our project relies on the Financial Modeling Prep API to fetch financial data. This API provides a wealth of information about stocks, cryptocurrencies, and other financial instruments.
To fetch data for a specific stock, we make a GET request to the API's quote
endpoint:
const symbol = "AAPL"; // Example for Apple Inc.
fetch(`https://api.financialmodelingprep.com/api/v3/quote/${symbol}?apikey=${API_KEY}`)
.then(response => response.json())
.then(data => {
// Handle the data
})
.catch(error => {
console.error("Error fetching stock data:", error);
});
Here's an example of the JSON response when querying for Apple Inc.:
[
{
"symbol": "AAPL",
"name": "Apple Inc.",
"price": 150.12,
"changesPercentage": 0.58,
"change": 0.87,
"marketCap": 2485170000000,
"exchange": "NASDAQ",
"industry": "Computer Hardware",
"description": "Apple Inc. designs, manufactures, and markets smartphones, personal computers, tablets, wearables, and accessories worldwide. It also sells various related services.",
"ceo": "Tim Cook",
...
}
]
This response provides a wealth of information about the stock, including its current price, market capitalization, and a brief description.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.