MediaShift

Global AI Content Impact Analytics Dashboard

A modern, interactive web dashboard for analyzing global AI content impact data with real-time filtering, advanced visualizations, and comprehensive analytics.

Features

• Real-time Analytics: Live data updates without page refresh
• Interactive Charts: Country, industry, and year-based trend visualizations
• Advanced Filtering: Filter by country, industry, and year with instant results
• Correlation Analysis: Heatmap showing relationships between metrics
• Data Export: CSV export functionality
• Responsive Design: Works seamlessly on desktop, tablet, and mobile
• Clean UI: Modern, minimalist interface inspired by contemporary web design

Key Metrics

• AI Adoption Rate
• Content Volume Generation (TBs/year)
• Job Displacement Impact
• Revenue Increase Analysis
• Human-AI Collaboration Rates
• Consumer Trust Levels

Quick Start

Prerequisites

• Python 3.8+
• Node.js 16+
• npm

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd MediaShift

2. Install Backend Dependencies

   cd backend
   pip install -r requirements.txt
   cd ..

3. Install Frontend Dependencies

   cd frontend
   npm install
   cd ..

Running the Dashboard

Start Backend (Terminal 1):

cd backend
python -m uvicorn main:app --reload

Start Frontend (Terminal 2):

cd frontend
npm start

Access Points

• Dashboard: http://localhost:3000
• Backend API: http://localhost:8000
• API Documentation: http://localhost:8000/docs

Project Structure

MediaShift/
├── backend/
│   ├── main.py                 # FastAPI server
│   └── requirements.txt        # Python dependencies
├── frontend/
│   ├── public/
│   │   ├── index.html
│   │   └── manifest.json
│   ├── src/
│   │   ├── components/
│   │   │   ├── charts/         # Chart components
│   │   │   ├── Dashboard.js    # Main dashboard
│   │   │   ├── FilterSection.js
│   │   │   ├── MetricCards.js
│   │   │   └── ...
│   │   ├── App.js
│   │   ├── index.js
│   │   └── router.js
│   ├── package.json
│   └── package-lock.json
├── Global_AI_Content_Impact_Dataset.csv
├── .gitignore
└── README.md

Technology Stack

Backend

• FastAPI: Modern Python web framework
• Pandas: Data analysis and manipulation
• SQLite: Lightweight database for data storage
• Uvicorn: ASGI server

Frontend

• React 18: UI library
• Ant Design: Component library
• Recharts: Chart visualization
• TanStack Query: Data fetching and caching
• Framer Motion: Animations
• Axios: HTTP client

API Endpoints

Core Endpoints

• GET / - API status
• GET /api/health - Health check
• GET /api/dataset/info - Dataset metadata
• GET /api/dataset - Filtered dataset data

Analytics Endpoints

• GET /api/analytics/summary - Statistical summary (supports filters)
• GET /api/analytics/by-country - Country-wise analytics
• GET /api/analytics/by-industry - Industry-wise analytics
• GET /api/analytics/by-year - Year-wise trends
• GET /api/analytics/correlations - Correlation matrix
• GET /api/analytics/top-performers - Top performers

Real-time Updates

• GET /api/events?watch=dataset - Server-Sent Events stream

Features Breakdown

Overview Tab

• Key metrics cards with gradient backgrounds
• Top performers showcase
• Interactive country and industry charts
• Year-over-year trend analysis
• Correlation heatmap

Analytics Tab

• Detailed statistical summaries
• Performance indicators with color coding
• Min, max, mean, and standard deviation
• Progress bars for key metrics

Data Explorer Tab

• Advanced data table with sorting
• Real-time search across all columns
• CSV export with current filters
• Pagination for large datasets

Data Insights

The dashboard analyzes:

• 10 Countries: USA, China, India, France, Japan, South Korea, UK, Germany, Australia, Canada
• 10 Industries: Media, Gaming, Retail, Manufacturing, Legal, Healthcare, Marketing, Education, Finance, Automotive
• 6 Years: 2020-2025
• 200+ Data Points: Comprehensive coverage across all dimensions

Notes

• The backend automatically creates a SQLite database (ai_dashboard.db) from the CSV on first run
• Data updates are reflected in real-time across all connected clients via Server-Sent Events
• Filters apply strictly—if no data matches, "No data" is shown instead of zeros
• All API responses are NaN-safe and JSON-compliant

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Troubleshooting

Backend won't start:

• Ensure Python 3.8+ is installed
• Install dependencies: cd backend && pip install -r requirements.txt
• Check if port 8000 is available
• Ensure CSV file exists in MediaShift root

Frontend won't start:

• Ensure Node.js 16+ is installed
• Install dependencies: cd frontend && npm install
• Check if port 3000 is available

No data showing:

• Ensure backend is running on port 8000
• Check browser console for connection errors
• Verify CSV file exists in project root

Charts not displaying:

• Hard refresh the browser (Ctrl+F5)
• Check browser console for JavaScript errors
• Ensure all dependencies are installed

---

Built with ❤️ for data-driven insights into AI's global impact