08 / 08Esports event
Wexentra.
A final's site: countdown, bracket picks, schedule, teams, a live stream with chat and seats from a 3D arena.
The idea
An esports league holding its final in an arena for the first time. Fans need the bracket, the live match and a clear way to pick seats.
What's inside
A countdown and the live match on the home page, bracket predictions, a schedule, team rosters, a stream with chat and tickets picked block by block in a 3D model of the arena.
- Pages
- 6
- Teams
- 4
- Typical timeline
- About 1 week
Things to try
- 01
3D seat picker
Turn the arena, point at a block for its price and press it to choose.
- 02
Bracket
Call both semi finals and the champion.
- 03
Stream and chat
The live match with its score, chat and predictions.
- 04
Teams
Every roster with roles and ratings to follow.
How the demo is built
4 layers, from the screens people use down to the servers. Scroll and the demo comes apart into them.
- 01InterfaceThe screens people see and tap.
- 02ComponentsButtons, cards and forms, built once and reused across the site.
- 03DataContent, prices and bookings, kept in one place.
- 04ServersHosting, payments and the services that keep it running.
Tournaments run from a forum thread.
On the left, a post edited 23 times, tickets by email and the stream link somewhere on page 14. On the right, our event demo.
Typical
- The schedule is a forum post
- Tickets by email and bank transfer
- The stream link lost on page 14
- Questions answered in the replies
Our demo
- A live countdown and schedule
- Seats chosen in a 3D arena
- The stream with chat and polls
- Brackets anyone can call
Try it
This is the working demo. Click around.
What we'd build it on
- Next.js
- TypeScript
- React Three Fiber
- Twitch API
- Stripe
Next demoWexentra.