React Stock App

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.

Build Status

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

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>

Installing

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

Built With

• 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

References

• For chart styling: http://www.chartjs.org/docs/latest/charts/line.html