Analytics Pro Dashboard

A full-stack marketing analytics dashboard using real campaign data with machine learning insights including K-Means clustering, classification models, and association rule mining.

🚀 Tech Stack

Backend

• Python 3.8+
• Flask (REST API)
• Pandas (Data processing)
• Scikit-learn (ML models)
• MLxtend (Association rules)

Frontend

• React 18
• Recharts (Data visualization)
• Tailwind CSS (Styling)
• Axios (HTTP client)
• Lucide React (Icons)

📁 Project Structure

analytics-dashboard/
├── backend/
│   ├── app.py
│   ├── requirements.txt
│   ├── data/
│   │   └── DWDM_dataset_cleaned_full_columns.csv
│   ├── models/
│   │   ├── __init__.py
│   │   ├── clustering.py
│   │   ├── classification.py
│   │   └── association.py
│   └── utils/
│       ├── __init__.py
│       └── data_processor.py
│
└── frontend/
    ├── package.json
    ├── public/
    │   └── index.html
    └── src/
        ├── index.js
        ├── App.js
        ├── index.css
        ├── components/
        │   ├── Sidebar.js
        │   ├── KPICard.js
        │   └── MetricItem.js
        └── pages/
            ├── OverviewPage.js
            ├── PerformancePage.js
            ├── AnalyticsPage.js
            ├── ROIPage.js
            └── StrategyPage.js

🔧 Installation & Setup

Prerequisites

• Python 3.8 or higher
• Node.js 16 or higher
• npm or yarn

Backend Setup

1. Navigate to backend directory:

cd backend

2. Create virtual environment:

python -m venv venv

# Windows
venv\Scripts\activate

# Mac/Linux
source venv/bin/activate

3. Install Python dependencies:

pip install -r requirements.txt

4. Add your CSV data:

   • Place DWDM_dataset_cleaned_full_columns.csv in the backend/data/ folder
   • OR convert your PDF to CSV and place it there

5. Run the Flask server:

python app.py

The backend will start on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install npm dependencies:

npm install

3. Start the React development server:

npm start

The frontend will start on http://localhost:3000

📊 Features

1. Overview Dashboard

• Total customers, ad spend, conversion rate, CTR metrics
• Campaign performance by channel (Bar chart)
• Platform distribution (Pie chart)
• Key metrics summary

2. Performance Analysis

• K-Means Clustering: Customer segmentation by income and ad spend
• Cluster summary with engagement levels
• CTR vs Conversion rate trends
• Top performing platforms

3. Classification Analytics

• Random Forest Classifier for conversion prediction
• Confusion matrix visualization
• Feature importance analysis
• Channel-wise prediction accuracy

4. Campaign ROI

• ROI trend over time
• ROI by campaign type
• Platform effectiveness comparison
• Ad spend vs conversion analysis

5. Marketing Strategy

• Apriori Algorithm: Association rule mining
• Marketing insights and recommendations
• Frequent itemsets (platform + tool combinations)
• Data-driven action items

🔌 API Endpoints

Endpoint	Method	Description
/api/overview	GET	Dashboard KPIs and charts
/api/performance	GET	Clustering and performance metrics
/api/analytics	GET	Classification model results
/api/roi	GET	ROI analysis data
/api/strategy	GET	Association rules and insights

📈 Data Processing

Machine Learning Models

1. K-Means Clustering

   • Features: Income, AdSpend, WebsiteVisits, PagesPerVisit, TimeOnSite, etc.
   • 3 Clusters: Low, Medium, High engagement

2. Random Forest Classification

   • Predicts conversion (0/1)
   • Features: Age, Income, AdSpend, CTR, Loyalty Points, etc.
   • Metrics: Accuracy, Precision, Recall, F1-Score

3. Apriori Association Rules

   • Discovers patterns in Platform + Tool + Campaign combinations
   • Metrics: Support, Confidence, Lift

🎨 Customization

Changing API URL

In frontend/src/App.js, update the API base URL:

const API_BASE = 'http://your-backend-url:5000/api';

Styling

• Tailwind CSS is used via CDN in public/index.html
• Custom styles in src/index.css
• Component-level styles using Tailwind utility classes

🐛 Troubleshooting

CORS Errors

Ensure Flask-CORS is installed and configured in backend/app.py:

from flask_cors import CORS
CORS(app)

Port Already in Use

Backend:

# Change port in app.py
app.run(debug=True, port=5001)

Frontend:

# Set PORT environment variable
PORT=3001 npm start

Data Loading Issues

• Verify CSV file path in backend/app.py
• Check CSV file format matches expected columns
• Ensure no missing required columns

📝 CSV Data Format

Required columns:

• CustomerID, Age, Gender, Income
• CampaignChannel, CampaignType, AdSpend
• ClickThroughRate, ConversionRate
• WebsiteVisits, PagesPerVisit, TimeOnSite
• SocialShares, EmailOpens, EmailClicks
• PreviousPurchases, LoyaltyPoints
• AdvertisingPlatform, AdvertisingTool
• Conversion (0 or 1)

🚀 Deployment

Backend (Heroku/Railway)

# Add Procfile
web: python app.py

# Deploy to Heroku
heroku create your-app-name
git push heroku main

Frontend (Vercel/Netlify)

# Build production bundle
npm run build

# Deploy to Vercel
vercel --prod

📄 License

MIT License - Feel free to use this project for your own purposes.

👨‍💻 Author

Created with ❤️ using real marketing campaign data

🙏 Acknowledgments

• Dataset: DWDM Marketing Campaign Data
• Libraries: React, Flask, Scikit-learn, Recharts
• Icons: Lucide React