A React application consisting of an interactive game

⚔️ IQFight

A competitive challenge till the last question! IQFight is a web application consisting of an interactive game in which several people can challenge each other to see who knows the most about various categories.

Description

The game is divided into rooms that can be created by the players themselves, either publicly or privately. Private rooms can only be accessed by people who obtain a direct link to the room, while public rooms can be entered through the browser in the Play section.

Once in a room, only the creator will be able to start the game.

A game consists of answering the proposed question by choosing one of the four available answers. For each correct answer a score will be awarded based on the time taken to answer. Players with a high score will be placed in the Ranking section only if the game was played in the Casual question category.

It is also possible to add new questions from the side menu, and you can view your statistics and edit your personal data (including your avatar) from the profile section accessible by clicking on your user image.

Note: It is necessary to register in order to play.

Contributors

Screenshots

Leaderboard

Room creation

User profile

Technologies used:

HTML5, CSS3, JavaScript ES6, Ajax (XMLHttpRequest), React 16, Bootstrap 4.5.0, PHP7

Implementation notes

  • The application acts as an interactive real-time system using the short polling technique: the client periodically sends Ajax requests to the server to obtain the game status
  • The application is a SPA (Single Page Application) completely realised thanks to the React Router component
  • The server is “kept alive” by the clients, so it was necessary to manage the competition between the requests of the various clients in order to perform certain operations typically carried out by the server

GitHub

View Github