https://github.com/prity25-coder/dashboard_news
Build a responsive dashboard that integrates third-party news/blog APIs and allows admins to calculate payouts based on content fetched, with robust filtering, exporting, and analytics capabilities.
https://github.com/prity25-coder/dashboard_news
chartjs fetch firebase reactjs tailwindcss
Last synced: 12 months ago
JSON representation
Build a responsive dashboard that integrates third-party news/blog APIs and allows admins to calculate payouts based on content fetched, with robust filtering, exporting, and analytics capabilities.
- Host: GitHub
- URL: https://github.com/prity25-coder/dashboard_news
- Owner: Prity25-coder
- Created: 2024-12-09T06:54:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-20T07:00:08.000Z (about 1 year ago)
- Last Synced: 2025-05-27T07:51:08.679Z (about 1 year ago)
- Topics: chartjs, fetch, firebase, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://dashboard-news-one.vercel.app
- Size: 289 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📰 Responsive News & Payout Dashboard
A fully responsive dashboard application built with React.js and firebase.
## ✅ Features
### 1. 🔐 User Authentication
- Email/Password login using Firebase Authentication.
- Google OAuth integration for quick login.
### 2. 📰 News & Blog Data Integration
- Fetches articles from third-party APIs (e.g., News API, The Guardian).
- Displays detailed article metadata: `author`, `publish date`, and `type`.
### 3. 🔎 Filtering & Search
- Filter articles/blogs by:
- Author
- Date Range
- Type (News / Blog)
- Global keyword search functionality.
### 4. 📱 Responsive Design
- Mobile-first UI built with **Tailwind CSS**.
- Compatible with phones, tablets, and desktops.
### 5. 💰 Payout Calculator
- Admin can define payout rates per article/blog.
- Payout configuration is stored in localStorage.
- Calculates total payouts based on article count and type.
### 6. 📤 Export Functionality
- Export payout reports as:
- PDF
- CSV
- Google Sheets
### 7. 📊 News Analytics
- Graphical charts (bar, pie, or line) displaying:
- Article trends by author
- Distribution by type
### 8. 🧾 Payout Details Table
- Displays article counts and calculated payouts per author.
- Inline editing support for adjusting payout rates.
### 9. ⚠️ Error Handling
- Graceful error messages shown if API fails or no data is available.
## 📦 Installation & Setup
```bash
# Clone the repo
git clone https://github.com/your-username/news-payout-dashboard.git
cd news-payout-dashboard
# Install dependencies
npm install
# Set up Firebase and API Keys in .env.local
cp .env.example .env.local
# Add Firebase config and API keys in .env.local
# Start the development server
npm run dev