Frontend Dashboard Media

A modern, interactive media analytics dashboard built with React and Vite. This dashboard provides real-time analytics, interactive maps, and comprehensive data visualization for media performance tracking.

Live Demo: https://stupendous-hummingbird-19cb71.netlify.app/

🚀 Features

• Interactive France Map: Geographic visualization with markers and heatmap overlay
• Real-time Analytics: Live viewer counts and engagement metrics
• Comprehensive Analytics Cards:
  • Engagement metrics
  • Content performance tracking
  • Demographics breakdown
  • Device distribution
  • Revenue analytics
  • Real-time viewer statistics
• Time Range Filtering: View data for different time periods (7d, 30d, 90d, 1y)
• Responsive Design: Fully responsive layout for all screen sizes
• Modern UI: Clean, professional interface with smooth animations

🛠️ Technologies & Languages

Core Technologies

• React ^18.2.0 - UI library for building interactive user interfaces
• Vite ^5.0.0 - Next-generation frontend build tool and dev server
• JavaScript (ES6+) - Primary programming language
• JSX - React's syntax extension for JavaScript

Libraries & Dependencies

Data Visualization

• Chart.js ^4.4.0 - Powerful charting library
• react-chartjs-2 ^5.2.0 - React wrapper for Chart.js
• chartjs-adapter-date-fns ^3.0.0 - Date adapter for Chart.js
• date-fns ^2.30.0 - Modern JavaScript date utility library

Maps

• Leaflet ^1.9.4 - Open-source JavaScript library for mobile-friendly interactive maps
• react-leaflet ^4.2.1 - React components for Leaflet maps

Styling

• CSS3 - Custom styling with modern CSS features
• Responsive Design - Mobile-first approach

Development Tools

• ESLint ^8.53.0 - Code linting and quality assurance
• @vitejs/plugin-react ^4.2.0 - Vite plugin for React support
• Terser ^5.44.1 - JavaScript minification for production builds

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher recommended)
• npm (v7 or higher) or yarn

🔧 Installation

1. Clone the repository:

git clone https://github.com/Sarvandani/Frontend_dashboard_media.git
cd Frontend_dashboard_media

2. Install dependencies:

npm install

🏃 Running the Project

Development Mode

Start the development server:

npm run dev

The application will be available at http://localhost:5173 (or the next available port).

Production Build

Build the project for production:

npm run build

The optimized production files will be in the dist directory.

Preview Production Build

Preview the production build locally:

npm run preview

📁 Project Structure

frontend_dashboard_media/
├── public/                 # Static assets
│   └── robots.txt
├── src/
│   ├── components/         # React components
│   │   ├── cards/          # Analytics card components
│   │   ├── AnalyticsGrid.jsx
│   │   ├── DashboardHeader.jsx
│   │   ├── FranceMapSection.jsx
│   │   ├── ErrorBoundary.jsx
│   │   └── LoadingSpinner.jsx
│   ├── data/              # Data files
│   │   └── franceData.js
│   ├── App.jsx            # Main application component
│   ├── App.css            # Application styles
│   ├── main.jsx           # Application entry point
│   └── index.css          # Global styles
├── styles.css             # Additional global styles
├── index.html             # HTML template
├── vite.config.js         # Vite configuration
├── package.json           # Project dependencies
└── README.md              # This file

🎨 Key Components

• DashboardHeader: Header with time range selector and refresh functionality
• FranceMapSection: Interactive map showing regional analytics
• AnalyticsGrid: Grid layout for analytics cards
• EngagementCard: Engagement metrics visualization
• ContentPerformanceCard: Content performance tracking
• DemographicsCard: Demographic breakdown charts
• DeviceCard: Device distribution analytics
• RevenueCard: Revenue metrics and trends
• RealtimeCard: Real-time viewer statistics

🌐 Deployment

This project can be deployed to various static hosting services:

Netlify

The project includes netlify.toml for easy Netlify deployment.

Vercel

The project includes vercel.json for Vercel deployment configuration.

Other Platforms

Any static hosting service that supports Node.js build processes can host this application. Simply:

1. Build the project: npm run build
2. Deploy the dist folder contents

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🔒 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is private and proprietary.

👤 Author

SARVANDANI

🤝 Contributing

This is a private project. Contributions are not currently accepted.

---

Built with ❤️ using React and Vite