Football Match Online Auction

Challenge

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.

Benefits

Our developers proposed the solution that will perfectly match the existing ecosystem: we decided to use modern web technologies with the advantages they provide. The front-end of the application was built with HTML5, CSS3, and AngularJS due to that technology is fully responsible at every resolution.

Such an approach helped the client to solve the business goal without additional expenses on software development and disruption of the existing infrastructure.

During the development process, our developers practiced the SCRUM.

Solution

• 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).