Movie Website & Dashboard

Movie Website Dashboard

Project Overview

Built a full-featured Movie Website with an admin Dashboard that mirrors the structure of my other projects. The system includes content management (movies & series), AI-assisted translation, automatic metadata fetching from TMDB, channel/live stream management, event scheduling, and a customer/customer-interaction area with analytics.

Project Objectives

  • Unified UI: Keep the same project structure and visual language as existing projects for consistency.
  • Content Management: Provide easy CRUD for movies, series, channels, and events.
  • Multilingual Support: Use AI to translate content into English, Persian, and Pashto.
  • Metadata Enrichment: Auto-fetch posters, genres, release dates, and other metadata from the TMDB API.
  • Analytics & Monitoring: Dashboard shows user activity, uploads, streaming stats, and engagement metrics.
  • Live / Scheduled Channels: Manage live streams or scheduled channel programming from the admin panel.
  • Customer Interaction: Track reviews, ratings, messages and user engagement history.

Key Sections

1. Overview Page

  • Dashboard with charts and KPIs: active users, uploads, streams, watch time, retention.
  • Time-range filters, device and region breakdowns, and exportable reports.
  • Responsive, modern UI.

2. Home Page

  • Recently added movies and TV series grid.
  • Clickable items that open detailed pages with synopsis, cast, rating, trailer, and metadata.
  • Search, filters (genre, year, rating), and pagination.

3. Program Section (Content Management)

  • Add/edit movies and TV series manually or import via TMDB ID.
  • AI integration for translating titles, descriptions, and metadata into English / Persian / Pashto.
  • Automatic poster and metadata fetch from TMDB with manual override.

4. Channel Section

  • Manage online networks / TV channels.
  • Create live or scheduled channels (stream key management, schedule editor).
  • Preview channel status, stream health, and uptime logs.

5. Events Section

  • Schedule premieres, special releases, watch parties.
  • Event pages with countdown, ticketing (optional), and RSVP/attendance tracking.

6. Customer Section

  • Customer profiles, subscription/account details, watch history, payment status.
  • Admin controls for account management and support actions.

7. Customer Interaction Section

  • Reviews, ratings, comments moderation.
  • Engagement feed: likes, watchlists, shares, support tickets.
  • Sentiment overview and moderation tools.

Process and Methodology

  • Start with a design audit to align styles with existing projects.
  • Create data models and API routes for movies, series, channels, events, and customers.
  • Implement TMDB integration with server-side fetch + background enrichment.
  • Integrate AI translation to produce localized content.
  • Build Dashboard pages with charts (recharts) and lightweight analytics.
  • Add realtime capabilities for live channel status and event updates.
  • Use role-based access control for Dashboard/Editor/Admin flows.

Challenges

  • Multilingual consistency: keeping translated metadata aligned with original content.
  • Live streaming orchestration: handling stream keys, scheduling, and status monitoring.
  • Scaling analytics: aggregating streaming and engagement data efficiently.

Solutions

  • AI + Human override: automatic translations with UI to review/edit translations.
  • Stream management UI: clear channel workflow (create → configure keys → schedule → go live).
  • Event-driven analytics pipeline: batched events to keep the dashboard performant.

Results and Impact

  • Centralized content & channel management.
  • Faster publishing workflow (import TMDB → translate → publish).
  • Better visibility into user behavior and engagement through dashboard analytics.
  • Improved moderation and customer support tools.

What I Did

  • Frontend-stack architecture
  • Dashboard & Analytics
  • TMDB integration
  • Live channel scheduling
  • Events & Ticketing
  • Customer management
  • Moderation tools

Technology Stack

  • Next.js (App Router)
  • React
  • TypeScript
  • Tailwind CSS
  • TMDB API
  • Recharts / Chart.js
  • NextAuth (auth)
  • MinIO (media storage)
  • Vercel