TILL NOW WE USED DUMMY DATA FROM DATA.JS AS THE STOCK INFORMATION.
NOW,WE WILL USE AN API THAT GIVES THE STOCK INFORMATION. WE WILL USE ALPHAVANTAGE FOR THE REQUIRED INFORMATION.
SIGNUP IN ALPHAVANTAGE, YOU WILL RECEIVE AN API KEY STORE IT IN .ENV FILE
.ENV
API_KEY= AKJOQXMHFNU7****
IN ALPHAVANTAGE WE USE THE URL TO FETCH DATA , IN THE URL THERE ARE SOME FIXED PARAMETERS THAT SHOLUD BE INCLUDED IN THE URL. (READ API DOCUMENTATION OF ALPHA VANTAGE).
THEY ARE API KEY, FUNCTION AND SYMBOL.
const rawSymbol = req.params.symbol.toUpperCase();
const fetchStockData = async (symbolVariant) => {
const { data } = await axios.get("https://www.alphavantage.co/query", {
params: {
function: "TIME_SERIES_DAILY",
symbol: symbolVariant,
outputsize: "compact",
apikey: key,
},
});
FOR INDIAN STOCKS , WE SEND .BSE WITH THE SYMBOL
https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=RELIANCE.BSE&outputsize=full&apikey=demo
THE RESPONSE FROM THE API IS IN JSON FORMAT AND THE VALUES ARE IN THE FORM OF STRINGS.
THE RESPONSE INCLUDES STOCK DATA ACCORDING TO DATES ( EVERY DAY) . WE TAKE THE LATEST i.e (dates[0]) AND dates[1] . TO GET DATES
const timeSeries = data["Time Series (Daily)"];
if (!timeSeries) return null;
const dates = Object.keys(timeSeries);
console.log(dates);
WE CALCULATE OUR REQUIRED PARAMETERS ACCORDINGLY. NAME , PRICE AND PERCENTAGE.
FOR PRICE , THE "4.close" VALUE IS ASSIGNED AS THE PRICE AS IT'S LATEST .
TO CALCULATE THE PERCENTAGE WE NEED THE LATEST AND PREVIOUS PRICES (dates[1])
const latest = timeSeries[dates[0]];
const prev = timeSeries[dates[1]];
const price = parseFloat(latest["4. close"]);
const prevPrice = parseFloat(prev["4. close"]);
const percentChange = (((price - prevPrice) / prevPrice) * 100).toFixed(2);
const isDown = price < prevPrice;
parseFloat() - IS USED TO CONVERT A STRING INTO A FLOATING POINT NUMBER
AS THE RESPONSE FROM THE API IS A STRING TO PERFORM NECESSARY CALCULATIONS WE NEED TO CONVERT THEM INTO NUMBERS.
NOW , FOR THE STOCKS WE FIRST CHECK IF IT'S AN INDIAN STOCK IF NOT THEN AS AN INTERNATIONAL STOCK.
let stockData = await fetchStockData(`${rawSymbol}.BSE`);
if (!stockData) {
stockData = await fetchStockData(rawSymbol);
}
if (!stockData) {
return res.status(404).json({ error: "Stock data not found" });
}
BACKEND ROUTE:
app.get("/api/stocks/daily/:symbol", async (req, res) => {
const rawSymbol = req.params.symbol.toUpperCase(); TO CONVERT INTO CAPITAL LETTERS
const fetchStockData = async (symbolVariant) => {
const { data } = await axios.get("https://www.alphavantage.co/query", {
params: {
function: "TIME_SERIES_DAILY",
symbol: symbolVariant,
outputsize: "compact",
apikey: key,
},
});
const timeSeries = data["Time Series (Daily)"];
if (!timeSeries) return null;
const dates = Object.keys(timeSeries); ARRAY OF DATES
console.log(dates);
const latest = timeSeries[dates[0]];
const prev = timeSeries[dates[1]];
const price = parseFloat(latest["4. close"]);
const prevPrice = parseFloat(prev["4. close"]);
const percentChange = (((price - prevPrice) / prevPrice) * 100).toFixed(2);
const isDown = price < prevPrice;
return {
name: rawSymbol,
price: price.toFixed(2),
percent: `${isDown ? "" : "+"}${percentChange}%`,
isDown,
};
};
try {
let stockData = await fetchStockData(`${rawSymbol}.BSE`);
if (!stockData) {
stockData = await fetchStockData(rawSymbol);
}
if (!stockData) {
return res.status(404).json({ error: "Stock data not found" });
}
res.json(stockData);
} catch (err) {
console.error("Error fetching stock:", err);
res.status(500).json({ error: "Internal server error" });
}
});
NOW THE DASHBOARD PART,
IN THE WATCHLIST WE GIVE CERTAIN STOCK NAMES INITIALLY
const watchSymbols = [
"INFY",
"ONGC",
"TCS",
"KPITTECH",
"QUICKHEAL",
"WIPRO",
"AAPL",
];
THE STOCK INFORMATION OF THESE STOCKS ARE FILLED IN THE WATCHLIST.
THE INFORMATION IS FETCHED FROM THE API (FROM THE BACKEND)
THE INFORMATION ABOUT THE STOCKS IS STORED IN AN ARRAY (responses) AND EACH OF IT'S VALUE IS MAPPED ACCORDINGLY.
WATCHLIST.JS
export default function Watchlist() {
const [stocks, setStocks] = useState([]);
const watchSymbols = [
"INFY",
"ONGC",
"TCS",
"KPITTECH",
"QUICKHEAL",
"WIPRO",
"AAPL",
];
useEffect(() => {
const fetchData = async () => {
try {
const responses = await Promise.all(
watchSymbols.map((symbol) =>
axios.get(`http://localhost:3002/api/stocks/daily/${symbol}`)
)
);
console.log(responses);
const stocksData = responses.map((res, index) => res.data);
console.log(stocksData);
setStocks(stocksData);
} catch (error) {
console.error("Error fetching stock data:", error);
}
};
fetchData();
}, []);
Comments
Post a Comment