📈 StockPulse

A sleek, real-time stock dashboard for tracking market movers, comparing opportunities, and managing your watchlist.

Features • Demo • Tech Stack • Getting Started • API Setup • License

---

✨ Features

Feature	Description
📊 Real-Time Quotes	Live stock prices with day change, high/low, and volume data
🏷️ Sector Filtering	Browse stocks by Technology, Finance, Motor, Space, and Energy sectors
⭐ Persistent Watchlist	Save your favorite stocks locally — they persist across sessions
🔥 Volatility Alerts	Stocks with ≥5% daily swings are highlighted automatically
📉 Intraday Charts	Click any stock card to view a beautiful Chart.js price chart
⚖️ Side-by-Side Compare	Select two stocks and compare key metrics in a modal
🌙 Dark / Light Mode	Toggle between themes with one click — preference saved locally
⚡ Smart Caching	API responses cached for 5 minutes to reduce redundant calls
📱 Fully Responsive	Looks great on desktop, tablet, and mobile devices

---

🎬 Demo

Demo Mode Included!
The app ships with built-in demo data so you can explore all features without an API key.

Live Preview

Simply open src/index.html in your browser — no build step required.

Screenshots

📸 Click to expand

Light Mode

┌─────────────────────────────────────────────────────────┐
│  StockPulse – Real-Time Stock Insights                  │
│  ─────────────────────────────────────────────────────  │
│  [Search: AAPL, TSLA...]  [🔍 Search]  [🌙]             │
│  [All] [Technology] [Finance] [Motor] [Space] [Energy]  │
│                                                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐                 │
│  │ AAPL 📈 │  │ TSLA 📉 │  │ MSFT 📈 │                 │
│  │ $225.10 │  │ $248.42 │  │ $378.85 │                 │
│  │ +2.34   │  │ -5.23   │  │ +3.21   │                 │
│  └─────────┘  └─────────┘  └─────────┘                 │
└─────────────────────────────────────────────────────────┘

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic structure with accessibility attributes
CSS3	CSS Variables, Grid, Flexbox, keyframe animations
Vanilla JavaScript	No frameworks — pure ES6+ with async/await
Chart.js	Beautiful, responsive intraday price charts
localStorage	Persist watchlist and theme preference
StockData.org API	Real-time market data (free tier available)

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Safari)
• (Optional) A free API key from StockData.org

Installation

1. Clone the repository

   git clone https://github.com/Prakash-Oli/StockPulse.git
   cd StockPulse

2. Open in browser

   # On Windows
   start src/index.html
   
   # On macOS
   open src/index.html
   
   # On Linux
   xdg-open src/index.html

3. Explore!
   The app runs in demo mode by default with sample stock data.

---

🔑 API Configuration

To fetch live market data, obtain a free API key:

1. Sign up at stockdata.org
2. Copy your API token
3. Open src/script.js and replace:

   const API_KEY = 'demo-key-here';

   with:

   const API_KEY = 'your-actual-api-key';

⚠️ Note: The free tier allows 100 requests/day. Caching is enabled to minimize API calls.

---

📁 Project Structure

StockPulse/
├── src/            # Core source files (HTML, CSS, JS)
│   ├── index.html  # Main HTML structure
│   ├── style.css   # All styling (light/dark themes, animations)
│   └── script.js   # Application logic, API calls, DOM manipulation
├── .gitignore      # Git config exclusions
└── README.md       # You are here!

---

🎨 Customization

Add New Stock Categories

Edit the stockGroup object in src/script.js:

const stockGroup = {
    popular: 'AAPL,TSLA,MSFT,GOOGL,AMZN',
    Technology: 'AAPL,MSFT,GOOGL,TSLA',
    Finance: 'JPM,GS,V,MA,BAC',
    // Add your own:
    Healthcare: 'JNJ,PFE,UNH,ABBV,MRK'
};

Modify Color Scheme

Update CSS variables in src/style.css:

:root {
    --accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Change to your brand colors */
}

---

📄 License

This project is open source and available under the MIT License.

---

_{Built with ❤️ by Prakash Oli}