Creating an interactive web-application for the users to take part in the online auction during the football match.
The system was developed for the Levi’s Stadium (a football stadium located in Santa Clara, California, in the San Francisco Bay Area).
The San-Francisco company desired to hold an advertising game during the match – an auction to sell several items, including the new car. Only those visitors who have registered at company’s site were allowed to take part in the game (of course, a massive advertising campaign was held beforehand).
Here is the plot of the game:
Interactive video starts on all the devices of all the logged in users simultaneously, as well as on the huge stadium jumbotron screen. After a few seconds of Levi’s commercial, the photos of the auction item are displayed. During the 10-second countdown the price of the item is dropping, so that any visitor might press the button to buy at current price. One who pressed the button first is the winner and his/her name is shown on every device.
The main challenge was to create a pixel-perfect picture for all possible desktop resolutions and mobile devices, including stadium jumbotron with very specific resolution of 1,120 × 4,648 pixels.
- The front-end part of the project was created using AngularJS framework.
- Pixel-perfect quality of the application was achieved using CSS technique – CSS3 Media Queries.
- We’ve managed to run the web application simultaneously on every device due to the WebSocket API (which establishes connections between a web browser and a server).