📈 Stock Graph Demo

A simple React application that visualizes stock price data using the Alpha Vantage public API.
Originally built for testing data visualization concepts with recharts, now fully migrated from the closed FXEmpire endpoint to a free public data source.

---

🚀 Features

• 📊 Interactive stock price chart built with Recharts
• 🔄 Automatic data refresh (every 1 minute)
• ⏱️ Switch between timeframes — 1 day, 1 week, 1 month
• ⚙️ Clean architecture: Header, TabComponent, OverviewChart
• 🌐 Public Alpha Vantage API (IBM demo symbol)
• 💅 Styled Components for UI layout and design

---

🧩 Tech Stack

Category	Technologies
Framework	React 18 (CRA)
Styling	styled-components
Charts	recharts
Data Fetching	axios
Date Utils	date-fns
API	Alpha Vantage (demo key)

---

⚙️ Setup & Run

Clone and install dependencies:

git clone https://github.com/leonichevAndrei/stock-graph-demo.git
cd stock-graph-demo
npm install

Then create a .env file in the project root:

REACT_APP_ALPHA_VANTAGE_KEY=demo
REACT_APP_SYMBOL=IBM

Start the development server:

npm start

Open http://localhost:3000 in your browser.

---

📦 Project Structure

src/
├── components/
│   ├── Header.js
│   ├── TabComponent.js
│   └── OverviewChart.js
├── styles/
│   ├── GlobalStyle.js
│   ├── HeaderStyles.js
│   ├── TabComponentStyles.js
│   └── OverviewChartStyles.js
├── utills/
│   └── common.utills.js
└── App.js

---

🧠 Notes

• Uses demo key from Alpha Vantage (IBM) — no private key required.
  For custom tickers, register your own free API key at alphavantage.co.
• Data updates automatically every 1 minute.
• The layout is responsive and adaptive for small screens.

---

🧹 Possible Improvements

• 📅 Add historical data table under the second tab
• 💾 Cache data with localStorage to reduce API calls
• 🌙 Add dark/light theme toggle
• ⚡ Optimize chart rendering for large datasets

---

🏷️ License

MIT License © 2025 Andrei Leonichev