Financial Dashboard

Project Set Up

APIs to Retrieve Data

Note: Alpha Vantage API key offers up to 25 requests per day

• Alpha Vantage Stock Market API
• yfinance Python package

API Rate Limit Workaround

Set INSERT_MOCK_DATA=TRUE in the root .env to load data from previously run API calls.

Set Up .env in root

Refer to .env.sample in root.

  # Postgres
  POSTGRES_USER=YOUR_POSTGRES_USER
  POSTGRES_PASSWORD=YOUR_POSTGRES_PASSWORD
  POSTGRES_DB=YOUR_POSTGRES_DB
  POSTGRES_PORT=YOUR_POSTGRES_PORT

  # Backend
  ALPHA_VANTAGE_API_KEY=YOUR_ALPHA_VANTAGE_API_KEY
  DATABASE_URL=YOUR_DATABASE_URL
  BACKEND_PORT=YOUR_BACKEND_PORT

  # Frontend (Docker)
  VITE_BACKEND_URL=/api
  FRONTEND_PORT=YOUR_FRONTEND_PORT

  # Frontend (Local)
  # VITE_BACKEND_URL=http://localhost:8000
  # FRONTEND_PORT=YOUR_FRONTEND_PORT

  # Insert Mock Data (API Rate Limit Workaround)
  # Change to TRUE if there is an API rate limit 
  INSERT_MOCK_DATA=FALSE

Set Up .env in ./frontend

Refer to .env.sample.frontend in root. Vite loads .env files relative to the directory where vite.config.js is located.

  # Frontend (Docker)
  VITE_BACKEND_URL=/api
  FRONTEND_PORT=YOUR_FRONTEND_PORT

  # Frontend (Local)
  # VITE_BACKEND_URL=http://localhost:8000
  # FRONTEND_PORT=YOUR_FRONTEND_PORT

Run on Docker

docker-compose up
docker-compose down -v

Access frontend with localhost:3000.

Run Locally

Git Clone

  git clone https://github.com/ivyn-yak/financial-data.git

Run frontend

  cd frontend
  npm install
  npm run dev

Run backend

  cd backend
  python -m venv venv
  source venv/bin/activate
  pip install -r requirements.txt

  python run_pipeline.py
  uvicorn main:app --reload

Access frontend with localhost:5173.

Data Retrieved

Market Data (from yfinance)

• Quote
• Historical Stock Price (3 months)

Financial Data (from Alpha Vantage)

• Balance Sheet
• Income Statement
• Cash Flow Statement

Alternative Data (from Alpha Vantage)

• News (with ticker sentiments)

Company-Related Data (from Alpha Vantage)

• Earnings Calls Transcript (with segment sentiments)

Features

Data Pipeline

A data pipeline is executed automatically - retrieve, process, and store data into the PostgreSQL database:

1. Fetch raw data from Alpha Vantage APIs (financials, news, transcripts).
2. Preprocess the data (cleaning and normalisation).
3. Load the processed data into the database with proper schemas.
4. Serve the data through FastAPI endpoints for the frontend to consume.

Web Application

In addition to historical data, realtime data is fetched via yfinance and visualized across various web pages.

Home Page

Historical Price over a period of 3 months. Candlestick chart using chartjs-chart-financial.

Key Statistics

Performance Page

Stock price with S&P 500 as a performance benchmark. Line graph using chartjs.

Financials Page

Balance Sheet, Income Statement and Cash Flow (Quarterly and Annual Data)

News Page

Relevant news with ticker sentiments. News and sentiments from Alpha Vantage.

Events/Transcript Page

Earnings call transcripts with metrics sidebar. Transcript and segment sentiments from Alpha Vantage.