SupaVlog - Vlog Application Starter Kit

Built with Supabase, Stream, Hookdeck, & Next.js.

Read the SupaVlog blog post for more details on the application event-driven architecture (systems, components, and component interactions).

Features

• Authentication with Supabase
• Video recording with Stream
• Webhook event handling with Hookdeck
• Stream video storage with Supabase
• Built with Next.js

Limitations

• A free Supabase plan has 1GB of storage and a maximum file size of 50MB. Videos > 50MB will fail to upload.

Demo

Running your own SupaVlog

To set up your own instance of SupaVlog you will need:

• A Supabase account and a new project created
• A Stream account with a project created
• A Hookdeck account
• A Vercel account

Supabase

Create a new Supabase project and up the Supabase CLI to use your project:

supabase link --project-ref {YOUR_PROJECT_ID}

Edge Functions

Set environmental variables for the Edge Functions:

supabase secrets set NEXT_PUBLIC_SUPABASE_URL={SUPABASE_URL}
supabase secrets set X_SUPABASE_API_SECRET={SUPABASE_SERVICE_SECRET}

Deploy your Edge Functions:

supabase functions deploy

Database

Create the schema by copying the contents of supabase/schema.sql and running it in the SQL editor for your Supabase project.

Authentication

Set the Site URL configuration for Supabase Authentication:

Storage

Create a public storage bucket called videos.

Vercel

To deploy this Next.js application to Vercel you will need to populate the following environment variables:

# set to false if you do not wish to allow signup
NEXT_PUBLIC_SIGNUP_ENABLED=true

NEXT_PUBLIC_SUPABASE_URL={your Supabase project URL}
NEXT_PUBLIC_SUPABASE_ANON_KEY={your Supabase project Anon Key}

NEXT_PUBLIC_STREAM_API_KEY={your Stream project API key}
STREAM_API_SECRET={your Stream project API secret}

VIDEO_STORAGE_PLATFORM=supabase

You can either sync with your own repository or use the Deploy button below.

Hookdeck

Create two connections within Hookdeck, both using the same Source.

Set authentication up on the Source, using HMAC, SHA-256, and hex. Enter X-SIGNATURE for the Header Key and use the Stream API secret as the Webhook Signing Secret.

Set a filter on each connection.

For upload-video:

{
  "type": {
    "$eq": "call.recording_ready"
  }
}

For upload-thumbnail:

{
  "type": {
    "$eq": "call.ended"
  }
}

For each Destination within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your live SUPABASE_ANON_KEYas the bearer token.

Stream

Webhooks

Use the Hookdeck prod-stream-inbound Source URL as the Webhook URL in Stream:

Call types

In the Stream dashboard, under Call Types, select the default call type.

Enable thumbnails:

Click Submit to save.

Clone and run locally

Supabase functions

To run locally you will need the Supabase CLI installed.

You can then run the functions using the environment variables defined in .env.local by running:

npm run supabase-functions

Hookdeck

Create two connections within Hookdeck, both using the same Source.

Use the Source URL as the Webhook URL in Stream:

For each Destination within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your local SUPABASE_ANON_KEYas the bearer token.

To set up the Hookdeck CLI to connect to Hookdeck and tunnel the events locally:

• Install the Hookdeck CLI
• Run npm run hookdeck-local

Feedback and issues

Please file feedback and issues over on the SupaVlog GitHub repo.

Useful resources

• Supabase auth docs
• Supabase storage docs
• Stream video & audio docs
• Hookdeck docs

Attribution

• SVG video vector - SVG Repo