Frequently Asked Questions

Product Information: Hygraphlix Movie Streaming Platform

What is Hygraphlix?

Hygraphlix is a composable movie streaming platform demo built with Hygraph, showcasing how to use federated movie metadata and integrate with Mux for video delivery. It is constructed using TypeScript, NextJS 14, Tailwind CSS, and leverages OMDB data via a remote API. For more details, visit the Hygraphlix Demo Blog.

What technologies are used in the Hygraphlix demo?

The Hygraphlix demo utilizes NextJS 14, Tailwind CSS, Mux for video streaming, and a federated API that wraps OMDB for movie metadata. Hygraph serves as the content platform, enabling remote source connections and content federation. Source: Hygraphlix Demo Blog.

How does Hygraphlix handle movie metadata and content federation?

Hygraphlix pulls movie data and metadata from an external system using a mock API called "Federate This," which wraps OMDB. Metadata such as director, actor, genre, and poster is piped into Hygraph via a remote source connection and a remote field called federateMovie in the Movie content model. This enables seamless content federation and integration. Source: Hygraphlix Demo Blog.

How can I access the Hygraphlix demo and source code?

You can access the Hygraphlix demo at https://hygraph-movie-starter.vercel.app/ and the source code at GitHub repository. To clone the Hygraph project, use this link. Source: Hygraphlix Demo Blog.

How does Hygraphlix enable sorting movies by genre?

Hygraphlix demonstrates how to create a genre-based movie section using a single query that combines Hygraph content and OMDB metadata. The demo uses asynchronous functions to fetch all movies and their metadata, then groups and displays them by genre using JavaScript's Set and array mapping techniques. Source: Hygraphlix Demo Blog.

How are individual movie pages created in Hygraphlix?

Individual movie pages in Hygraphlix feature the Mux video player and metadata from OMDB, including plot, actors, director, genre, rating, runtime, and release year. The Mux player component is customizable, allowing you to adjust controls to fit your brand. Source: Hygraphlix Demo Blog.

What steps are required to connect Mux to a Hygraph project?

To connect Mux to your Hygraph project, follow these steps:

  1. Sign up for a Mux account at Mux Signup.
  2. Install the Mux app in your Hygraph project via Hygraph Mux App.
  3. Create access tokens for your Mux account as described in the Hygraph Mux Integration Guide.
Source: Hygraphlix Demo Blog.

Features & Capabilities

What are the key capabilities of Hygraph?

Hygraph provides a GraphQL-native architecture, content federation, scalability, and integration with modern frameworks. It supports rapid content delivery, optimized performance, and a wide range of integrations including Mux, Netlify, Vercel, Shopify, and more. Learn more at Hygraph Features.

What integrations does Hygraph support?

Hygraph supports integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), AI (AltText.ai), and more. For a full list, visit Hygraph Integrations.

Does Hygraph offer an API for developers?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Developers can access the API reference at Hygraph API Reference.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the Hygraph Pricing Page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit Hygraph Security Features.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. Source: ICPVersion2_Hailey.pdf.

What business impact can customers expect from using Hygraph?

Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source: ICPVersion2_Hailey.pdf.

Customer Success Stories

Can you share specific case studies or success stories of customers using Hygraph?

Yes. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More success stories are available at Hygraph Case Studies.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at Hygraph Documentation, covering everything needed to build and deploy projects.

Support & Implementation

What support is available to Hygraph customers?

Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more details, visit Hygraph Contact Page.

How easy is it to get started with Hygraph?

Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. Users can sign up for a free account and access documentation and onboarding guides at Hygraph Documentation.

Performance & Optimization

How does Hygraph optimize content delivery performance?

Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized performance helps reduce bounce rates and increase conversions. For more details, visit this page.

Webinar Event: How to Avoid Personalization Tech Traps

HYGRAPHlix, a Hygraph movie streaming platform

A composable movie streaming platform demo built with TypeScript using NextJS 14, Tailwind CSS, and Mux.
Lo Etheridge

Written by Lo 

Jan 30, 2024
Hygraphlix- movie streaming platform made with Hygraph, headless CMS

Movie streaming platforms have become a major part of our free time. There are platforms for anime lovers, connoisseurs of the Criterion Collection, and one that contains movies and TV shows from all around the world. What all of these platforms have in common is lots and lots of data and content.

Our Hygraphlix demo takes on the movie streaming platform use case and showcases “The Hygraph Way”. From a single content model, Movie, we are able to create a wide range of content sections including the Top 8 movies on the platform, a landing page that lists all the movies available, and much more!

Screenshot 2024-01-29 at 09.20.56.png

Demo site https://hygraph-movie-starter.vercel.app/
GitHub repository https://github.com/lowisren/hygraph-movie-starter
Federate This API https://www.federatethis.com/routes/movies/
Clone Hygraph project https://app.hygraph.com/clone/60a5f60969474157a5bb6cec6452e833?name=Hygraph%20Movie%20Platform%20Starter

#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

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 called federateMovie to the Movie content model.

movie-contentmodel-hygraph.png

#Sorting movies by genre

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 our movie collection.

Let’s take a quick dive into the code to build a movies by genre content section:

//Landing page for movies by genre: app/genres/page.tsx
import MovieCard from "@/components/MovieCard";
import { subtitle, title } from "@/components/primitives";
//Get all Movies
async function getMovies() {
const HYGRAPH_ENDPOINT = process.env.HYGRAPH_ENDPOINT;
if (!HYGRAPH_ENDPOINT) {
throw new Error("HYGRAPH_ENDPOINT is not defined");
}
const response = await fetch(HYGRAPH_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query: `
query Movies {
movies(first: 100) {
federateMovie {
data {
Title
Poster
Genre
Director
}
}
id
slug
moviePoster {
height
width
url
}
}
}`,
}),
});
const json = await response.json();
return json.data.movies;
}
// Declare Movie interface
interface Movie {
federateMovie: {
data: {
Genre: string;
Title: string;
Poster: string;
Director: string;
};
};
id: string;
slug: string;
moviePoster: {
height: number;
width: number;
url: string;
};
}

We are using the asynchronous function getMovies() to query all movies in Hygraph and their respective metadata such as Poster, Genre, and Director from OMDB using via the federateMovie remote field and then return the list of movies in JSON.

//Landing page for movies by genre: app/genres/page.tsx
export default async function Movies() {
const movies: Movie[] = await getMovies();
const genres = [
...new Set(movies.map((movie: Movie) => movie.federateMovie.data.Genre.split(",")[0])),
];
return (
// Markup for filtered movies by genre goes HERE
);
}

After we fetched our data from Hygraph, we return a Promise that resolves to an array of Movie objects. We use the await keyword to pause the execution of the Movies function until the Promise resolves. In order to render the movies by Genre, we make constant called genres to store an array of each unique genre by iterating over the movies array and extract the genre of each movie. Since a movie can be a member of more than one genre, we use the Set object, and then convert it back to an array using the spread (...) operator.

//Landing page for movies by genre: app/genres/page.tsx
return (
<section className="flex flex-col justify-between mb-32 text-center">
<h1 className={title({size: "xl"})}>
Movies by Genres
</h1>
{genres.map((genre) => (
<div className="text-left" key={genre}>
<h2 className={`${subtitle()} text-lg font-bold my-8`}>{genre}</h2>
<div className="grid px-5 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">
{movies
// filter movies by genre and use the first genre in the list to group movie cards
.filter((movie) => movie.federateMovie.data.Genre.split(',')[0] === genre)
.map((movie) => (
<MovieCard
key={movie.id}
Title={movie.federateMovie.data.Title}
Poster={movie.federateMovie.data.Poster}
moviePoster={movie.moviePoster}
alt={movie.federateMovie.data.Title}
Genre={movie.federateMovie.data.Genre}
Director={movie.federateMovie.data.Director}
slug={movie.slug}
/>
))}
</div>
</div>
))}
</section>
);

Last, we create the markup to render our movies by mapping over our genres constant to create a section for each genre in our return statement. Inside each section, we filter the movies array to only include movies that belong to the current genre and display every movie in a MovieCard component.

Screenshot_2024-01-28_at_19.07.17.png

#Individual movie pages using Mux

With just a single content model and remote source data, Hygraphlix also showcases individual movie pages that contain the Mux video player and metadata from OMDB for each movie.

Screenshot_2024-01-28_at_19.14.58.png

Each movie pages contains the Plot, Actors Director, Genre, Rating, Runtime, and Release Year. Hygraph uses Mux for video delivery and features a Mux player component that allows you to change the controls to fit your brand.

//Mux player component - components/MuxPlayer.tsx
"use client";
import React from 'react';
import MuxPlayer from '@mux/mux-player-react';
interface MuxPlayerProps {
playbackId: string;
}
const MuxPlayerComponent: React.FC<MuxPlayerProps> = ({ playbackId }) => {
return (
<MuxPlayer
playbackId={playbackId}
accent-color="#5b4cff"
/>
);
};
export default MuxPlayerComponent;

Follow the below steps to get the most out of Hygraphlix by connecting Mux to your Hygraph project:

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

#Conclusion

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

Blog Author

Lo Etheridge

Lo Etheridge

Senior Developer Relations

Lo is Hygraph's Senior Developer Relations Specialist. They focus on developer education around Headless CMS, JS-based frontends, and API technologies as well as the dynamic cross-functional relationship between developers and content professionals.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.