A Bloomberg-Terminal-inspired dashboard that fuses Hinglish NLP sentiment analysis with LSTM-style stock predictions for 15 NSE-listed companies — built entirely on the client side.
🚀 No API keys. No backend. No setup headaches. Clone →
npm install→npm run dev→ explore a fully functional financial dashboard.
SentimentStock is a portfolio-grade React single-page application that demonstrates the full surface of a data-science-driven financial product. It simulates a real-time stock trading terminal enriched with multilingual sentiment intelligence — processing Hindi, English, and Hinglish (mixed) financial news and social media mentions.
| Traditional Dashboards | SentimentStock |
|---|---|
| English-only NLP | 🇮🇳 Hinglish-aware (Hindi + English mixed) sentiment scoring |
| Static charts | ⚡ Real-time ticks every 5 seconds with animated price flash |
| Basic buy/sell signals | 🧠 LSTM prediction with confidence scoring & feature importance |
| Simple sentiment labels | 📊 Lag correlation analysis (0h–48h) between sentiment ↔ price |
| Separate tools | 🖥️ Unified Bloomberg-style dark terminal UI |
Note: All data is mocked/simulated on the client — this is a portfolio demonstration, not a production trading tool.
- Custom gradient SVG logo (
purple → teal) - Real-time IST clock (updates every second via
Intl.DateTimeFormat) - NSE market status badge — OPEN (9:15 AM – 3:30 PM IST, Mon–Fri) or CLOSED
- Animated green LIVE pulse indicator
- Autocomplete search across all 15 NSE companies
- Sector-colored badges (IT → blue, Banking → teal, Energy → amber, etc.)
- Live price & daily change % displayed inline
- Click-outside-to-close dismissal
| Card | Description |
|---|---|
| Live Price | Current price with mini 7-point sparkline chart & green/red price flash animation |
| Sentiment Score | 0–100 sentiment gauge score with bullish/bearish label |
| LSTM Prediction | UP ↑ or DOWN ↓ directional prediction with confidence percentage |
| 24h Mentions | Total social + news mentions in last 24h with change indicator |
- Recharts
ComposedChartwith dual Y-axes - Purple line → Price trajectory (90 trading days)
- Teal area → Sentiment score overlay
- Time range toggle:
1W/1M/3M - Dark-themed custom tooltip
- Hand-crafted SVG semicircle with 3 colored zones:
- 🔴 Bearish (0–35) → Red zone
- 🟡 Neutral (35–65) → Amber zone
- 🟢 Bullish (65–100) → Green zone
- Animated needle with CSS
rotatetransition (0.8s ease-out) - Hindi vs. English mention count breakdown
- 25 pre-built news items (Economic Times, Moneycontrol, LiveMint, Reddit, StockTwits)
- Language filter chips: All / Hindi / English / Hinglish
- Expandable summaries with sentiment & language badges
- Custom styled scrollbar matching the dark theme
- Bar chart showing sentiment ↔ price correlation at 0h, 2h, 4h, 6h, 8h, 12h, 24h, and 48h lags
- Color-coded bars: purple (positive correlation) / red (negative)
- Insight callout identifying the optimal sentiment lead time
- Per-symbol seeded variation for realistic data
- Directional prediction: UP or DOWN with visual icon
- Confidence bar with percentage
- Feature importance breakdown:
- Sentiment Score weight
- Price Momentum weight
- Volume Dynamics weight
- Model accuracy vs. random baseline comparison
- Disclaimer badge
- All 15 NSE companies displayed as clickable cards
- Each card shows: mini sentiment bar, UP/DOWN prediction tag, live price
- Click any card → switches the entire dashboard to that stock
- CSS Grid reflows at
< 1100pxand< 900pxbreakpoints - All panels stack vertically on smaller viewports
| Category | Technology | Purpose |
| ⚛️ Framework | React 18.2 | Component architecture, state management |
| ⚡ Bundler | Vite 5.2 | Instant HMR, optimized builds |
| 🎨 Styling | Tailwind CSS 3.4 | Utility-first styling with custom dark theme |
| 📊 Charts | Recharts 2.10 | Price charts, lag correlation bars, sparklines |
| 🔣 Icons | Lucide React 0.363 | Consistent icon system |
| 🔤 Typography | Inter (Google Fonts) | Clean, modern UI typography |
| 🎯 Gauge | Pure SVG + CSS | Custom semicircular sentiment gauge with animated needle |
| 🚀 Deployment | Vercel | Zero-config static hosting |
- Node.js ≥ 18
- npm ≥ 9
# Clone the repository
git clone https://github.com/artist-hks/SentimentStock.git
cd SentimentStock
# Install dependencies
npm install
# Start development server
npm run devOpen the URL printed by Vite (typically http://localhost:5173).
# Build optimized bundle
npm run build
# Preview production build locally
npm run previewThe application follows a four-stage simulated ML pipeline, all running client-side:
┌─────────────────────────┐ ┌──────────────────────────┐ ┌────────────────────────┐ ┌───────────────────────┐
│ 📥 DATA INGESTION │ │ 🧠 SENTIMENT ENGINE │ │ 📉 LAG ANALYSIS │ │ 🎯 PREDICTION │
│ │ │ │ │ │ │ │
│ • 15 NSE stock prices │ ──▶ │ • Hinglish NLP scoring │ ──▶ │ • Sentiment ↔ price │ ──▶ │ • LSTM + sentiment │
│ • News (ET, MC, Mint) │ │ • Hindi / English / │ │ cross-correlation │ │ feature fusion │
│ • Social (Reddit, ST) │ │ Hinglish classifier │ │ • Lags: 0h → 48h │ │ • UP/DOWN + conf % │
│ • 5s tick simulation │ │ • Score: 0.00 → 1.00 │ │ • Optimal lag detect │ │ • Feature importance │
└─────────────────────────┘ └──────────────────────────┘ └────────────────────────┘ └───────────────────────┘
The useRealTimeData hook drives a 5-second tick loop that:
- Applies
±0.12%price perturbation to all 15 companies simultaneously - Shifts sentiment scores by
±0.015with clamping at[0.05, 0.95] - Recalculates change amounts against base prices
- Triggers green/red flash animations on the active stock's price card
The generateData.js module uses seeded pseudorandom walks (deterministic per-symbol via string hashing) to produce:
- 90 trading days of OHLC-style price data with mean-reversion toward base price
- Correlated sentiment series that trend toward the company's baseline sentiment
- Volume spikes with 10% probability for realistic trading patterns
- Lag correlation data with per-symbol variation
SentimentStock/
├── index.html # Entry HTML with inline SVG favicon
├── package.json # Dependencies & scripts
├── vite.config.js # Vite configuration
├── tailwind.config.js # Custom dark theme tokens
├── postcss.config.js # PostCSS + Tailwind pipeline
│
└── src/
├── main.jsx # React 18 createRoot entry
├── App.jsx # Root layout, state, responsive grid
├── index.css # Tailwind directives, animations, scrollbar
│
├── components/
│ ├── Header.jsx # Fixed header: logo, search, IST clock, NSE status
│ ├── CompanySearch.jsx # Autocomplete dropdown with sector badges
│ ├── MetricCards.jsx # 4-card row: price, sentiment, prediction, mentions
│ ├── PriceChart.jsx # Dual-axis composed chart (price + sentiment)
│ ├── SentimentGauge.jsx # SVG semicircle gauge with animated needle
│ ├── NewsPanel.jsx # Filterable news feed with language chips
│ ├── LagCorrelationChart.jsx # Sentiment-price lag correlation bar chart
│ ├── PredictionPanel.jsx # LSTM prediction, confidence, feature importance
│ └── MarketOverview.jsx # 15-company clickable grid with mini indicators
│
├── data/
│ ├── companies.js # 15 NSE companies with base metrics
│ ├── mockNews.js # 25 multilingual news items
│ └── generateData.js # Seeded random walk generators
│
├── hooks/
│ └── useRealTimeData.js # 5s tick engine, flash detection, state management
│
└── utils/
└── sentimentCalc.js # Score → label/color maps, formatters, sector colors
{
symbol: "RELIANCE", // NSE ticker
name: "Reliance Industries Ltd", // Full company name
sector: "Energy", // Sector classification
basePrice: 2890.40, // Reference price for change calculation
price: 2890.40, // Current simulated price (updates every 5s)
change: 1.24, // % change from base price
changeAmount: 35.60, // ₹ change from base price
volume: "4.2M", // Simulated trading volume
marketCap: "19.5L Cr", // Market capitalization
sentiment: 0.72, // Sentiment score (0.00 – 1.00)
sentimentLabel: "Bullish", // Human-readable sentiment label
sentimentColor: "green", // Color bucket: green | amber | red
prediction: "UP", // LSTM direction: "UP" | "DOWN"
confidence: 74, // Prediction confidence (0 – 100)
mentions24h: 342, // Social + news mentions in 24h
mentionsChange: 12 // Mentions change from previous period
}{
id: 1, // Unique identifier
company: "RELIANCE", // Associated NSE ticker
headline: "...", // Headline text (Hindi/English/Hinglish)
summary: "...", // Expandable summary
source: "Economic Times", // News source
timeAgo: "2h ago", // Relative timestamp
sentiment: 0.82, // Article sentiment score
sentimentLabel: "Very Positive", // Sentiment classification
sentimentColor: "green", // Badge color
language: "hinglish", // "hindi" | "english" | "hinglish"
type: "news" // "news" | "social"
}{
date: "14 Jun", // Formatted date (DD MMM)
price: 2856.78, // Closing price
sentiment: 0.684, // Sentiment at close
volume: 4.23 // Volume in millions
}{
lag: 8, // Lag in hours
corr: 0.63 // Correlation coefficient (-1.00 to 1.00)
}All data lives in-memory in React state — no external database, localStorage, or API calls. The project is fully client-side and deploys to any static hosting provider.
15 NSE/BSE-listed companies across 10 sectors:
| # | Symbol | Company | Sector |
|---|---|---|---|
| 1 | RELIANCE |
Reliance Industries Ltd | Energy |
| 2 | TCS |
Tata Consultancy Services | IT |
| 3 | HDFCBANK |
HDFC Bank Ltd | Banking |
| 4 | INFY |
Infosys Ltd | IT |
| 5 | TATAMOTORS |
Tata Motors Ltd | Auto |
| 6 | BAJFINANCE |
Bajaj Finance Ltd | NBFC |
| 7 | ITC |
ITC Ltd | FMCG |
| 8 | WIPRO |
Wipro Ltd | IT |
| 9 | ADANIENT |
Adani Enterprises Ltd | Conglomerate |
| 10 | SBIN |
State Bank of India | Banking |
| 11 | MARUTI |
Maruti Suzuki India Ltd | Auto |
| 12 | ONGC |
Oil and Natural Gas Corp | Energy |
| 13 | COALINDIA |
Coal India Ltd | Mining |
| 14 | POWERGRID |
Power Grid Corp of India | Utilities |
| 15 | NTPC |
NTPC Ltd | Power |
| Token | Hex | Usage |
|---|---|---|
| Page Background | #0A0B10 |
Main app background |
| Card Background | #12141C |
Panel/card surfaces |
| Elevated Surface | #1A1D2E |
Tooltips, dropdowns |
| Border | #252840 |
Card borders, separators |
| Primary Purple | #8B5CF6 |
Branding, positive correlation bars |
| Teal Accent | #14B8A6 |
Sentiment area fills |
| Bullish Green | #22C55E |
Positive change, UP prediction |
| Bearish Red | #EF4444 |
Negative change, DOWN prediction |
| Warning Amber | #F59E0B |
Neutral sentiment, NSE CLOSED |
| Primary Text | #F1F5F9 |
Headings, values |
| Secondary Text | #94A3B8 |
Labels, descriptions |
| Muted Text | #475569 |
Axis labels, subtitles |
| Animation | Duration | Trigger |
|---|---|---|
pulse-dot |
1.5s infinite | LIVE indicator breathing |
price-flash-up |
0.8s ease-out | Price increase tick |
price-flash-down |
0.8s ease-out | Price decrease tick |
| Gauge needle rotation | 0.8s ease | Sentiment score change |
- Real NSE/BSE WebSocket — Replace 5s tick simulation with live market data
- Hinglish FinBERT — Train and serve a real multilingual sentiment model
- Backtest Visualizer — Replay 6 months of predictions vs. realized outcomes
- Persistent Watchlists —
localStorage+ user accounts for saved preferences - Telegram/Email Alerts — Sentiment-driven notification triggers
- Export to CSV — Download chart data for offline analysis
- Expanded Coverage — More NSE stocks + sectoral/index-level views
- TensorFlow.js LSTM — Client-side real-time prediction model
Contributions are welcome! Feel free to open issues or submit pull requests.
# Fork the repo, then:
git checkout -b feature/your-feature
git commit -m "feat: add your feature"
git push origin feature/your-featureThis project is open source and available under the MIT License.
Educational / portfolio project. Not financial advice. All numbers shown — prices, sentiment scores, predictions, model accuracy — are simulated for demonstration purposes only. Past performance does not guarantee future results. Do not make investment decisions based on this application.
Built with ❤️ by artist-hks