{"id":24087940,"url":"https://github.com/tinybirdco/video-streaming-dashboard","last_synced_at":"2025-09-01T12:07:35.173Z","repository":{"id":246220905,"uuid":"820392080","full_name":"tinybirdco/video-streaming-dashboard","owner":"tinybirdco","description":"A basic dashboard page using Tinybird charts and nextjs","archived":false,"fork":false,"pushed_at":"2024-06-28T13:25:33.000Z","size":6262,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-08T02:18:36.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinybirdco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-26T11:29:03.000Z","updated_at":"2024-06-28T13:25:37.000Z","dependencies_parsed_at":"2025-02-27T05:24:33.598Z","dependency_job_id":"c23acd64-f562-460d-89c3-fdbb5c967e7b","html_url":"https://github.com/tinybirdco/video-streaming-dashboard","commit_stats":null,"previous_names":["tinybirdco/video-streaming-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tinybirdco/video-streaming-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fvideo-streaming-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fvideo-streaming-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fvideo-streaming-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fvideo-streaming-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinybirdco","download_url":"https://codeload.github.com/tinybirdco/video-streaming-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fvideo-streaming-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273122120,"owners_count":25049539,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-10T03:56:20.468Z","updated_at":"2025-09-01T12:07:35.106Z","avatar_url":"https://github.com/tinybirdco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Video Streaming Dashboard\n\nThis is a [Next.js](https://nextjs.org/) project built over Tinybird project.\n\n[https://tinybirdco.github.io/video-streaming-dashboard/](https://tinybirdco.github.io/video-streaming-dashboard/)\n\n![Dashboard Screenshot](assets/dashboard.png)\n\n## Getting Started\n\n1. Create a Python virtual environment:\n\n```bash\npython3 -m venv .video-streaming-dashboard-env\nsource .video-streaming-dashboard-env/bin/activate\n```\n\n2. Install all dependencies:\n\n```bash\npip install -r requirements.txt\n```\n\n```bash\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash\nnvm install 18.17.0\nnvm use 18.17.0\nnpm install -g npm@latest\nnpm install -g pnpm@7.30.5\npnpm install\n```\n\n3. Start the Tinybird project:\n\n```bash\ntb auth --token your_token\ntb init --folder tinybird\n```\n## Tinybird Project\n\nThe structure of this Tinybird project is as follows:\n\n```\ntinybird\n├── datasources\n│   └── video_events.datasource\n└── pipes\n    ├── get_events_by_date.pipe\n    ├── get_events_by_platform.pipe\n    ├── get_last_events.pipe\n    └── get_total_events.pipe\n```\n\nAll endpoints are fed by the `video_events` data source. This has an `APPEND` only TOKEN and the endpoints shared the same `READ` only TOKEN.\n\n## Start streaming data with Mockingbird\n\nIn the `data-generator` folder there is a Mockingbird schema that you could use in [Mockingbird](https://mockingbird.tinybird.co/) to start streaming data into `video_events`:\n\n\u003cdetails\u003e\n```json\n{\n    \"timestamp\": {\n      \"type\": \"mockingbird.timestampNow\"\n    },\n    \"event_id\": {\n      \"type\": \"string.uuid\"\n    },\n    \"user_id\": {\n      \"type\": \"number.int\",\n      \"params\": [\n        {\n          \"min\": 100000,\n          \"max\": 999999\n        }\n      ]\n    },\n    \"platform\": {\n      \"type\": \"mockingbird.pickWeighted\",\n      \"params\": [\n        {\n          \"values\": [\n            \"Web\",\n            \"Mobile\",\n            \"SmartTV\",\n            \"Tablet\"\n          ],\n          \"weights\": [\n            50,\n            30,\n            10,\n            10\n          ]\n        }\n      ]\n    },\n    \"video_id\": {\n      \"type\": \"number.int\",\n      \"params\": [\n        {\n          \"min\": 5000,\n          \"max\": 10000\n        }\n      ]\n    },\n    \"subscription\": {\n      \"type\": \"mockingbird.pickWeighted\",\n      \"params\": [\n        {\n          \"values\": [\n            \"Free\",\n            \"Basic\",\n            \"Premium\",\n            \"VIP\"\n          ],\n          \"weights\": [\n            60,\n            20,\n            15,\n            5\n          ]\n        }\n      ]\n    },\n    \"watch_duration\": {\n      \"type\": \"number.float\",\n      \"params\": [\n        {\n          \"min\": 1.0,\n          \"max\": 180.0\n        }\n      ]\n    },\n    \"utm_source\": {\n      \"type\": \"mockingbird.pickWeighted\",\n      \"params\": [\n        {\n          \"values\": [\n            \"email\",\n            \"social_media\",\n            \"ads\",\n            \"direct\"\n          ],\n          \"weights\": [\n            20,\n            50,\n            25,\n            5\n          ]\n        }\n      ]\n    }\n  }\n```\n\u003c/details\u003e\n\nAs a result you will get an ndjson file like with lines like this:\n\n```json\n{\n\"timestamp\":\"2024-06-26T09:19:04.630Z\",\n\"event_id\":\"0f198e92-b53e-4905-a82a-4b1a5f2a3bf7\",\n\"user_id\":600632,\"platform\":\"Web\",\"video_id\":6012,\n\"subscription\":\"Basic\",\n\"watch_duration\":111.85545799834654,\n\"utm_source\":\"social_media\"\n}\n``` \n\n## Launch Nextjs app\n\nFirst, create a `.env` (you can use `.env.local` as template) file in the root of the project and add the following:\n\n```bash\nNEXT_PUBLIC_DASHBOARD_TOKEN=your_token\n```\n\nThen, run the development server:\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fvideo-streaming-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinybirdco%2Fvideo-streaming-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fvideo-streaming-dashboard/lists"}