Join us live as we unveil the all new Hygraph Studio!

Hygraphlix, a movie streaming platform demo

A composable movie streaming platform demo built with TypeScript using Hygraph, NextJS 14, Tailwind CSS, Mux, and federated movie metadata from an external API.

Hygraphlix: movie streaming platform demo built with Hygraph

About Hygraphlix movie starter

Hygraphlix is a composable movie streaming platform demo built with Hygraph with TypeScript.

Technologies used:

  • NextJS 14
  • Tailwind CSS
  • Mux
  • Federate This demo API

Screenshot 2024-01-25 at 10.31.38.png

The demo uses Hygraph to pull movie data and metadata from an external system, a mock API called "Federate This" that we used to wrap OMDB, an open-source movie database. Movie metadata such as director, actor, genre, and poster is piped into Hygraph via a remote source connection, and by adding a remote field to the Movie content model.

movie-contentmodel-hygraph.png

Movie metadata such as director, actor, genre, and poster is piped into Hygraph via a remote source connection, and by adding a remote field to the Movie content model.

Mux video player

To get the most out of the demo, connect Mux:

  1. Sign up for a Mux account
  2. Install the Mux app in your Hygraph project
  3. Create access tokens for your Mux account

Hygraph uses Mux for video delivery and features a Mux player component that allows you to change the controls to fit your brand.

Wrap-up

Developers can query the CMS for all movie data. No movie streaming platform is complete without the ability to browse by genre! Hygraphlix shows how to create a Genre movie section with one query that combines Hygraph content and OMDB metadata to sort movies by Genre. Screenshot 2024-01-26 at 10.49.05.png

The ability to connect all your content and data sources means editors can craft enriching content all in one place. Tryout this demo and let us know what you think in the community!

Build your own app

Build your own app using our SDK and extend Hygraph functionalities according to your unique requirements.