This application currently allows user to enter stock symbols and display a chart depicting the closing price of multiple stocks for the past 100 days from worldwide markets.
Demo Link: https://stock-app-2018-jumpstart2.netlify.com
This project was bootstrapped with Create React App.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You will need to acquire a free API key from Alpha Vantage and replacing the API key in the following URL. You can view the JSON output by opening the URL in a browser.
https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=<YOUR_API_KEY>
Run the following in terminal to install project dependencies.
npm install
Set up REACT_APP_BACKEND in .env or modify the fetch location in source file: closingPriceAPI.js.
const response = await fetch(
`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${stockSymbols[i]}&apikey=<YOUR_API_KEY>
);
stocksSymbolsRequestQueue.push(stockSymbols[i]);
stocksInfo.push(await response.json());
Start the local server and browse to the page.
npm start
- React - The web framework used
- React-Bootstrap - The UI framework used
- react-chartjs-2 - The React wrapper for Chart.js
- Alpha Vantage - Free APIs for realtime and historical stock data
- For chart styling: http://www.chartjs.org/docs/latest/charts/line.html