About arc42
arc42, the template for documentation of software and system architecture.
Template Version 8.2 EN. (based upon AsciiDoc version), January 2023
Created, maintained and © by Dr. Peter Hruschka, Dr. Gernot Starke and contributors. See https://arc42.org.
1. Introduction and Goals
1.1. Requirements Overview
The requirements of this application are to develop an application which functionality is similar to the “Saber Y Ganar” Spanish program on TV. Users will have to select an answer to several questions proposed extracted from Wiki data, these questions will be automatically generated by its API.
Furthermore, for the development of this application the use of GitHub is required to have a repository with all members of the development team using several tools provided by this service. In addition to that the application will have to save the entrance of different users on a database, allowing them to make different tracking and having previous results of that specific user.
Also, it must be said that during each question an IA assistant should be helping the user in case of need. This would require us, the development team, to use different LLM that is still to be decided which one will be use.
1.2. Quality Goals
Goal | Description |
---|---|
Testability |
Our application is going to be proven with different tests checking its funcionality. |
Usability |
Our application is going to be very intuitive, allowing new users to navigate through it quickly. |
Portability |
Our application will allow its deployment of different devices at different times. |
Security & Privacy |
Our application will only allow the users themselves to see its own results, without considering some rankings that will involve all users. |
Performance |
Our application will be loading tests to confirm that runs correctly under “heavy conditions” in which there is much traffic of users. |
1.3. Stakeholders
Role/Name | Contact | Expectations |
---|---|---|
RTVE |
- High-quality, functional quiz platform - On-time delivery - Easy-to-use interface - Detailed user stats and APIs |
|
ChattySw |
Clear requirements and deadlines - Collaboration and timely feedback - Efficient code reviews and testing |
|
Professors |
Pablo González: gonzalezgpablo@uniovi.es & Jose Labra: labra@uniovi.es |
- Regular progress reports - Adherence to academic guidelines and criteria - Proper documentation of work and development process - Develop interpersonal skills and team dynamics |
Development team |
· Víctor Llana Pérez - uo294629@uniovi.es · Lara Haya Santiago - uo289684@uniovi.es · Alba González Arango - uo289041@uniovi.es · Marco Lorenzo Martínez - uo294324@uniovi.es · Javier Menéndez Osendi - uo294866@uniovi.es · Daniel Rodríguez Fernández - uo293655@uniovi.es |
- Clear requirements and deadlines - Collaboration and timely feedback - Efficient code reviews and testing |
Wikidata (Data Provider) |
- Accurate and reliable data used for question generation - Compliance with licensing and data-use policies |
|
Empathy |
- Increased user engagement through their LLM - Integration of Empaty’s LLM for dynamic, diverse question generation - Opportunity for users to participate in Empaty’s contest |
|
Users |
- |
- Easy registration and login - Engaging quiz experience - Accurate tracking of progress (games, questions, stats) |
2. Architecture Constraints
- TECHNICAL CONSTRAINTS
Constraint | Explanation |
---|---|
Name |
The application must be called WIChat. |
Game description |
The game will consist of showing a picture and the users guessing what it is about. |
Obtaining the hints |
The hints for the game must be obtained from an external Large Language Model (LLM) through an API. |
Source of information |
Information about the questions must be automatically generated from Wikidata. So should be the disctractors and the images. |
Access to information |
The system will give access to the information about the generated questions and users through an API. |
Deployment |
The application must be accessible through a web interface. |
- ORGANIZATIONAL CONSTRAINTS
Constraint | Explanation |
---|---|
Developers |
The application must be developed by a team of approximately 4 members. |
Developing time |
The application must be developed by May. Also, it has to follow some deliveries throughout the semester. |
Organization of the work |
Several meetings will be held by the group members to discuss further things to do. |
Project management |
Git will be used to manage and document the project and advances. |
3. Context and Scope
3.1. Introduction
WiChat is a game designed for an online experiment done by RTVE, with the typical TV quiz contest format. To implement this application, we need to call several external APIs. Wikidata is the one in charge of giving us the information we require for the questions and the answers, and also the images the user is going to see, which are the main part of the application. We also use an LLM for generating some hints for the user (in form of wildcards) and a database for storing the user log-in information.
3.2. Business Context

Communication Partners | Input | Output |
---|---|---|
User |
The user sees the web application in real time and makes decisions accordingly. |
Performs actions on the application such as answering a question, using a wildcard or asking a question to a chatbot. |
Web Application |
Receives user inputs and data from backend services. |
Updates the interface to show to the user. |
Backend Service |
Takes actions from users received from the web application and data returned by different APIs. |
Manages calls to APIs and updates the view of the web application. |
Wikidata |
Receives a query about a theme or category. |
Returns a page corresponding to the given query. |
LLM |
Gets relevant information about the question the user has to answer. |
Interacts or answers the user in several ways, depending on the used wildcard. |
3.3. Technical Context

Communication Partners | Explanation |
---|---|
Web Application |
The user can play the game using Internet, via HTTP. |
Backend Service |
Manages data and user actions, chatting with LLMs and generates trivia questions through calls to the respective APIs. |
Database |
MongoDB database for storing users information. |
Wikidata |
Data is obtained throught SPARQL queries made by the service. |
LLM |
Gets relevant information about the question the user has to answer. |
4. Solution Strategy
The application is built on the MERN stack, a full-stack combination of source-available technologies used for building web-based applications on a simpler and more agile manner. It consists of:
Name | Explanation |
---|---|
MongoDB |
NoSQL database which uses JSON-like documents with optional schemas. We choose it over relational databases to make use of its scalability and flexibility to store large amounts of data. |
Express.js |
Backend framework for Node.js. It will simplify the process of building APIs. |
React.js |
Front-end JavaScript library. Despite the loading overhead, it will help us build a modern and fast UIs for the application. |
Node.js |
Open-source cross-platform JavaScript Runtime environment which will be used to build the backend of the application. It is widely used and has an enormous amount of available libraries, wich makes it one of the best approach for most web applications. |
4.1. Decompositon of the system
The main architectural pattern to be used in the application is to divide different responsibilities in their own respective microservice, creating a logical separation between modules. This will help to coordinate the team and reduce conflicts while working on different microservices of the application, easing development. For the authentication microservice, we will be combining statelessess, a token-based model and API Gateway orchestration for a robust and scalable authentication system. Other microservices, such as the game microservice, or LLM microservice and WikiData querying microservice, will be based on either a MVC pattern or a Client-server or Controller-Responder model. As for design patterns, we will use template method to manage the behavior of the questions in different gamemodes and possibly the factory pattern to create the different questions.
4.2. Achieving quality goals
Goal | Steps to achieve it |
---|---|
Testability |
We will aim for a high test coverage of the code for the application, using tools like Selenium to achieve this. |
Usability |
We will perform usability tests, like using dummy users and testers, and we will extend the application to be accesible. |
Portability |
We will test the application in different environments, and use up-to-date frameworks and tools to ensure maximum compability. |
Security |
We will follow best security practices, and use checklists to ensure there aren’t major security flaws in our application. |
4.3. Other organizational decisions.
Since we will be building a microserviced application, we will be using a microservice-oriented gitflow for version control. It will be a single repository (monorepo) where there is a folder for each service. We will also follow GitHub Flow for a straightforward development strategy.
We will also follow SCRUM with 1-week sprints for the development cycle. Since we are heavily constricted by time, this will be our best alternative.
5. Building Block View
5.1. Whitebox Overall System

- Motivation
-
The purpose of this diagram is to represent the system in the most general way possible, outlining the main application from the external components that are also in use.
- Contained Building Blocks
Name | Responsibility |
---|---|
WIChat |
Central web Application, acts as the primary interface for the user and acts as mediator between external data sources and services. |
Wikidata |
Repository of factual, well-organized, and machine-readable data that can be queried and leveraged to support the system’s functionality. |
LLM |
Will generate appropiate hints in response to user queries, will also process data from Wikidata to generate said hints. |
- Important interfaces
-
-
User ↔ WIChat: Direct interaction through UI.
-
WIChat ↔ Wikidata: Structured data retrieval for factual information and images.
-
WIChat ↔ LLM: Natural language understanding and response generation.
-
5.2. Level 2

Name | Responsibility |
---|---|
Frontend Service |
Manages user interaction and presentation. |
Backend Service |
Handles logic, coordination, and communication between the frontend, database, and external services. |
Database Layer |
Provides secure and efficient storage and retrieval of data for the application. |
5.3. Level 3

Name | Responsibility |
---|---|
Authentication Service |
Handles user authentication, login and signup. |
Game Service |
Manages game state and logic. Uses more concrete services like Chat and Questions to divide responsibilities. |
Chat Service |
Provides chat functionality, sending requests to an LLM, receiving and processing responses to show hints to the user. |
Questions Service |
Creates and provides questions using data from Wikidata. |
6. Runtime View
6.1. Sign up
The user wants to create a new account and register it for the future. Data must be valid and not collide with some account that already exists.

6.2. Log in
The user wants to log in with an account that has already been created.

6.3. Playing the game
Selecting the game mode and playing it.

6.4. Hints
The application has several types of hints, but we can define a general structure that matches with all of them, just by varying few details for each type.

6.5. Rankings
Seeing the ranking of best scores. It can be the general one or the one for each category.

7. Deployment View
7.1. Infrastructure

- Motivation
-
The diagram above represents the initial version of our architecture, outlining the separation between its components. Our design follows a client-server model, where the server communicates with Wikidata to retrieve questions. This clear distinction between the frontend (client) and backend (server) ensures modularity, allowing different implementations to remain interchangeable as long as they adhere to the common API.
We utilize an Ubuntu server hosted on Azure, providing an isolated and pre-configured environment optimized for running our services. Hosting on Azure helps reduce infrastructure costs by reducing concerns such as security, availability, and maintenance.
We use Docker because it helps package our application and its dependencies into a standardized unit, ensuring it runs consistently across different environments, regardless of the machine’s setup. Instead of using a monolithic architecture, we’ve chosen a microservices approach with Docker containers. This allows each service to be isolated, with its own resources, preventing conflicts and improving scalability and resilience. Each service has its own Docker image, which gives us flexibility in development and deployment. Our project includes services like the web application, gateway, user authentication, and MongoDB server. This Docker-based setup makes deployment, management, and resource use more efficient, while boosting flexibility and scalability.
- Quality and/or Performance Features
-
Our Docker-based microservices architecture enhances both quality and performance by ensuring each service runs independently in its own container, optimizing resource allocation and preventing conflicts. This setup improves scalability, allowing services to scale as needed without affecting others. Additionally, it streamlines deployment and maintenance, reducing downtime and ensuring a consistent, high-performing system across different environments.
- Mapping of Building Blocks to Infrastructure
-
The web app, gateway, and services run within Docker containers, all hosted on a server. The server manages these containers and communicates with Wikidata to retrieve questions. The gateway connects the web app with the services, while the services handle user data and generate questions.
Component | Description |
---|---|
Web App |
User interface that interacts with the rest of the application. |
Gateway |
Manages communication between the web app and various services. |
Auth Service |
Handles user authentication. |
User Service |
Manages users and their history, providing some functions for API consumers. |
Users Database |
Stores user data and game history. |
WikiData |
External API used to retrieve information from WikiData. |
8. Cross-cutting Concepts
8.1. <Concept 1>
<explanation>
8.2. <Concept 2>
<explanation>
…
8.3. <Concept n>
<explanation>
9. Architecture Decisions
10. Quality Requirements
10.1. Quality Tree
10.2. Quality Scenarios
11. Risks and Technical Debts
12. Glossary
Term | Definition |
---|---|
<Term-1> |
<definition-1> |
<Term-2> |
<definition-2> |