AfroMax Admin Dashboard

A unified admin dashboard for managing the AfroMax platform with centralized access to all administrative tools.

Overview

The AfroMax Admin Dashboard provides a single point of access for all administrative functions including content curation, user management, and infrastructure monitoring.

Overview

The AfroMax Admin Dashboard provides a single point of access for all administrative functions including content curation, user management, and infrastructure monitoring.

Quick Start

  1. Access the Dashboard: Navigate to /web/admin/index.html
  2. Sign In: Click "Sign In with Google" and authenticate with your admin account
  3. First Time Setup: If this is your first time, go to the Setup module to grant admin privileges
  4. Start Managing: Access any of the available modules from the unified dashboard

Available Modules

📌 Editor's Picks Dashboard

File: editors-picks.html

Curate featured content shown to new users.

Features:

Use Cases:

👥 Suggested Creators Dashboard

File: suggested-creators.html

Manage the list of creators suggested to new users.

Features:

Use Cases:

☁️ Cloudflare Migration Dashboard

File: migration-dashboard.html

Monitor and manage video migration from Firebase Storage to Cloudflare Stream.

Features:

Use Cases:

🔧 Admin Setup

File: setup.html

Grant admin access to new users (one-time setup).

Features:

Use Cases:

Setup Instructions

1. First-Time Admin Setup

If you're setting up admin access for the first time:

  1. Open /web/admin/setup.html in your browser
  2. Deploy Firestore rules: firebase deploy --only firestore:rules
  3. Click "Sign in with Google" and authenticate
  4. Click "Create Admin Access" to grant yourself admin privileges
  5. Navigate to the main dashboard at /web/admin/index.html

2. Adding Additional Admins

To grant admin access to other users:

  1. Have the new admin navigate to /web/admin/setup.html
  2. They sign in with their Google account
  3. They click "Create Admin Access"
  4. They can now access the admin dashboard

3. Accessing the Dashboard

Once you have admin access:

  1. Navigate to /web/admin/index.html
  2. Sign in with your Google account
  3. Dashboard will verify your admin status automatically
  4. Access any module from the main dashboard

4. Firestore Security Rules

Ensure your firestore.rules includes admin access control:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Admin collection - only admin users can read/write their own record
    match /admins/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    
    // Editor's picks - only admin users can manage
    match /editorsPicks/{docId} {
      allow read: if true; // Public read access
      allow write: if request.auth != null && isAdmin(request.auth.uid);
    }
    
    // Suggested creators - only admin users can manage
    match /suggestedCreators/{docId} {
      allow read: if true; // Public read access
      allow write: if request.auth != null && isAdmin(request.auth.uid);
    }
    
    function isAdmin(userId) {
      return exists(/databases/$(database)/documents/admins/$(userId));
    }
  }
}

Deploy rules:

firebase deploy --only firestore:rules

Dashboard Features

Unified Interface

Statistics Dashboard

The main dashboard displays:

Navigation

Security Best Practices

1. Never Commit Secrets

2. Use HTTPS in Production

3. Regular Security Audits

4. IP Restrictions (Optional)

For enhanced security, consider restricting admin dashboard access by IP:

// Example Express.js middleware
const adminIPs = ['192.168.1.100', '10.0.0.5']; // Your admin IPs

function restrictToAdminIPs(req, res, next) {
    const clientIP = req.ip;
    if (adminIPs.includes(clientIP)) {
        next();
    } else {
        res.status(403).send('Access denied');
    }
}

app.use('/admin/*', restrictToAdminIPs);

Troubleshooting

Configuration Error

If you see "Firebase configuration is missing or invalid":

  1. Check that your .env file exists and has correct values
  2. Verify environment variables are being loaded properly
  3. Check browser developer console for specific error messages

Authentication Issues

If Google authentication fails:

  1. Verify Firebase API key is correct for your project
  2. Check that your domain is authorized in Firebase Console
  3. Ensure Firestore security rules allow admin access

Access Denied

If you can't access admin functions after login:

  1. Verify your user exists in the admins collection in Firestore
  2. Check Firestore security rules are correctly configured
  3. Confirm you're signed in with the correct Google account

Files Overview