The Good Tech Companies - "Build a High-Performance Video Streaming App with ScyllaDB and NextJS"

Episode Date: August 4, 2025

This story was originally published on HackerNoon at: https://hackernoon.com/build-a-high-performance-video-streaming-app-with-scylladb-and-nextjs. Build a low-latency video streaming app using ScyllaDB and NextJS with real-time features, optimized data modeling, and a GitHub-ready sample project. Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #scylladb-video-streaming-app, #video-streaming-app, #low-latency-database, #nosql-data-modeling, #real-time-video, #developer-tutorial, #scylladb-sample-app, #good-company, and more. This story was written by: @scylladb. Learn more about this writer by checking @scylladb's about page, and for more stories, please visit hackernoon.com. This guide walks you through building a video streaming app using ScyllaDB and NextJS. It explains the app’s features, tech stack, and data modeling for low latency. Includes schema design, UDFs, and a GitHub repo for hands-on learning.

This audio is presented by Hacker Noon, where anyone can learn anything about any technology. Build a high-performance video streaming app with SillyDB and Next.js By SkylaDB, we created a new video streaming app to help you learn about SillyDB. This blog covers its features, tech stack, and data modeling. We just published a new SillyDB sample application, a video streaming app. The project is available on GitHub. This blog covers the video streaming application's features, tech stack, and breaks down the data modeling process.

Video streaming app features the app has a minimal design with the most essential video streaming application features. List all videos, sorted by creation date, home page. List videos that you started watching. Watch video. Continue watching a video where you left off. Display a progress bar under each video thumbnail. Technology stack programming language. TypeScript.

Database. Silidibi. Framework. Next.js. Pages router. Component library. Material underscore UI, using Cilidb for low latency video streaming applications. Cilidb is a low latency and high performance NoSQL database compatible with Apache Cassandra and DynamoDB. It is well suited to handle the large scale data storage and retrieval requirements of video streaming applications.

Cilidb has drivers in all the popular programming languages and, as this sample application demonstrates, it integrates well with modern web development frameworks like Next.js. Low latency in the context of video streaming services is crucial for delivering a seamless user experience. To lay the groundwork for high performance, you need to design a data model that fits your needs. Let's continue with an example data modeling process to see what that looks like.

Video streaming app data modeling. In the Silidibi University data modeling course, we teach that NoSQL data modeling should always start with your application and queries first. Then you work backwards and create the schema based on the queries you want to run in your app. This process ensures that you create a data model that fits your queries and meets your requirements. With that in mind, let's go over the queries that

our video streaming app needs to run on each page load. Continue watching on this page, you can list all the videos that they've started to watch. This view includes the video thumbnails and the progress bar under the thumbnail. Query. GetWatchProgress. Schema. WatchHistoryTable. For this query, it makes sense to define backquote user underscore id backquote as the partition key because that is the filter we use to query the watch history table. Keep in mind that this schema might need to be updated later if there is a query that requires filtering on other columns beyond the backquote user underscore id backquote. For now, though, this schema is correct for the defined query.

Besides the progress value, the app also needs to fetch the actual metadata of each video, for example, the title and the thumbnail image. For this, the backquote video backquote table has to be queried. Query. Get video metadata. Notice how we use the in operator and not equals because we need to fetch a list of videos not just a single video. Schema. Video table. For the video table, let's define the backquote id backquote as the partition key because that's the only filter we use in the query. Page. Watch video if you click on any of the Watch buttons. They will be redirected to a page with a video player where they can start and pause the video. Query. Get video content. This is a very similar query to the one that runs on the continue watching page.

Thus, the same schema will work just fine for this query as well. Schema. Video table. Page. Most recent videos finally. Let's break down the most recent videos page, which is the home page of the application. We analyze this page last because it is the most complex one from a data modeling perspective. This page lists 10 of the most recently UP-loaded videos that are available in the database ordered by the video creation date. We will have to fetch these videos in two steps. First get the timestamps, thing at the actual video content. Query, get the most recent 10 videos timestamp.

You might notice that we use a custom function called backquote top 10, backquote. This is not a standard function in SillyDB. It's a UDF, user defined function, that we created to solve this data modeling problem. This function returns an array of the most recent backquote created underscore add backquote timestamps in the table. Creating a new UDF in Silidibi can be a great way to solve your unique data modeling challenges. These timestamp values can then be used to query the actual video content that we want to show on the page. Query. Get metadata for those videos. Schema. Recent videos.

In the recent videos materialized view, the backquote created underscore add backquote column is the primary key because we filter by that column in our first query to get the most recent timestamp values. Be aware that in some cases, this can cause a hot partition. Furthermore, the UI also shows a small progress bar under each video's thumbnail which indicates the progress you made watching that video. To fetch this value for each video, the app has to query the backquote watch history backquote table. Query. Get watch progress for each video. Schema. Watch history. You might have noticed that the watch history table was already used in a previous query

to fetch data. Now this time, the schema has to be modified slightly to fit this query. Let's add backquote Video ID backquote as a clustering key. This way, the query to fetch Watch Progress will work correctly. That's it. Now let's see the final database schema. Final database schema. User defined function for the most recent videos page.

This UDF uses Lua, but you could also use Wasm to create UDFs in Silidibi. Creating the function make sure to enable UDFs in the Skyla. YAML configuration file, location, etc. Skyla, Skyla, YAML, clone the repo and get started. To get started, clone the repository. Install the dependencies. Modify the configuration file. Migrate the database and insert sample data. Run the server.

Wrapping up. We hope you enjoy our video streaming app and it helps you build low latency and high performance applications with Silidibi. If you want to keep on learning, check out Cilidibi University where we have free courses on data modeling, Cilidibi drivers and much more. If you have questions about the video streaming sample app

or Cilidibi, go to our forum and let's discuss more Cilidibi sample applications, CarePet, IOT, Cloud Getting Started Guide, Feature Store, Relevant Resources, Video Streaming App GitHub Repository, UDFs in Cilidibi, How Cilidibi Distributed Aggregates Reduce Query Execution Time Up to 20x WasmTime, Supporting UDFs in Cilidibi with WebAssembly, Cilidibi Documentation, Cilidibi Getting Started About Attila Tothatila Toth is a developer advocate at Siladibi. He writes tutorials and blog posts, speaks at events, creates demos and sample applications to help developers build high-performance applications. Thank you for listening to this Hacker Noon story, read by Artificial Intelligence.

Visit HackerNoon.com to read, write, learn and publish.