Overview 🔗

A video event platform for JPCC.org, enabling video streaming and on-demand content consumption. Built for one of Indonesia’s largest church communities to deliver sermons, events, and conferences to their congregation online.

Role & Context 🔗

As a sub-contracted frontend engineer through Studio Alva, I led the web frontend development — building the video player experience, live chat, and user engagement features. Worked closely with the design team to deliver a polished streaming experience.

Key Features 🔗

Video Streaming 🔗

Video playback powered by video.js and Bitmovin Player, with quality selection and YouTube integration.

Live Chat 🔗

Real-time chat during events using Pusher for WebSocket communication, with emoji reactions and interactive engagement.

Event Pages 🔗

Server-rendered event listing and detail pages for all services and events.

Social Sharing 🔗

Share buttons via react-share for spreading event pages.

Build Notes 🔗

Dual Video Player Setup 🔗

Two video player integrations were needed: video.js for standard YouTube content with quality selection, and Bitmovin Player for premium streaming features. This gave flexibility for different content types — sermon recordings handled well by video.js, while special events needed Bitmovin’s more capable player.

Server-Rendered Content 🔗

All content pages use server-side rendering via getServerSideProps. This ensures event pages always show up-to-date information (schedule changes, new events) without needing to rebuild or redeploy. Video and chat components hydrate client-side for interactive features that don’t need SEO.

Real-Time Chat 🔗

Live chat during events uses Pusher for WebSocket communication. The chat component supports emoji reactions and integrates with the video stream timing.