This is a Next.js project built over Tinybird project.
https://tinybirdco.github.io/video-streaming-dashboard/
- Create a Python virtual environment:
python3 -m venv .video-streaming-dashboard-env
source .video-streaming-dashboard-env/bin/activate- Install all dependencies:
pip install -r requirements.txtcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install 18.17.0
nvm use 18.17.0
npm install -g npm@latest
npm install -g [email protected]
pnpm install- Start the Tinybird project:
tb auth --token your_token
tb init --folder tinybirdThe structure of this Tinybird project is as follows:
tinybird
├── datasources
│ └── video_events.datasource
└── pipes
├── get_events_by_date.pipe
├── get_events_by_platform.pipe
├── get_last_events.pipe
└── get_total_events.pipe
All endpoints are fed by the video_events data source. This has an APPEND only TOKEN and the endpoints shared the same READ only TOKEN.
In the data-generator folder there is a Mockingbird schema that you could use in Mockingbird to start streaming data into video_events:
```json
{
"timestamp": {
"type": "mockingbird.timestampNow"
},
"event_id": {
"type": "string.uuid"
},
"user_id": {
"type": "number.int",
"params": [
{
"min": 100000,
"max": 999999
}
]
},
"platform": {
"type": "mockingbird.pickWeighted",
"params": [
{
"values": [
"Web",
"Mobile",
"SmartTV",
"Tablet"
],
"weights": [
50,
30,
10,
10
]
}
]
},
"video_id": {
"type": "number.int",
"params": [
{
"min": 5000,
"max": 10000
}
]
},
"subscription": {
"type": "mockingbird.pickWeighted",
"params": [
{
"values": [
"Free",
"Basic",
"Premium",
"VIP"
],
"weights": [
60,
20,
15,
5
]
}
]
},
"watch_duration": {
"type": "number.float",
"params": [
{
"min": 1.0,
"max": 180.0
}
]
},
"utm_source": {
"type": "mockingbird.pickWeighted",
"params": [
{
"values": [
"email",
"social_media",
"ads",
"direct"
],
"weights": [
20,
50,
25,
5
]
}
]
}
}
```
As a result you will get an ndjson file like with lines like this:
{
"timestamp":"2024-06-26T09:19:04.630Z",
"event_id":"0f198e92-b53e-4905-a82a-4b1a5f2a3bf7",
"user_id":600632,"platform":"Web","video_id":6012,
"subscription":"Basic",
"watch_duration":111.85545799834654,
"utm_source":"social_media"
}First, create a .env (you can use .env.local as template) file in the root of the project and add the following:
NEXT_PUBLIC_DASHBOARD_TOKEN=your_tokenThen, run the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result