Jamstack Sync Stream Video

Jamstack Sync Stream Video is a live watch party demonstration that shows how to add realtime, synchronized video streaming to an open-source Jamstack app.

What is Jamstack Sync Stream Video?

Jamstack Sync Stream Video is a live watch party app built on the Jamstack architecture, hosted at jamstack-watch-party.ably.dev. It lets a host create a private watch party room, invite friends, and watch videos together with play, pause, and seek controls that stay synchronized for every participant. The app takes a video library managed through a Strapi CMS and streams playback using Ably's pub/sub messaging, with Nuxt.js generating the server-side rendered frontend and Netlify providing deployment. This repository is a reference implementation for building realtime shared experiences in Jamstack applications.

Key Features

• Private watch party rooms — A host can create a private room and invite friends; participants can join and see who is online via presence.
• Synchronized video playback — The host controls play, pause, and seek events, and Ably propagates those events so all viewers stay in sync.
• Live comments — Viewers can share realtime comments during the party, delivered through the same pub/sub channels.
• Video library — The host selects videos from a library managed in Strapi's admin panel, with public API access configured for the app.
• Jamstack architecture — Combines Nuxt.js for server-side rendered static sites, Strapi as a headless CMS, Ably for realtime messaging, and Netlify for deployment.
• Local development setup — Two components run locally: a Strapi API server on port 1337 and a Nuxt app on port 3000, with clear setup commands in the README.

Who is it for?

• Jamstack developers — Use this project as a reference to see how realtime messaging (Ably) integrates with Nuxt.js and Strapi.
• Product teams building watch-party features — The app demonstrates the core user flows: room creation, invitation, synchronized playback, and live comments.
• Streaming platforms and fan communities — Offer a shared viewing experience where remote friends can watch videos together with synchronized controls.

What can you do with Jamstack Sync Stream Video?

• Host a watch party — Create a private room, choose a video from the Strapi-managed library, and control playback for all participants.
• Participate with friends — Join a room, watch the synchronized video stream, post comments, and see which participants are online.
• Extend the codebase — Reuse the Nuxt.js and Strapi setup to add realtime features like chat, polling, or shared state to your own Jamstack project.

How does Jamstack Sync Stream Video work?

To run locally, start the Strapi API server with npm run develop in the api folder, then add videos via the admin panel at http://localhost:1337/admin. Next start the Nuxt app with npm run dev in the watch-party folder and open http://localhost:3000/. The host selects a video, and every play, pause, and seek action is published over Ably and applied to all connected clients.

FAQ

Does the host control video playback for everyone?

Yes, the host has full control of playback, including play, pause, and seek. These events are sent through Ably and applied to all participants, keeping everyone in sync.

How do I add videos to the library?

You add videos through Strapi's admin panel at http://localhost:1337/admin. After creating an admin user, you must set the Public Role permissions to allow find and find one on videos and auth on the ably-auth endpoint.

What technologies are used?

The stack is Nuxt.js for the frontend, Strapi as the headless CMS, Ably for realtime pub/sub messaging, and Netlify for building and deploying. This combination supports the Jamstack architecture.