Video Streaming & Social Media Analytics Dashboard Templates

Video streaming platforms and social media analytics tools are high-growth SaaS categories. Streaming platforms require video upload, transcoding, player integration, and content management. Analytics dashboards need data aggregation, real-time visualization, and export capabilities.

Both types of applications benefit from purpose-built templates that handle the complex infrastructure.

Video Streaming Platform Features

A video streaming template includes:

• Video upload with transcoding
• Adaptive bitrate streaming (HLS)
• Video player with controls
• Channel and playlist management
• User subscriptions
• Watch history and analytics
• Comment and engagement features

Social Media Analytics Features

An analytics dashboard template provides:

• Multi-platform data aggregation
• Real-time metrics dashboard
• Custom report generation
• Export to PDF and CSV
• Team collaboration
• Scheduled reporting

The Analytics Dashboard template includes data visualization and reporting features.

Video Upload with Transcoding

// app/api/videos/upload/route.ts
import { NextResponse } from 'next/server'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'

export async function POST(req: Request) {
  const session = await auth()
  if (!session?.user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })

  const formData = await req.formData()
  const file = formData.get('file') as File

  if (!file) return NextResponse.json({ error: 'No file provided' }, { status: 400 })

  // Upload to storage provider (S3, Cloudflare R2, etc.)
  const buffer = Buffer.from(await file.arrayBuffer())
  const key = `videos/${session.user.id}/${Date.now()}-${file.name}`

  // In production, upload to your storage provider and trigger async transcoding
  const video = await prisma.video.create({
    data: {
      userId: session.user.id,
      title: formData.get('title') as string || file.name,
      filename: file.name,
      fileSize: file.size,
      mimeType: file.type,
      status: 'processing',
    },
  })

  return NextResponse.json({ id: video.id, status: 'processing' })
}

Analytics Dashboard Widget

'use client'

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'

interface AnalyticsWidgetProps {
  title: string
  data: { date: string; value: number; previous?: number }[]
  dataKey: string
  color?: string
}

export function AnalyticsWidget({ title, data, dataKey, color = '#6366f1' }: AnalyticsWidgetProps) {
  return (
    <div className="rounded-xl border bg-white p-6">
      <h3 className="text-sm font-semibold text-gray-700">{title}</h3>
      <div className="mt-4 h-64">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis dataKey="date" stroke="#888" fontSize={12} />
            <YAxis stroke="#888" fontSize={12} />
            <Tooltip />
            <Legend />
            <Line
              type="monotone"
              dataKey={dataKey}
              stroke={color}
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}

Build your video or analytics platform with the Analytics Dashboard template.

Browse all 200+ templates and starter kits.