📈 Crypto News Tracker

A modern, real-time cryptocurrency news aggregator with sentiment analysis built with React.js, Chart.js, and the NewsData.io Crypto News API. This project demonstrates how to build a production-grade news tracking application with data visualization and sentiment analysis.

🔑 Get started in seconds — grab a free NewsData.io API key. The free tier gives you 200 API credits/day with no credit card required, and is the only News API with built-in coin tracking across 200+ countries and 89 languages.

✨ Features

• Real-time Crypto News: Fetch latest cryptocurrency news from NewsData.io
• Sentiment Analysis: Automatic sentiment detection (Positive, Negative, Neutral)
• Interactive Charts: Beautiful visualizations using Chart.js
  • Sentiment distribution doughnut chart
  • Sentiment timeline chart
• Trending Topics: Track popular cryptocurrencies being discussed
• Advanced Filtering: Filter by search query, cryptocurrency, and sentiment
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Auto-refresh: News updates every 5 minutes automatically
• Modern UI: Dark theme with smooth animations

🚀 Demo

Live Demo (Coming soon)

📋 Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• NewsData.io API key (Get one free here)

🛠️ Installation

1. Clone the repository

git clone https://github.com/newsdata-io/newsdata-crypto-tracker.git
cd newsdata-crypto-tracker

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

Create a .env file in the root directory:

cp .env.example .env

Edit .env and add your NewsData.io API key:

REACT_APP_NEWSDATA_API_KEY=your_api_key_here
REACT_APP_NEWSDATA_BASE_URL=https://newsdata.io/api/1
REACT_APP_REFRESH_INTERVAL=300000

4. Start the development server

npm start
# or
yarn start

The app will open at http://localhost:3000

🎯 Key Components

1. API Integration (src/services/api.js)

Handles all communication with NewsData.io API:

import { fetchCryptoNews } from './services/api';

const data = await fetchCryptoNews();

2. Charts (SentimentChart.js, TimelineChart.js)

Visualizations powered by Chart.js:

• Doughnut chart for sentiment distribution
• Line chart for sentiment over time

3. News Display (NewsCard.js)

Beautiful news cards with:

• Article image
• Sentiment badge
• Source and timestamp
• Read more link

🎨 Features in Detail

Sentiment Analysis

The app uses keyword-based sentiment analysis to categorize news as:

• Positive (📈): "surge", "rally", "gain", "bullish"
• Negative (📉): "crash", "drop", "bearish", "loss"
• Neutral (➖): Everything else

Trending Topics

Automatically extracts and displays the most mentioned cryptocurrencies:

• Bitcoin, Ethereum, BNB, Cardano, Solana, etc.
• Shows mention count for each topic

Auto-refresh

News automatically refreshes every 5 minutes (configurable in .env)

📊 API Usage

NewsData.io Crypto Endpoint

GET https://newsdata.io/api/1/crypto?apikey=YOUR_KEY

Response Structure:

{
  "status": "success",
  "totalResults": 100,
  "results": [
    {
      "article_id": "abc123",
      "title": "Bitcoin surges to new high",
      "description": "Bitcoin price reaches...",
      "link": "https://...",
      "pubDate": "2024-02-03 10:30:00",
      "source_id": "cryptonews",
      "image_url": "https://..."
    }
  ]
}

🔧 Configuration

Environment Variables

Variable	Description	Default
REACT_APP_NEWSDATA_API_KEY	Your NewsData.io API key	Required
REACT_APP_NEWSDATA_BASE_URL	API base URL	https://newsdata.io/api/1
REACT_APP_REFRESH_INTERVAL	Auto-refresh interval (ms)	300000 (5 min)

🧪 Testing

npm test
# or
yarn test

🏗️ Building for Production

npm run build
# or
yarn build

This creates an optimized production build in the build/ folder.

🤝 Contributing

Contributions are welcome! Please follow these steps:

📝 Common Issues & Solutions

Issue: API Key Error

Solution: Make sure you've created a .env file and added your API key

Issue: No News Displayed

Solution: Check browser console for errors and verify API key is valid

Issue: Charts Not Rendering

Solution: Ensure Chart.js dependencies are installed: npm install chart.js react-chartjs-2

🔗 Links

• NewsData.io API Docs
• React Documentation
• Chart.js Documentation
• Live Demo

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Acknowledgments

• NewsData.io for providing the crypto news API
• Chart.js for amazing charting library
• React for the powerful UI framework

---

⭐ Star this repo if you find it helpful!