Tech Thoughts

Making TV Game Shows Interactive

06.09.2022


Architectural schema

This article presents a university project developed for the Laboratory of Advanced Programming course.
We created a complete application that makes TV game shows interactive, allowing the audience to actively participate using their smartphones.


Each user can connect through a web app, receive an identifier code, choose a nickname, and play along by answering live questions displayed on the TV screen. Players select their answer via four buttons on their mobile screen, and the system tracks their responses, assigning points and updating the scoreboard in real-time.


The system was designed to handle a large number of users simultaneously. To manage the load, we built a distributed server infrastructure using multiple workers behind a load balancer. The architecture ensures scalability and robustness even during bursts of activity.


The admin has access to a dedicated interface to control the flow of the game: starting new questions, setting the correct answers, and managing the timeout for each round. Players' responses are collected and stored in Elasticsearch, and dashboards are generated with Kibana to display live statistics and rankings. At the end of each game, players can view their scores, and the Top 10 is displayed during the show.


We used several technologies to implement the system:


For cloud deployment, we leveraged Amazon Web Services. We used EC2 to provide a fixed entry point for the system, ensuring that users always have a stable address to connect to. Additionally, we used ECS for the automatic deployment of Docker containers, making the deployment process more efficient and scalable.


The architecture of the system is organized into three main parts: Base Services, User Side, and Admin Side.


Base Services form the backbone of the entire platform. This core layer includes essential components such as Elasticsearch, RabbitMQ, and Nginx. Without these services, the system would not be able to handle communication between components, manage data storage, or properly route requests from users and administrators.


User Side focuses on providing a seamless experience to players. When users connect via the mobile web app, their requests are balanced by an instance of Nginx acting as a Load Balancer. These requests are then forwarded to a pool of Worker nodes, each capable of handling WebSocket connections, broadcasting questions, collecting answers, and interacting with the database to log gameplay data. This setup ensures low latency and fault tolerance even during peaks of simultaneous players.


Admin Side empowers the game hosts to control and monitor the show. Through a secure web interface served by Nginx, the admin can launch new questions, close rounds, and manage the overall game flow via a NodeJS-based Admin Server. This server publishes control messages through RabbitMQ to all workers and interacts with Elasticsearch to manage and clean the game data. The admin dashboard, built with Kibana, displays live player statistics and rankings, helping to keep the show dynamic and engaging.


Beyond the technical implementation, the project was developed through a complete software engineering process:

  1. The initial idea.
  2. User Stories to describe features from the user's point of view.
  3. Mockups to design the user interface.
  4. Non-functional requirements for performance and scalability.
  5. Function Points estimation and COCOMO analysis for project sizing.
  6. Definition of Technologies to be used.
  7. A detailed Software Architecture.
  8. Agile development using SCRUM, with Gantt charts, burndown graphs, and a release backlog.

You can find the complete codebase and documentation in our GitHub repository.

Cloud Computing Docker AWS NodeJS RabbitMQ Elasticsearch Kibana Load Balancing Microservices Distributed Systems WebSocket