This simple app illustrates how to retrieve stock data (JSON format) from a backend server, and then show the graph and statistics data at frontend site.
- Flask is used as the backend framework.
- yfinance is used for downloading daily stock prices.
- Currently, only 3 stocks are supported: GOOG, AAPL, MSFT. However, it's easy to add more stocks by appending stock codes to stock_names in app.py.
- Backend has a dedicated thread for downloading stock data (current interval: 4 hours).
- For simplicity, database is NOT used. Each time you restart the server, it will download the stock data again and store them in the memory.
- /: only for test purpose, return a message "Hello World! :)".
- /stock/<start_date>: start_date has the format YYYY-MM-DD.
It returns a list of stock objects with fields: name (string), dates (list of string), prices (list of float), cumulative_return (float), annualized_return (float), annualized_volatility (float)
- cumulative_return = end_price / start_price - 1.0
- annualized_return = (end_price / start_price) ^ (1 / years_from_start_date) - 1.0
- annualized_volatility = standard_deviation(price_1/price_0 - 1.0, price_2/price_1 - 1.0, price_3/price_2 - 1.0, ...) * sqrt(250)
- Install dependencies (better to run in a new virtual env)
cd backend
pip install -r requirements.txt- Try
python app.py
curl http://localhost:11280/stock/2023-05-01- Vue is used as the frontend framework.
- Each time user select a new start date and click "Reload", it will talk with the backend to get latest data. (Yes, as you noticed, we can improve the performance by client cache).
- canvasJS is used for drawing the graph.
- Install dependencies
cd frontend
npm install- Try (make sure the backend server is running)
npm run dev -- --host 0.0.0.0Now use your browser to access http://localhost:12801/