Pick a fan and join a simulated football match. Chat with other fans, react with emoji, predict the result, vote in polls, and earn points. Built with Next.js and the PubNub Chat SDK.
This demo is a fan app for a football match between Leeds United and Southampton. A Node.js simulator replays the match on a timeline. It publishes score and stats, commentary, crowd chat, reactions, and polls, each on its own PubNub channel. The web app is built with Next.js and the PubNub Chat SDK, which runs on the PubNub JavaScript SDK.
When you pick a fan, the app gets an Access Manager token for that user and loads their profile and points from App Context. The chat checks the user's mute and ban status and blocks the message box when a moderator restricts them. The "Ask me how?" box calls a PubNub Function over HTTP and shows its answer. The source code is open on GitHub, and the full-screen version adds guides that explain how each part is built.
Send messages in the Game Chat next to the simulated crowd. The header shows how many fans are online, counted with Presence.
Type @ and the first letters of a name, then pick a fan from the list. That fan gets a "You were mentioned" alert. You can also add emoji reactions to chat messages.
Tap an emoji under the stream. It is published to everyone watching and floats up on every screen, together with the reactions of the simulated crowd.
Score, cards, shots, pass accuracy, and player stats update as the simulator publishes them, and commentary arrives in its own feed. The latest stats load from Message Persistence when you join.
Pick Leeds, Southampton, or a draw under the stream, and answer polls as they open during the match. Votes and results travel as messages on their own channels.
Correct predictions, poll answers, and some ads give you points. Your score is saved in your App Context user profile, and the header updates when it changes.
Clone the finished app, add your PubNub keys, and run the web app and the match simulator side by side.
GitHub
The complete source. Add your keys to web/.env and backend/.env, run yarn install and yarn dev in web, then npm install and npm run generator in backend (Node.js 22 or later).
git clone https://github.com/PubNubDevelopers/pn-solution-live-events.gitThis live-streaming demo shows how you can create interactive experiences that engage audiences in real-time as well as tools to moderate your audience.
Streaming data is a continuous flow of information from various sources in real time. PubNub’s live streaming APIs enable you to generate, process, and deliver streaming data to any number of subscribers.
Learn how a patient engagement platform can deliver comprehensive care.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
