Virtual Events

Run a live auction with real-time bidding

Sign in as the auctioneer or as a bidder and run a live auction: bids, chat, raised paddles, and the auctioneer's calls reach everyone in the room as they happen. Built with React and the PubNub JavaScript SDK.

Start demo

About this demo

A live auction room, end to end

This demo is a live auction for collectibles, such as graded trading cards, sneakers, and cars. On the start page, pick a demo account: the auctioneer, James Christie, or a bidder, such as Alice Chen. Bidders join the live auction, bid, chat, and raise a paddle. The auctioneer runs the sale from a console: moves through the lots, calls Going once, Going twice, and Sold, and sends announcements. Open the demo in two windows with different accounts to see both sides. The auctions, lots, and bids are sample data. The ? button starts a guided tour of how the room is built.

The app is built with React, TypeScript, and Vite, and uses the PubNub JavaScript SDK. There's no auction server. Auctions, lots, and user profiles are stored in App Context. Bids, chat, and the auctioneer's commands are messages on PubNub channels. Each session gets an Access Manager token from a small token service.

The video panel is built for the auctioneer's camera, streamed with Red5 Pro over WebRTC. When no live stream is connected, the room plays a recorded video instead.

Features

What you can do

Bid in real time
Pick +$100, +$500, +$1K, or +$5K, or type your own amount. Each bid is published to the auction's bids channel. Every bidder's current price and leader update, and the bid shows up on the auctioneer's console.
Learn how it works
Catch up when you join
When you enter the room, it loads the latest bids and chat messages from Message Persistence. You see the bid history and the conversation so far, then new messages arrive live.
Learn how it works
Chat with the room
Chat runs on its own channel. The same feed shows each new bid and the auctioneer's calls and announcements, so the conversation and the sale stay in one place.
Learn how it works
Raise your paddle
Tap the hand to raise your paddle. It's sent as a signal, a small message that isn't stored. The auctioneer's console shows who raised a paddle for a few seconds.
Learn how it works
Call Going once, Going twice, Sold
Sign in as the auctioneer to run the sale. Each button publishes a control message, and every bidder sees the same Going once, Going twice, or Sold banner. Next lot, pause, and end work the same way, and the auction's state is saved in its App Context channel metadata.
Learn how it works
See who's watching
The viewer count in the header comes from Presence. A Here Now call gives the count when you join, and presence events update it as people enter and leave the room.
Learn how it works