Zivadiliring at Hallenstadion Zurich – Our scanner web app in action
Behind the entrance to the Hallenstadion in Zurich, there is a concentrated calm before the storm. Ten members of the Kaufleuten team are standing ready, smartphones in hand, cameras pointed at the first tickets. I’m right in the middle of it all, not as a guest, but to see if everything is running smoothly.
10,000 tickets, all scanned in around two hours. And every single one goes through a web app that we developed at required.
25 years Web
From <table> to critical infrastructure.
I’ve been working in the web industry for 25 years. When I started out, websites were mostly static information pages: a bit of HTML, table-based layouts, maybe an animated GIF if things got fancy. Today, together with my co-founders, I run a digital agency.
What we used to call a “website” was, in hindsight, closer to a digital business card. Today, we build fully fledged applications: interactive, performant and business-critical, like this scanner web app that ensures thousands of people can enter a stadium smoothly and without stress.
The fact that I’m standing in Zurich’s largest stadium years later and watching our web app allow 10,000 people to enter shows me how far the web has come.
The entrance
10,000 guests, 10 scanners, 0 traffic jams
The gates open at 17:00. Over the next two hours, all 10,000 tickets will be scanned, some printed with a barcode, some digitally as a QR code in the wallet. On average, a ticket is validated every three seconds, simultaneously on ten devices.
The scanner app runs directly in the browser. No installation, no special setup. Just open the browser, log in, enable the camera and start scanning. This proved to be a major advantage for the mixed scanning team, people using their own devices, with different levels of experience and only a short introduction. The only real requirement was sufficient battery life. Power banks were, of course, provided.
Even when things became hectic, the system remained stable. Validation, duplicate detection and status display worked seamlessly together. For me, it was impressive to see how confidently an application that “only” runs in the browser performs in an environment like the Hallenstadion.
Backstage at the Hallenstadion
What the audience doesn’t see
Everything is meticulously planned behind the scenes. WLAN, 5G, backup network, roles in the team, clear processes. I was on site to make sure that the interaction between the app, network and scanning team was working. After just a few minutes, it was clear: it was working. The team was focused, the dashboard showed stable throughput rates and latency remained low even at peak times. The live figures spoke for themselves: several hundred scans per minute.
When the last guests were in the hall at around 7 p.m., a good deal of tension was released. The app remained stable. Phu!
From backstage to the hall
The time had come, my job was done and I was allowed to change my perspective and move to the spectator area – as a guest. The Hallenstadion was full, the atmosphere was great and the event ran smoothly.
For me personally, it was a special moment: from Karin, who used to code HTML & CSS by hand, to co-founder of a digital agency whose web app now enables access for 10,000 people.
This is the web of today – this is exactly why we do what we do.
A big thank you also to my team, who supported me remotely with monitoring, evaluations and all the necessary information.
What we take with us
Looking back, its use in the Hallenstadion was a complete success. Although the scanner app was originally designed for events at Kaufleuten, it has since proven itself in larger venues as well, including the Volkshaus and the Hallenstadion.
The web app is highly stable and scales reliably with growing requirements. For the next event of this size, we would further optimise the database for peak loads to ensure scans are processed even faster.
For me, projects like this are more than “just a client assignment”. They are a reminder of the trust our clients place in the web — and in us. And of the satisfaction that comes when technology simply works at the moment it matters most.
Technology that grows with you
We developed our scanner web app for and with Kaufleuten in order to handle events efficiently. During the coronavirus period in particular, functions were added that were very specifically tailored to the business, such as the prominent display of guests who are already in the room so that the cashier always has an overview in the event of any checks.
Technologically, we rely on a modern web setup:
- React.js and Next.js for performance and scalability
- Chakra UI for a lean, intuitive interface
- NextAuth for secure authentication
- STRICH for precise barcode scanning directly in the browser
- Sentry for real-time monitoring and error reporting
As a progressive web app (PWA), the solution runs platform-independently on iOS and Android and synchronizes continuously with the event database.
If you want to dive deeper into the technical details, you can find out more in our:
Case-Study on the scanner app
What our customer says about the collaboration:
Feedback like this means a lot to us. They show that our projects are not just about code, interfaces and performance, but also about trust, openness and joint development over the years.
Marc Brechtbühl, Kaufleuten Restaurants AG
Partnership instead of classic
“Working with required is never a classic ‘client-agency’ relationship – it’s always a partnership. We think together, try things out and continue to develop. I particularly appreciate their reliability, the way they think along with me and their honest, direct communication.”
