Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hookdeck/supavlog
SupaVlog - Open Source Vlog Application Template
https://github.com/hookdeck/supavlog
event-driven-application event-driven-architecture getstream hookdeck nextjs supabase vlog vlogging webhooks
Last synced: 2 months ago
JSON representation
SupaVlog - Open Source Vlog Application Template
- Host: GitHub
- URL: https://github.com/hookdeck/supavlog
- Owner: hookdeck
- Created: 2024-01-18T09:06:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-18T18:23:10.000Z (5 months ago)
- Last Synced: 2024-08-18T21:33:28.481Z (5 months ago)
- Topics: event-driven-application, event-driven-architecture, getstream, hookdeck, nextjs, supabase, vlog, vlogging, webhooks
- Language: TypeScript
- Homepage: https://supavlog.com
- Size: 6.61 MB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
SupaVlog - Vlog Application Starter Kit
Built with Supabase, Stream, Hookdeck, & Next.js.
Read the [SupaVlog blog post](https://hookdeck.com/blog/supavlog-vlog-start-kit-supabase-stream-hookdeck-nextjs?ref=github-supavlog) for more details on the application event-driven architecture (systems, components, and component interactions).
## Features
- Authentication with [Supabase](https://supabase.com?ref=github-supavlog)
- Video recording with [Stream](https://getstream.io?ref=github-supavlog)
- Webhook event handling with [Hookdeck](https://hookdeck.com?ref=github-supavlog)
- Stream video storage with Supabase
- Built with [Next.js](https://nextjs.org?ref=github-supavlog)
### Limitations
- A free Supabase plan has 1GB of storage and a maximum file size of 50MB. Videos > 50MB will fail to upload.
## Demo
[](https://supavlog.com)
## Running your own SupaVlog
To set up your own instance of SupaVlog you will need:
- A [Supabase](https://supabase.com?ref=github-supavlog) account and a new project created
- A [Stream](https://getstream.io?ref=github-supavlog) account with a project created
- A [Hookdeck](https://hookdeck.com?ref=github-supavlog) account
- A [Vercel](https://vercel.com?ref=github-supavlog) 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.
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhookdeck%2Fsupavlog&env=NEXT_PUBLIC_SIGNUP_ENABLED,NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_ANON_KEY,NEXT_PUBLIC_STREAM_API_KEY,STREAM_API_SECRET,VIDEO_STORAGE_PLATFORM&demo-title=SupaVlog&demo-url=https%3A%2F%2Fsupavlog.com&demo-image=https%3A%2F%2Fgithub.com%2Fhookdeck%2Fsupavlog%2Fraw%2Fmain%2Fdocs%2Fsupavlog-capture.png)
### Hookdeck
Create two connections within Hookdeck, both using the same [Source](https://hookdeck.com/docs/sources?ref=github-supavlog).
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](https://hookdeck.com/docs/destinations?ref=github-supavlog) within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your **live** `SUPABASE_ANON_KEY`as 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](https://supabase.com/docs/guides/cli/getting-started) 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](https://hookdeck.com/docs/sources?ref=github-supavlog).
Use the Source URL as the Webhook URL in Stream:
For each [Destination](https://hookdeck.com/docs/destinations?ref=github-supavlog) within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your **local** `SUPABASE_ANON_KEY`as the bearer token.
To set up the Hookdeck CLI to connect to Hookdeck and tunnel the events locally:
- Install the [Hookdeck CLI](https://hookdeck.com/docs/cli?ref=github-supavlog)
- Run `npm run hookdeck-local`
## Feedback and issues
Please file feedback and issues over on the [SupaVlog GitHub repo](https://github.com/hookdeck/supavlog/issues/new/choose).
## Useful resources
- [Supabase auth docs](https://supabase.com/docs/guides/auth?ref=github-supavlog)
- [Supabase storage docs](https://supabase.com/docs/guides/storage?ref=github-supavlog)
- [Stream video & audio docs](https://getstream.io/video/docs/?ref=github-supavlog)
- [Hookdeck docs](https://hookdeck.com?ref=github-supavlog)
# Attribution