Video community site with real-time live chat for an independent creator

The challenge

An independent UK creator who publishes history videos needed a website to host his video library, build a community and run live sessions with his audience. He wanted a clean image-grid home page, paged video collections, a forum where members could post without waiting for approval, a portfolio and a page for supporters.

Live sessions raised a second problem. The client already had a PHP chat page and a control page for moderating it, but new messages were fetched by repeated AJAX polling, so they arrived late and the room fell out of step with the stream. His existing shared hosting could not run the Node.js process a real-time fix required.

What we did

• Site build. We set up the site on OpenCart and adapted the default theme to the client's design: an image-box home grid, video banner, menus and contact page, with currency and shop elements removed.
• Video, forum and portfolio modules. We built video pages in sets of 5 and 50 managed from the admin, a forum module written from scratch, an audio page, an HTML portfolio with lightbox and inline video, a supporter page and an admin-only hit counter. We also installed a Stripe payment gateway.
• Live chat features. We extended the client's chat with moderator tools, hearts, first-to-third award badges, highlighted moderator replies, a pause popup, notification buttons, ban and unban, auto-scroll and an add-to-home-screen icon.
• Real-time messaging. We replaced polling with WebSockets through a Node.js app, tested it on our own server and deployed it once the site had moved.
• Hosting and hardening. We moved three of the client's sites to a single cPanel account on our hosting with Node.js support and seven-day backups, and switched the nameservers. We also moved the admin area to a non-standard path, added an extra admin login layer and fixed SSL-related theme issues.

Tech stack

PHP, MySQL, OpenCart 3.0.3.8, Node.js, WebSocket, AJAX, HTML/CSS/JavaScript, cPanel, Stripe, YouTube embeds