video-streaming's Introduction

Video streaming - Next.js + ScyllaDB application

This repository contains a sample video streaming application built with Blitz.js, Material-UI and ScyllaDB.

Prerequisites

Get started

Clone the repository

git clone https://github.com/scylladb/video-streaming

Configuration file

Create a new configuration file named .env.local in the project's root folder. This file contains your ScyllaDB cluster credentials:

# .env.local
APP_BASE_URL="http://localhost:8000"
SCYLLA_HOSTS="node-0.aws_eu_central_1.xxxxx.clusters.scylla.cloud"
SCYLLA_USER="scylla"
SCYLLA_PASSWD="xxxxx"
SCYLLA_KEYSPACE="streaming"
SCYLLA_DATACENTER="AWS_EU_CENTRAL_1"

You can copy the SCYLLA_HOSTS, SCYLLA_USER, SCYLLA_PASSWD and SCYLLA_DATACENTER values from your ScyllaDB Cloud dashboard. Keyspace should be streaming.

Install project requirements

npm install

Create database schema and tables

Run the following command to migrate the database and load sample data.

npm run migrate

This creates the following structure in your database:

CREATE KEYSPACE IF NOT EXISTS streaming WITH replication = { 'class': 'NetworkTopologyStrategy', 'replication_factor': '3' };

CREATE TABLE streaming.video (
    id TEXT,
    content_type TEXT,
    title TEXT,
    url TEXT,
    thumbnail TEXT,
    created_at TIMESTAMP,
    PRIMARY KEY (id, created_at)
);

CREATE TABLE streaming.watch_history (
	user_id UUID,
	video_id TEXT,
	progress INT,
	watched_at TIMESTAMP,
	PRIMARY KEY (user_id, video_id)
);

Start the app:

npm run dev
> [email protected] dev
> blitz dev

✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
- ready started server on 0.0.0.0:3000, url: http://localhost:3000

Go to http://localhost:3000 to open the app.

video-streaming's People

Contributors

Stargazers

Watchers

video-streaming's Issues

App Structure: Minor improvements needed

Hey! I truly liked the concept of the project and sure it will be helpful on my studies.

When I was testing it I found out a few things to improve on the app structure, to give more readability and use some types:

Recover the Progress in the ListVideos page and not only at ContinueVideos;
- Since everytime that I join a video that I started to watch, it goes back to zero and it's kinda annoying.
Add validations if there's no video on ContinueVideos list. Now it's crashing if there's no video.
Missing a core type for Video and WatchHistory;
Segregate Back-end from Front-end (I think that it will improve it a lot);
Resize cards to a minimum width since there's huge titles to cover;
Replace all statements to PreparedStataments;
Give some cool spacing for code readability;
Add a progress bar into ListVideos and ContinueVideos page.