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
This project’s aim, in summary, is developing a public web application which has a game consisting on answering multiple choice questions with one correct answer generated using Wikidata. For reference of the general mechanic, see the spanish quiz program 'Saber y Ganar' and its game mode 'Descartando'
Next, important basic aspects of the project will be described in order to give context on how the webapp will be developed.
1.1. Requirements Overview
The functional requirements are the following:
-
The application must be accesible through the web
-
Users must be able to register into the system
-
Users must be able to see data about their past games (score, correct/wrong answers, number of questions answered…)
-
Questions must be automatically generated from Wikidata.
-
Questions must be answered before some specific time.
-
Each question must have one right answer and several incorrect ones or distractors. Both the right answer and the distractors should be automatically generated.
-
The system must give access to the information about the users through an API.
-
The system must give access to information about the generated questions through an API.
The functional requirements have been grouped into the different microservices the web application will have:
1.1.1. User and Authorization Services
-
The User service allows the user to
-
Register
-
-
The authorization service allows the user to
-
Log in
-
1.1.2. Ranking Service
-
A user can retrieve the following information from the Ranking service
-
Points scored
-
Number of questions answered
-
Correct answers
-
Incorrect answers
-
-
The system must be able to manage the user’s access to the system
1.1.3. Question Service
-
The question service provides the following functionallities
-
Generate a random question from a given category with 4 options
-
Validate the answer and update the score accordingly
-
1.2. Quality Goals
Goal | Description |
---|---|
Testability |
Test will be developed, so the application has a good quality. |
Usability |
The application has to be intuitive for its users. |
Portability |
The application works in different devices and browsers. With different screen sizes. |
Performance |
The application can handle a big number of users and give good response times. |
1.3. Stakeholders
Role/Name | Members | Expectations |
---|---|---|
Students |
Andrés Cadenas Blanco, Christian Fernandez Noriega , Adrián González Guadalupe and Luis Salvador Ferrero |
Are the ones in charge of web development. They will work together to make the application. |
Teachers |
Pablo González |
In charge of supervising the student’s teamwork, ensuring the work accomplishes the goals in the best way possible and helping in the development and solving doubts. |
Users |
Anyone that wants to use the web |
They should be able to understand how to use and move around the web with ease |
2. Architecture Constraints
Architects need a clear understanding of the areas where they have creative freedom in their design choices and where they are bound by constraints. These constraints must be addressed comprehensively, as they are non-negotiable factors within the project. However, it’s important to recognize that while constraints are rigid, there may be room for negotiation and adaptation within them.
Constraints | Explanation |
---|---|
GitHub |
It will be used to coordinate the projects work, tracks changes and manage workflow. |
Documentation |
In order to keep it clean, efficient and simple, it will follow Arc42 method and be deployed to be able to look at it at any time. |
Deployment |
The project has to be deployed when a release is made |
Time |
Since the project will be done in this semester our time is limited, and we need to stick to the deadlines and manage our time in an efficient way. |
Testing |
We need to have a good coverage of unitary testing (80%+) and some acceptance testing covering all the webapp functionallity |
Wikidata |
It has to be used for the question generation. |
3. System Scope and Context
3.1. Business Context
The player is the only actor in the main system, which is the one that makes use of the different APIs that will be described later. The player can initially interact with the authentication system to either register or login and then, by playing the game, the question service will be triggered for either generating the questions or validating the player’s answer. The player can also access data about the past games of all users in a ranking.
Element | Description |
---|---|
Player |
Plays the game and can consult past scores |
WIQ Game |
Main system in which generated questions are shown and can be answered by players |
Wikidata |
External data repository from which questions are generated |
Users Info API |
Manages data of users, both registration/login data and their past scores |
Questions API |
Manages generation of questions from Wikidata |
MongoDB |
Database for storing players' info and scores |
4. Solution Strategy
The web application is based on MERN stack, a full-stack combination of technologies for developing JavaScript applications fast.
-
Node: the JavaScript runtime environment.
-
MongoDB: chosen technology for the persistance of the system, that provides a non-relational database approach.
-
Express and Node: they make up the middle tier of the application, providing a powerful server platform.
-
React: front-end framework that will solve the client interfaces of the application.
Regarding the deployment of the application, the strategy chosen is a cloud-based system. This decision was motivated because of the nature of the project, since a web application needs to be live and accesible at any moment. The server will be an ARM Linux VM on Oracle, where some dockerized microservices will be deployed:
-
users service
-
authentication service
-
questions service
-
web application
-
gateway
5. Building Block View
The system is based on having a player interact with a GUI which makes use of different APIs that hold most of the important functionallity
5.1. Whitebox Overall System
- Motivation
-
We made the decomposition separating the functionallities (The names are self explanatory but components will be described later)
- Contained Black boxes
Name | Responsibility |
---|---|
WIQ Game GUI |
Main window in which questions are shown and can be answered by the player. The latter can also see past scores. |
questions API |
In charge of generating the questions and validating the answer |
UsersAPI |
In charge of keeping track of the data of the users (registration and scores) |
Wikidata |
External element used for the generation of questions |
5.2. Level 2
5.2.1. Questions API (White Box)
This is the Component that holds the functionallity for the main purpose of the webapp: Allowing players to see questions and answer them, getting a consequent score update.
- Motivation
-
We made the decomposition separating the functionallities.
- Contained Black boxes
Name | Responsibility |
---|---|
question-service |
Receives different petitions regarding the generation of questions and validation of answers and responds accordingly. |
wikibase-sdk |
External library that facilitates and simplifies the use of wikidata for the generation of questions. |
6. Runtime View
6.1. User authentication
-
Users will log in through the web interface of the application.
-
The system stores in database (MongoDB) the users of the application. Any data relative to them is accessed via the database of the system and displayed to them on the web interface.
6.2. Rankings
-
Users can see the rankings for a specific category
6.3. Playing
-
An overview of the runtime scenario of a game.
7. Deployment View
7.1. Infrastructure Level 1
An overall of the infrastructure elements used to execute the system can be seen in the following diagram.
The gateway service works as an adapter between the micro services and the web client. The web application is the main interface for the user to interact with the system. The wikidata API is used to fetch data from wikidata to generate questions. We must consider the gateway service a black box.
7.2. Infrastructure Level 2
7.2.1. WIQ Server
The architecture of WIQ is based on microservices. Gateway service is the main entry point for the system. The web application is the main interface for the user to interact with the system. The user service is responsible for managing users. The authorization service is responsible for managing user permissions. The question service is responsible for generating questions. The mongo database is used to store data.
8. Cross-cutting Concepts
8.1. Continuous integration and development
Our way of working with github is having one developing branch towards which all pull requests are done and have to be reviewed by at least one team member. Sonar Cloud is set up so we know the testing coverage and whether we pass the quality gate with every pull request. Once there is enough change in the develop branch with respect to the main one and it has enough quality we can merge them and make a release.
8.2. Microservice based system
Different business functionallities will be developed in different independent services. This will ensure that if one of them fails, the rest are still working (For example, if the rankings go down that will not affect the main game) as they have their own deployment as well. Other benefits are increased maintainability due to separation in small, more readable modules and the possibillity of using different languages or technologies for each module if needed/prefered without colliding with the rest.
8.3. Gateway service routing
We will use a speciallized service that will route the requests to the corresponding service, acting as a single entry point for the application. Requests to the services are much simpler as only the api base endpoint and the action needs to be known and the gateway can also act as a filter to manage requests conditionally if needed. This approach also favors security as we can control which requests are actually sent based on its content or the context of the app.
9. Architecture Decisions
What we have to decide | Options/Proposals - Reasoning | Status | Decision - Reasoning |
---|---|---|---|
Which cloud service provider to use for deploying the webapp |
Oracle Cloud - We have access to a VM with this provider with 24/7 free activity |
Decided |
Oracle Cloud - All advantages |
Infrastructure design |
Oracle ARM VM with multiple containers inside - Running containers in this VM is free |
Decided |
Oracle ARM VM with multiple containers inside - It is free |
What CI/CD pipeline should we use |
Github Actions - Already integrated in the project and fits perfectly our needs for deployment, developing and testing. Azure DevOps - It is more integrated with Azure cloud, where we could have our infraestructure deployed with Terraform using IaC. |
Pending |
Azure Devops would be a better approach for deploying our infraestructure in Azure containers (serverless) using IaC with Terraform, but there is a lack of time for migrating and GitHub Actions is already integrated and working fine. |
Local or cloud data base |
Local - There is no need to externalize things that should keep local. |
Decided |
Local database - Database is kept in local for security reasons and for not overdesigning the infraestructure |
New microservice for Rankings |
Removing ranking logic from users microservice - It might be a better design as user logic and ranking logic is not exactly the same. |
Decided |
Keep rankings logic in users microservice - It would make sense to separate services if they scaled too much but in this project this would be overdesign. |
Which technologies are we going to use for developing the front end |
React - It is a modern framework which is easy to learn and provides usefull predefined components that save time |
Decided |
React - We have a reference already implemented and its capabilities are what we need |
10. Quality Requirements
10.1. Quality Tree
10.2. Quality Scenarios
10.2.1. Usage Scenarios
Quality goal | Motivation | Usage scenario | Priority |
---|---|---|---|
Testability |
Test will be developed, so the application has a good quality. |
The coverage should be higher than 70% and SonarCloud should give a pass in unit tests |
High |
Usability |
The application has to be intuitive for its users. |
Users don’t like to spend a lot of time trying to understand how to use an application. Therefore when they want to do something, they want to know where to go and what to do. |
Very high |
Portability |
The application works in different devices and browsers. With different screen sizes. |
Users connect from different devices and browsers, we should ensure that the application works in all of them. |
Medium |
Performance |
The application can handle a big number of users and give good response times. |
The application should be able to stand at least 10 users simultaneously and give a response time of less than 20 seconds. |
High |
10.2.2. Change Scenarios
Quality goal | Motivation | Change scenario | Priority |
---|---|---|---|
Maintainability |
An application should be easy to update and maintain by the dev team. Respecting the architecture of the web application and the continuous integration. |
If a developer wants to add a feauture or include a hotfix, he should be able to do it without major consequences on the system, always respecting the architecture of the web application. |
High |
Maintainability |
An application should be easy to update and maintain by the dev team. Respecting the architecture of the web application. |
As there is continuous integration, when fixing a bug or adding a feature, if an error is found, the application won’t be affected as changes won’t be applied. |
Very High |
11. Risks and Technical Debts
Risk/Technical debt | Why it exists | Severity - Explanation | Possible solutions |
---|---|---|---|
Use of wikibase-sdk version 8 (not final) |
It is the last version that supports 'require', which is needed to use express in the same module |
Low - The difference is, a priori, merely functional, but retains the needed characteristics |
Upgrade only if a newer version supports 'require' |
Lack of a security barrier for DDOS attacks |
Lack of knowledge and time for implementing it into the project |
A DDOS attack can make the application crash |
Integrate CloudFlare into the project |
Questions types |
The design was optimized for image based questions and adding new categories easily. |
It would be difficult to add questions that do not rely on images. For example, text based questions. |
Refactoring questions microservice to include new types of questions. |
12. Tests Report
Tests | Status |
---|---|
Unit tests |
Passing (85.3% coverage) |
e2e tests |
Passing |
Load tests |
Max ~240 users |
13. Glossary
Term | Definition |
---|---|
Microservice |
Small and independent component that performs a specific business function |
CI/CD pipeline |
A series of steps that are carried out to obtain a new software product from its development phase to its deployment |
ARM |
A type of processor architecture designed for power efficiency |
MERN stack |
A group of web technologies for developing web applications: MongoDB, Express, React and Node |
Docker containers |
Packets that include all the software needed for running a service |
Oracle Cloud |
Cloud infraestructure provider (e.g Virtual Machines) |
Gateway |
All the endpoints visible for the client, that will redirect to specific microservice API |
API |
Set of endpoints exposed by the backend server whose purpose is interacting with the client-side |