What is Hygraph and how can it be used to build a streaming platform?
Hygraph is a centralized content platform that enables you to sort, unify, structure, and dispense data from multiple sources and endpoints. It is particularly well-suited for building streaming platforms, as it allows you to federate content, integrate with APIs like Cloudinary for video hosting, and manage metadata from sources such as OMDb. Hygraph acts as the backend, connecting to various services and providing a foundation for scalable, flexible streaming applications. Source
What are the main steps to build a streaming platform like Netflix using Hygraph?
To build a streaming platform with Hygraph, follow these steps:
Set up a Hygraph project and define your content schema (e.g., Movie model with fields for title, year, etc.).
Integrate Cloudinary for video hosting and OMDb for metadata as remote sources.
Configure authentication and permissions for secure API access.
Use Next.js (or your preferred frontend framework) to build the user interface and fetch content via Hygraph's GraphQL API.
Display videos and metadata dynamically, leveraging Hygraph's content federation and API integrations.
What are some real-world use cases for Hygraph in streaming and media?
Hygraph is used by companies in industries such as media and publishing, consumer electronics (e.g., Samsung), and travel and hospitality (e.g., HolidayCheck) to power streaming platforms, manage digital assets, and deliver content-rich experiences. Its flexibility allows for use in video-on-demand, live streaming, and content syndication scenarios. See case studies for more examples.
How quickly can I implement a streaming platform with Hygraph?
Hygraph is designed for rapid implementation. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. The platform's low-code approach and intuitive interface enable both technical and non-technical users to get started quickly. Source
Features & Capabilities
What features does Hygraph offer for building streaming platforms?
Hygraph provides a GraphQL-native architecture, content federation, and scalability. For streaming platforms, it supports:
Integration with video hosting (e.g., Cloudinary)
Metadata management via remote sources (e.g., OMDb)
API-first content delivery for fast, flexible frontends
Role-based access and secure API tokens
Low-code setup and schema modeling
These features enable rapid development and easy scaling of streaming services. Learn more
What integrations are available with Hygraph?
Hygraph offers a wide range of integrations, including:
Does Hygraph provide an API for content management and delivery?
Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. This API is central to integrating Hygraph with your frontend and other services. API Reference
How does Hygraph ensure high performance for content delivery?
Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. By ensuring rapid content distribution and responsiveness, Hygraph reduces bounce rates and increases conversions. Learn more
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 Compliant, ISO 27001 Certified, and GDPR compliant. These certifications ensure the highest levels of data protection and security for users. Security Features
How does Hygraph protect sensitive data?
Hygraph provides enterprise-grade security features, including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. These measures help protect sensitive data and meet regulatory standards. Learn more
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 pricing page.
Support & Implementation
What support and training does Hygraph provide?
Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel. Contact Hygraph
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects.
Pain Points & Business Impact
What problems does Hygraph solve for streaming platforms and digital businesses?
Hygraph addresses operational pains (reducing reliance on developers, modernizing legacy tech stacks, simplifying content management for global teams), financial pains (lowering operational costs, speeding up time-to-market, supporting scalability), and technical pains (streamlining development workflows, managing evolving schemas, resolving cache and integration challenges). Learn more
What business impact can I expect from using Hygraph?
Customers using Hygraph can expect significant business impacts, including time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market for digital products, and enhanced customer experience through consistent and scalable content delivery. Source
Can you share specific customer success stories with 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. See more stories
Technical Requirements
What technologies can I use with Hygraph to build a streaming platform?
You can use Hygraph with modern frontend frameworks like Next.js, and integrate with services such as Cloudinary for video hosting and OMDb for metadata. Hygraph's API-first approach allows you to connect with a wide range of technologies and microservices. Source
Is Hygraph suitable for non-technical users?
Yes, Hygraph is praised for its ease of use and intuitive interface. Non-technical users can set up and manage content without developer intervention, making it accessible for both technical and non-technical teams. Source
Customer Proof & Recognition
Who are some notable customers using Hygraph?
Notable customers include Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See case studies
What industries are represented in Hygraph's case studies?
Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Source
We will show you how to easily build a streaming platform and bring different API pieces together with Hygraph.
Written by Mdu
on Aug 02, 2023
'While' Netflix still owns the biggest piece of the video-on-demand and video streaming market, services such as Amazon Prime are breathing down its neck. What if you want to enter the fray? After all, there is a market for special interest and niche content streaming.
You may not have the infrastructure of Disney+ or Hulu, but thanks to advancements in cloud computing, you don't necessarily need it. All you need to do is leverage the right tools.
The streaming platform project you have in mind will most likely require you to use a plethora of APIs and draw from a collection of disparate sources. The challenge is making these different pieces fit and work together. That’s where Hygraph enters the chat.
One use case where these features really shine is a video streaming platform, as you'll see in the following tutorial. After all, the best way to understand what a tool can do is by using it.
The application in this tutorial uses Next.js as the frontend framework, but you should be able to transfer some of the principles to your preferred framework.
This tutorial uses Cloudinary to host your movies.
Since metadata is a very important feature of streaming services, you need to find a source you can use to dynamically build descriptions for your videos. This guide uses OMDb.
The application initiates queries through GraphQL. Hygraph acts as the backend and connects to Cloudinary and OMDb using its remote sources feature.
Editor's Note
You can find the code for this project in its GitHub repo
Configure Hygraph
Sign up for Hygraph or log into your account if you already have one. On your Hygraph dashboard, click Add project.
Fill in the project name and description, select your region, and click Add projectagain.
Click the Set up your schema widget on the welcome screen. Alternatively, you can select the Schema menu item from the left panel.
On the new panel that appears, click + Add next to Models.
Fill out the form that pops up as follows:
Display name: Movie
API ID: Movie
Plural API ID: Movies
Description: Video Streaming Content
Click Add model.
Now that you've created your streaming content model, you can add the necessary fields to it. There are many fields you can pull from OMDb, but this tutorial keeps it simple and only uses four. You will find a panel on the left side of the window with a list of fields. Add the following to your schema:
Title: A single-line text field to store the video title. This will be used as an ID to fetch data from OMDb too. Make sure to use this as a title field.
Year: A number field with the year when the movie/episode was released.
The entire process is similar to adding a model, though you do get additional options such as validations and initial/default values. Keep everything simple for now. All you need to do is add a name and make sure the Use as Title Field checkbox is selected for the Title and unselected for the rest of the fields.
Click Content from the sidebar, then click the Movie model under Default Views.
Upload videos to Cloudinary
As mentioned earlier, this tutorial uses Cloudinary as the video library, so sign up for Cloudinary if you don't already have an account.
After logging in, click Media Library from the sidebar, then select Folders from the top menu bar. Click the Create A Folder icon underneath the navigation panel.
Name your folder Movies and click Save.
Open the new folder, and click Upload to upload your video.
In the screen that appears, expand the Advanced option and enter a Public ID. It’s a good idea to use the title of the movie/video you’re working with. Make a note of the Public ID, as you'll need it to retrieve the video later.
You can also attach tags to the video, which you can use for grouping later on.
Next, click Browse under the My Files tab.
Select a movie or a clip from your local system; depending on its size, it may take a few moments to upload. Cloudinary will inform you of a successful upload with a popup notification on your screen. Click the notification to refresh your list of assets and see the video. Do this for every video you want to add to your streaming service’s movie list.
Set up your frontend
This tutorial uses Next.js as your framework with Tailwind CSS.
Open a command line terminal of your choice (Command Prompt, PowerShell, etc.). Set the directory to the one you use for your programming projects, eg. Documents\Programming Projects\.
Enter and run the following command:
npx create-next-app
You'll be asked to name your project. You can call it hygraph-video-streaming or anything else you think is appropriate.
Select No when prompted if you'd like to use TypeScript and ESLint (respectively).
Select No when asked if you want to use the 'src/' directory, and No when asked if you want to use the experimental 'app/' directory.
Use Next/* as your import alias.
Change the directory to the newly created project folder:
cd hygraph-video-streaming
Install Tailwind CSS with its dependencies using the following command:
npm install -D tailwindcss postcss autoprefixer
Initialize Tailwind:
npx tailwindcss init -p
This generates the files tailwind.cofig.jsand postcss.config.js. They allow you to configure your project's themes, fonts, color schemes, plugins, and so on.
Open the tailwind.cofig.js in a code editor such as VS Code. You need to tell Tailwind where it can find all your project's templates, components, and plugins, so add the following code to the content list:
Next, navigate to the styles folder and open the globals.css file. Replace its contents with the following directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
This allows you to access Tailwind's CSS classes from all your components.
Next, create a simple navigation bar. Create a folder named components in your project's root folder. Change the directory to it and create a new file called navbar.jsx.
Now, it’s time to add some necessary functions and behaviors. Go back to your terminal and press Ctrl + C to terminate the batch job (ie, undeploy the application). Answer yes (Y) when asked to confirm.
Fetch the OMDb API key
Navigate to OMDb's API key page. Select the radio button labeled FREE, and new fields should appear on the form. Fill in the form with all the necessary details and then click Submit.
OMDb sends the generated API key along with a link to activate the email address you provided. You'll use the key to query your metadata later, so make sure to note the address attached to your API Key and activate it using the link OMDb sent you.
Add OMDB as a Remote Source in Hygraph
On the Schema page of your Hygraph dashboard, click Add next to Remote Sources to add OMDb’s REST API as a remote source. Fill out the Create Remote Source form as follows:
Display name: OMDb
Prefix: OMDb
Type: REST
Base URL:http://www.omdbapi.com/?i=tt3896198&apikey=[YourAPIKEY]
You can leave the Description field blank, but make sure to add your API Key to the Base URL. Finally, click Add.
Open the MOVIE model page and add a new REST field from the sidebar. Fill out the form as follows:
Display name: OMDB Meta Data
API ID: omdbMD
Remote source: OMDb
Method: GET
Return type: JSON
Path:&t={{doc.title}}&{{doc.year}}
Click Add.
Configure Hygraph and Cloudinary authentication
Since Hygraph features a direct integration for Cloudinary, you don't have to set up an additional remote source. Simply navigate to the Hygraph Cloudinary installation page then click on Install Cloudinary for Hygraph.
On the next screen, you must choose on which project and environment you'd like to install the Cloudinary app. Select Video Streaming for the project name and Master Environment for the environment, then click Install app.
On the app permission authorization screen, click Authorize app**.
Cloudinary will then direct you to the configuration screen where you must input your Cloudinary cloud name and API key. Both can be found using the Cloudinary console. Navigate to the Cloudinary dashboard and click Programmable Media (<o>) in the sidebar:
This screen allows you to see all your cloud credentials.
Copy the code in the Cloud Name and API Key widgets, paste it into the corresponding fields in the Hygraph Cloudinary configuration screen, and click Save.
Next, you must add the Cloudinary asset to your schema so you can access your video library. While you're still on the Hygraph dashboard, click on Schema on the left panel then select Movie from the Schema panel. Scroll through the list of fields on the far-right panel until you find the Cloudinary Asset entry. Single-click on it.
In the field configuration screen that launches, set the Display Name as Cloudinary Video Library. Leave everything else as is and click on Add.
Add content to Hygraph
To add content to Hygraph, click Content in the sidebar, select Movie under DEFAULT VIEWS, and then click Add entry.
Add your movie's public ID and the year of its release in the corresponding fields.
Please note that if your movie’s title contains special characters such as colons (:), semi-colons (;), or single inverted commas ('), you should replace them with URL encoding references. For instance, write Child’s Play as Child%27s Play. Alternatively, you can encode the title in your JavaScript/React code.
Next, click Add from Cloudinary.
In the Cloudinary asset picker screen that is launched, select the corresponding movie from your video library and then click Add & close:
Click Save and Publish and, when prompted, confirm your selection.
Follow the steps above for every movie in your library until you've populated your content list.
Secure access to the Hygraph content API
Since the Hygraph Content API rejects unauthenticated requests by default, you must create a permanent auth token on the Project Settings page to securely connect to it.
In the Permanent Auth Tokens section of the Project Settings page, click Add Token.
Enter a token name such as Movie Token and click Add & configure permissions.
On the token permissions page, copy and save the token value for later use, then click Add permission.
In the Add Permissions pop-up, select Movie from the Model dropdown list. Select the Read, Update, and Publish permissions checkboxes. Leave everything else as is and click Add.
Click API Access under Endpoints in the Settings pane. Copy and save the content API endpoint to use in your Next.js application.
Using GraphQL to fetch the metadata
Create a .env.local in the root of your project directory, and add the following values to it:
HYGRAPH_URL=<CONTENT_API_ENDPOINT_FROM_HYRAPH>
API_TOKEN=<PERMANENT_AUTH_TOKEN_FROM_HYGRAPH>
Replace the tags with the actual values you copied and saved earlier on.
Now you need to install the GraphQL client's dependencies. Execute the following command:
npm i graphql graphql-request
Create a new file named graphql.js at the project root. Enter the following code to initialize it:
const{ movies }=await hygraph.request(movieQuery);
return{
props:{
movies
},
};
}
This builds the GraphQL query and executes and returns the results as a set of properties (movies), which will be passed to the Home function.
Add the necessary fields to the Home function by looping through the static properties (Query Results) and adding a video player for each loop. You can use the results to display the omdbMD property to display the video's metadata, with fields like year, plot, genre, and so on.
The complete index file should resemble the following file.
Your video streaming website is functionally ready! You can now personalize the design and add more components as you see fit. You can use the OMDb metadata to generate thumbnails for your movies, too. Once it looks presentable, you can deploy and publish it.
This tutorial showed you how to use Hygraph to create a streaming video platform.
It goes without saying that streaming platforms have complex architecture; they can take months to build. But with Hygraph, what would take you a month can take you a week or a day. Its low-code approach decreases manual coding and debugging, and it gives you a central point for altering or keeping track of your software stack, which ultimately grants your products greater interoperability and flexibility.
Mdu Sibisi is an Oracle-certified software developer and blogger with over ten years of experience, primarily in object-orientated languages. He's been writing about tech for eight years.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.