diff --git a/images/10-Quality_Tree.png b/images/10-Quality_Tree.png
new file mode 100644
index 00000000..0e0ee967
Binary files /dev/null and b/images/10-Quality_Tree.png differ
diff --git a/images/Sequence diagram.png b/images/Sequence diagram.png
deleted file mode 100644
index 3f560336..00000000
Binary files a/images/Sequence diagram.png and /dev/null differ
diff --git a/images/context.png b/images/context.png
new file mode 100644
index 00000000..4313a20a
Binary files /dev/null and b/images/context.png differ
diff --git a/images/deployment.png b/images/deployment.png
new file mode 100644
index 00000000..d2170bbb
Binary files /dev/null and b/images/deployment.png differ
diff --git a/images/level1.png b/images/level1.png
new file mode 100644
index 00000000..9260e859
Binary files /dev/null and b/images/level1.png differ
diff --git a/images/level2.png b/images/level2.png
new file mode 100644
index 00000000..ab5c807c
Binary files /dev/null and b/images/level2.png differ
diff --git a/images/level3.png b/images/level3.png
new file mode 100644
index 00000000..32ce031e
Binary files /dev/null and b/images/level3.png differ
diff --git a/images/sequencediagram-game.png b/images/sequencediagram-game.png
new file mode 100644
index 00000000..74837802
Binary files /dev/null and b/images/sequencediagram-game.png differ
diff --git a/images/sequencediagram-history.png b/images/sequencediagram-history.png
new file mode 100644
index 00000000..2fca9437
Binary files /dev/null and b/images/sequencediagram-history.png differ
diff --git a/images/sequencediagram-login.png b/images/sequencediagram-login.png
new file mode 100644
index 00000000..41a8de9e
Binary files /dev/null and b/images/sequencediagram-login.png differ
diff --git a/images/sequencediagram-ranking.png b/images/sequencediagram-ranking.png
new file mode 100644
index 00000000..93c23f82
Binary files /dev/null and b/images/sequencediagram-ranking.png differ
diff --git a/index.html b/index.html
index df6f54f0..69b39492 100644
--- a/index.html
+++ b/index.html
@@ -451,51 +451,70 @@ <h1><span class="image"><img src="./images/arc42-logo.png" alt="arc42"></span> T
<li><a href="#_stakeholders">1.3. Stakeholders</a></li>
</ul>
</li>
-<li><a href="#section-architecture-constraints">2. Architecture Constraints</a></li>
-<li><a href="#section-system-scope-and-context">3. System Scope and Context</a>
+<li><a href="#section-architecture-constraints">2. Architecture Constraints</a>
<ul class="sectlevel2">
-<li><a href="#_business_context">3.1. Business Context</a></li>
-<li><a href="#_technical_context">3.2. Technical Context</a></li>
+<li><a href="#_technical_constraints">2.1. Technical constraints</a></li>
+<li><a href="#_organizational_constraints">2.2. Organizational constraints</a></li>
+<li><a href="#_conventions">2.3. Conventions</a></li>
</ul>
</li>
-<li><a href="#section-solution-strategy">4. Solution Strategy</a></li>
-<li><a href="#section-building-block-view">5. Building Block View</a>
+<li><a href="#section-system-scope-and-context">System Scope and Context</a>
+<ul class="sectlevel1">
+<li><a href="#_contents">1. Contents</a>
+<ul class="sectlevel2">
+<li><a href="#_scope_and_context">1.1. Scope and context</a></li>
+</ul>
+</li>
+<li><a href="#_business_context">2. Business Context</a>
<ul class="sectlevel2">
-<li><a href="#_whitebox_overall_system">5.1. Whitebox Overall System</a></li>
-<li><a href="#_level_2">5.2. Level 2</a></li>
-<li><a href="#_level_3">5.3. Level 3</a></li>
+<li><a href="#_contents_2">2.1. Contents</a></li>
+<li><a href="#_motivation">2.2. Motivation</a></li>
+<li><a href="#_form">2.3. Form</a></li>
+<li><a href="#_context_diagram">2.4. Context diagram</a></li>
+</ul>
+</li>
+<li><a href="#_technical_context">3. Technical Context</a>
+<ul class="sectlevel2">
+<li><a href="#_contents_3">3.1. Contents</a></li>
+<li><a href="#_deployment_diagram">3.2. Deployment diagram</a></li>
+</ul>
+</li>
</ul>
</li>
-<li><a href="#section-runtime-view">6. Runtime View</a>
+<li><a href="#section-solution-strategy">Solution Strategy</a>
+<ul class="sectlevel1">
+<li><a href="#_contents_4">1. Contents</a>
<ul class="sectlevel2">
-<li><a href="#_runtime_scenario_1">6.1. <Runtime Scenario 1></a></li>
-<li><a href="#_runtime_scenario_2">6.2. <Runtime Scenario 2></a></li>
-<li><a href="#">6.3. …​</a></li>
-<li><a href="#_runtime_scenario_n">6.4. <Runtime Scenario n></a></li>
+<li><a href="#_technology_decisions">1.1. Technology Decisions</a></li>
+<li><a href="#_top_level_decisions">1.2. Top-Level Decisions</a></li>
+<li><a href="#_quality_goals_2">1.3. Quality Goals</a></li>
+<li><a href="#_relevant_organizational">1.4. Relevant Organizational</a></li>
+<li><a href="#_motivation_2">1.5. Motivation</a></li>
</ul>
</li>
-<li><a href="#section-deployment-view">7. Deployment View</a>
+<li><a href="#section-building-block-view">2. Building Block View</a>
<ul class="sectlevel2">
-<li><a href="#_infrastructure_level_1">7.1. Infrastructure Level 1</a></li>
-<li><a href="#_infrastructure_level_2">7.2. Infrastructure Level 2</a></li>
+<li><a href="#_level_1_whitebox_of_the_overall_system">2.1. Level 1: Whitebox of the Overall System</a></li>
+<li><a href="#_level_2">2.2. Level 2</a></li>
+<li><a href="#_level_3">2.3. Level 3</a></li>
</ul>
</li>
-<li><a href="#section-concepts">8. Cross-cutting Concepts</a>
+<li><a href="#section-runtime-view">3. Runtime View</a>
<ul class="sectlevel2">
-<li><a href="#_concept_1">8.1. <em><Concept 1></em></a></li>
-<li><a href="#_concept_2">8.2. <em><Concept 2></em></a></li>
-<li><a href="#_concept_n">8.3. <em><Concept n></em></a></li>
+<li><a href="#_login">3.1. Login</a></li>
+<li><a href="#_game">3.2. Game</a></li>
+<li><a href="#_ranking">3.3. Ranking</a></li>
+<li><a href="#_history">3.4. History</a></li>
</ul>
</li>
-<li><a href="#section-design-decisions">9. Architecture Decisions</a></li>
-<li><a href="#section-quality-scenarios">10. Quality Requirements</a>
+<li><a href="#section-deployment-view">4. Deployment View</a>
<ul class="sectlevel2">
-<li><a href="#_quality_tree">10.1. Quality Tree</a></li>
-<li><a href="#_quality_scenarios">10.2. Quality Scenarios</a></li>
+<li><a href="#_infrastructure_level_1">4.1. Infrastructure Level 1</a></li>
+</ul>
+</li>
+<li><a href="#section-glossary">5. Glossary</a></li>
</ul>
</li>
-<li><a href="#section-technical-risks">11. Risks and Technical Debts</a></li>
-<li><a href="#section-glossary">12. Glossary</a></li>
</ul>
</div>
</div>
@@ -551,133 +570,78 @@ <h1><span class="image"><img src="./images/arc42-logo.png" alt="arc42"></span> T
<div class="sect1">
<h2 id="section-introduction-and-goals">1. Introduction and Goals</h2>
<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Describes the relevant requirements and the driving forces that software architects and development team must consider.
-These include</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>underlying business goals,</p>
-</li>
-<li>
-<p>essential features,</p>
-</li>
-<li>
-<p>essential functional requirements,</p>
-</li>
-<li>
-<p>quality goals for the architecture and</p>
-</li>
-<li>
-<p>relevant stakeholders and their expectations</p>
-</li>
-</ul>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_requirements_overview">1.1. Requirements Overview</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>Short description of the functional requirements, driving forces, extract (or abstract)
-of requirements. Link to (hopefully existing) requirements documents
-(with version number and information where to find it).</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>From the point of view of the end users a system is created or modified to
-improve support of a business activity and/or improve the quality.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>Short textual description, probably in tabular use-case format.
-If requirements documents exist this overview should refer to these documents.</p>
-</div>
-<div class="paragraph">
-<p>Keep these excerpts as short as possible. Balance readability of this document with potential redundancy w.r.t to requirements documents.</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-1/">Introduction and Goals</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_quality_goals">1.2. Quality Goals</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>The top three (max five) quality goals for the architecture whose fulfillment is of highest importance to the major stakeholders.
-We really mean quality goals for the architecture. Don’t confuse them with project goals.
-They are not necessarily identical.</p>
-</div>
-<div class="paragraph">
-<p>Consider this overview of potential topics (based upon the ISO 25010 standard):</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="./images/01_2_iso-25010-topics-EN.drawio.png" alt="Categories of Quality Requirements">
-</div>
-</div>
<div class="paragraph">
-<div class="title">Motivation</div>
-<p>You should know the quality goals of your most important stakeholders, since they will influence fundamental architectural decisions.
-Make sure to be very concrete about these qualities, avoid buzzwords.
-If you as an architect do not know how the quality of your work will be judged…​</p>
+<p>WIQ is a web application developed by HappySw that allows users to play an online quiz game.</p>
</div>
<div class="paragraph">
-<div class="title">Form</div>
-<p>A table with quality goals and concrete scenarios, ordered by priorities</p>
-</div>
-</div>
-</div>
+<p>The questions are automatically generated from Wikidata data and can be grouped by topic. Users can get a prize for each correctly answered question within a limited time and can also check their historical results in the game.</p>
</div>
<div class="sect2">
-<h3 id="_stakeholders">1.3. Stakeholders</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
+<h3 id="_requirements_overview">1.1. Requirements Overview</h3>
<div class="paragraph">
-<div class="title">Contents</div>
-<p>Explicit overview of stakeholders of the system, i.e. all person, roles or organizations that</p>
+<p>The main functional requirements to be met are:</p>
</div>
<div class="ulist">
<ul>
<li>
-<p>should know the architecture</p>
+<p>Users must be able to register</p>
</li>
<li>
-<p>have to be convinced of the architecture</p>
+<p>Users must be able to consult their participation history</p>
</li>
<li>
-<p>have to work with the architecture or with code</p>
+<p>Each question must have one correct answer and several incorrect answers.</p>
</li>
<li>
-<p>need the documentation of the architecture for their work</p>
+<p>Questions must have a time limit to answer them</p>
</li>
<li>
-<p>have to come up with decisions about the system or its development</p>
+<p>Access to the user’s data must be allowed through an API.</p>
+</li>
+<li>
+<p>Access to the information of the generated questions must be allowed through an API.</p>
</li>
</ul>
</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>You should know all parties involved in development of the system or affected by the system.
-Otherwise, you may get nasty surprises later in the development process.
-These stakeholders determine the extent and the level of detail of your work and its results.</p>
</div>
+<div class="sect2">
+<h3 id="_quality_goals">1.2. Quality Goals</h3>
<div class="paragraph">
-<div class="title">Form</div>
-<p>Table with role names, person names, and their expectations with respect to the architecture and its documentation.</p>
-</div>
+<p>The quality goals in order of priority are as follows:</p>
</div>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Quality goal</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Usability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application must be easy to understand and use</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Performance efficiency</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Question generation must be efficient</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Security</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The confidentiality and integrity of user data must be ensured</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Maintainability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application must be testable and easily modifiable</p></td>
+</tr>
+</tbody>
+</table>
</div>
+<div class="sect2">
+<h3 id="_stakeholders">1.3. Stakeholders</h3>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 20%;">
@@ -693,14 +657,24 @@ <h3 id="_stakeholders">1.3. Stakeholders</h3>
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Role-1></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Contact-1></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Expectation-1></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Teachers</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">They interact with the development team and review the project to detect and correct errors</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application must meet all functional requirements and must follow the quality goals</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">RTVE (client)</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Company commissioning the development of the application</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The company hopes that the application will be easy to use for all users and that it will be a good version of its "Saber y Ganar" programme</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Role-2></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Contact-2></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Expectation-2></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Development Team</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">They are the creators of the project</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">They must develop an application that meets all the requirements and is attractive in order to attract as many users as possible</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Users</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">End-users who will interact with the application</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">They expect it to be user-friendly, attractive and similar to the programme it imitates ("Saber y Ganar")</p></td>
</tr>
</tbody>
</table>
@@ -711,856 +685,718 @@ <h3 id="_stakeholders">1.3. Stakeholders</h3>
<div class="sect1">
<h2 id="section-architecture-constraints">2. Architecture Constraints</h2>
<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>Any requirement that constraints software architects in their freedom of design and implementation decisions or decision about the development process. These constraints sometimes go beyond individual systems and are valid for whole organizations and companies.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Architects should know exactly where they are free in their design decisions and where they must adhere to constraints.
-Constraints must always be dealt with; they may be negotiable, though.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>Simple tables of constraints with explanations.
-If needed you can subdivide them into
-technical constraints, organizational and political constraints and
-conventions (e.g. programming or versioning guidelines, documentation or naming conventions)</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-2/">Architecture Constraints</a> in the arc42 documentation.</p>
-</div>
+<div class="sect2">
+<h3 id="_technical_constraints">2.1. Technical constraints</h3>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Constraint</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Wikidata</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The generation of the questions should be done automatically with the data from Wikidata</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Web access</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application must be accessible via the web</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Git and GitHub</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Version control and project tracking will be done using Git. GitHub is used to remotely store the repositories</p></td>
+</tr>
+</tbody>
+</table>
</div>
+<div class="sect2">
+<h3 id="_organizational_constraints">2.2. Organizational constraints</h3>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Constraint</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Team</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The development team is composed of 6 people</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Repository control</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The repository has a "main" and a "develop" branch and numerous "feature" branches where new functionalities are developed</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Meetings</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">At least one weekly team meeting is held to maintain proper organisation</p></td>
+</tr>
+</tbody>
+</table>
</div>
+<div class="sect2">
+<h3 id="_conventions">2.3. Conventions</h3>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Convention</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Arc42</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The arc42 template is used in the documentation</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">AsciiDoc</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The documentation is done using AsciiDoc as markup language</p></td>
+</tr>
+</tbody>
+</table>
<div style="page-break-after: always;"></div>
</div>
</div>
+</div>
+<h1 id="section-system-scope-and-context" class="sect0">System Scope and Context</h1>
+<hr>
<div class="sect1">
-<h2 id="section-system-scope-and-context">3. System Scope and Context</h2>
+<h2 id="_contents">1. Contents</h2>
<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
+<div class="sect2">
+<h3 id="_scope_and_context">1.1. Scope and context</h3>
<div class="paragraph">
-<div class="title">Contents</div>
-<p>System scope and context - as the name suggests - delimits your system (i.e. your scope) from all its communication partners
-(neighboring systems and users, i.e. the context of your system). It thereby specifies the external interfaces.</p>
+<p>This project aims to develop a quiz game.
+The main constraints are developing the game as a web app and using Wikidata to obtain the questions and answers.</p>
</div>
-<div class="paragraph">
-<p>If necessary, differentiate the business context (domain specific inputs and outputs) from the technical context (channels, protocols, hardware).</p>
+<hr>
</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>The domain interfaces and technical interfaces to communication partners are among your system’s most critical aspects. Make sure that you completely understand them.</p>
</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>Various options:</p>
</div>
+<div class="sect1">
+<h2 id="_business_context">2. Business Context</h2>
+<div class="sectionbody">
+<div class="sect2 arc42help">
+<h3 id="_contents_2">2.1. Contents</h3>
<div class="ulist">
<ul>
<li>
-<p>Context diagrams</p>
+<p><strong>Users:</strong> They interact directly with the application through the user interface provided by the frontend using React, HTML, CSS, and JavaScript.</p>
</li>
<li>
-<p>Lists of communication partners and their interfaces.</p>
+<p><strong>Wikidata API:</strong> The application communicates with the Wikidata service to obtain questions and answers related to different topics. Requests are made using the HTTP protocol, and response data is received in JSON format.</p>
</li>
</ul>
</div>
+<hr>
+</div>
+<div class="sect2">
+<h3 id="_motivation">2.2. Motivation</h3>
<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-3/">Context and Scope</a> in the arc42 documentation.</p>
+<p>Regarding the information exchanged with the application, it will require having a registered account to play, and it will also exchange information with a MongoDB database and Wikidata itself to obtain the questions.</p>
</div>
+<hr>
</div>
+<div class="sect2">
+<h3 id="_form">2.3. Form</h3>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 25%;">
+<col style="width: 25%;">
+<col style="width: 25%;">
+<col style="width: 25%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Quiz Game</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Comunication Partners</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Inputs</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Outputs</strong></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Users</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User Interface</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User answers</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Game questions</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Wikidata API</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">API Service</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Question requests</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">JSON Responses</p></td>
+</tr>
+</tbody>
+</table>
+<hr>
</div>
<div class="sect2">
-<h3 id="_business_context">3.1. Business Context</h3>
-<div class="sidebarblock arc42help">
+<h3 id="_context_diagram">2.4. Context diagram</h3>
+<div class="imageblock">
<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>Specification of <strong>all</strong> communication partners (users, IT-systems, …​) with explanations of domain specific inputs and outputs or interfaces.
-Optionally you can add domain specific formats or communication protocols.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>All stakeholders should understand which data are exchanged with the environment of the system.</p>
+<img src="./images/context.png" alt="context" width="1021" height="578">
</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>All kinds of diagrams that show the system as a black box and specify the domain interfaces to communication partners.</p>
-</div>
-<div class="paragraph">
-<p>Alternatively (or additionally) you can use a table.
-The title of the table is the name of your system, the three columns contain the name of the communication partner, the inputs, and the outputs.</p>
</div>
+<hr>
</div>
</div>
-<div class="paragraph">
-<p><strong><Diagram or Table></strong></p>
</div>
-<div class="paragraph">
-<p><strong><optionally: Explanation of external domain interfaces></strong></p>
+<div class="sect1">
+<h2 id="_technical_context">3. Technical Context</h2>
+<div class="sectionbody">
+<div class="sect2 arc42help">
+<h3 id="_contents_3">3.1. Contents</h3>
+<div class="ulist">
+<ul>
+<li>
+<p><strong>HTTP Channel:</strong> The application uses the HTTP protocol to communicate with the Wikidata API service.</p>
+</li>
+<li>
+<p><strong>MongoDB Data Channel:</strong> Interactions with the MongoDB database allow for storing and retrieving questions and answers.</p>
+</li>
+</ul>
</div>
+<hr>
</div>
<div class="sect2">
-<h3 id="_technical_context">3.2. Technical Context</h3>
-<div class="sidebarblock arc42help">
+<h3 id="_deployment_diagram">3.2. Deployment diagram</h3>
+<div class="imageblock">
<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>Technical interfaces (channels and transmission media) linking your system to its environment. In addition a mapping of domain specific input/output to the channels, i.e. an explanation which I/O uses which channel.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Many stakeholders make architectural decision based on the technical interfaces between the system and its context. Especially infrastructure or hardware designers decide these technical interfaces.</p>
+<img src="./images/deployment.png" alt="deployment" width="1076" height="578">
</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>E.g. UML deployment diagram describing channels to neighboring systems,
-together with a mapping table showing the relationships between channels and input/output.</p>
</div>
+<div style="page-break-after: always;"></div>
</div>
</div>
-<div class="paragraph">
-<p><strong><Diagram or Table></strong></p>
</div>
+<h1 id="section-solution-strategy" class="sect0">Solution Strategy</h1>
+<div class="sect1 arc42help">
+<h2 id="_contents_4">1. Contents</h2>
+<div class="sectionbody">
<div class="paragraph">
-<p><strong><optionally: Explanation of technical interfaces></strong></p>
+<p>This page contains a short summary and explanation of the fundamental decisions and solution strategies, that shape system architecture.</p>
</div>
+<hr>
+<div class="sect2">
+<h3 id="_technology_decisions">1.1. Technology Decisions</h3>
<div class="paragraph">
-<p><strong><Mapping Input/Output to Channels></strong></p>
-</div>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-solution-strategy">4. Solution Strategy</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>A short summary and explanation of the fundamental decisions and solution strategies, that shape system architecture. It includes</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>technology decisions</p>
-</li>
-<li>
-<p>decisions about the top-level decomposition of the system, e.g. usage of an architectural pattern or design pattern</p>
-</li>
-<li>
-<p>decisions on how to achieve key quality goals</p>
-</li>
-<li>
-<p>relevant organizational decisions, e.g. selecting a development process or delegating certain tasks to third parties.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>These decisions form the cornerstones for your architecture. They are the foundation for many other detailed decisions or implementation rules.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>Keep the explanations of such key decisions short.</p>
-</div>
-<div class="paragraph">
-<p>Motivate what was decided and why it was decided that way,
-based upon problem statement, quality goals and key constraints.
-Refer to details in the following sections.</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-4/">Solution Strategy</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-building-block-view">5. Building Block View</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Content</div>
-<p>The building block view shows the static decomposition of the system into building blocks (modules, components, subsystems, classes, interfaces, packages, libraries, frameworks, layers, partitions, tiers, functions, macros, operations, data structures, …​) as well as their dependencies (relationships, associations, …​)</p>
-</div>
-<div class="paragraph">
-<p>This view is mandatory for every architecture documentation.
-In analogy to a house this is the <em>floor plan</em>.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Maintain an overview of your source code by making its structure understandable through
-abstraction.</p>
-</div>
-<div class="paragraph">
-<p>This allows you to communicate with your stakeholder on an abstract level without disclosing implementation details.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>The building block view is a hierarchical collection of black boxes and white boxes
-(see figure below) and their descriptions.</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="./images/05_building_blocks-EN.png" alt="Hierarchy of building blocks">
-</div>
-</div>
-<div class="paragraph">
-<p><strong>Level 1</strong> is the white box description of the overall system together with black
-box descriptions of all contained building blocks.</p>
-</div>
-<div class="paragraph">
-<p><strong>Level 2</strong> zooms into some building blocks of level 1.
-Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.</p>
-</div>
-<div class="paragraph">
-<p><strong>Level 3</strong> zooms into selected building blocks of level 2, and so on.</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-5/">Building Block View</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_whitebox_overall_system">5.1. Whitebox Overall System</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you describe the decomposition of the overall system using the following white box template. It contains</p>
+<p>Below, all the technologies to be used in the development of the application are listed:</p>
</div>
<div class="ulist">
<ul>
<li>
-<p>an overview diagram</p>
+<p><strong>JavaScript / React:</strong> A JavaScript library designed to facilitate the development of web applications.</p>
</li>
<li>
-<p>a motivation for the decomposition</p>
+<p><strong>JavaScript / NodeJS:</strong> An asynchronous runtime environment based on JavaScript.</p>
</li>
<li>
-<p>black box descriptions of the contained building blocks. For these we offer you alternatives:</p>
-<div class="ulist">
-<ul>
-<li>
-<p>use <em>one</em> table for a short and pragmatic overview of all contained building blocks and their interfaces</p>
+<p><strong>MongoDB:</strong> A document-oriented NoSQL database system.</p>
</li>
<li>
-<p>use a list of black box descriptions of the building blocks according to the black box template (see below).
-Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).</p>
-</li>
-</ul>
-</div>
+<p><strong>Docker:</strong> Used for deploying applications locally.</p>
</li>
<li>
-<p>(optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box.
-Since there are so many ways to specify interfaces why do not provide a specific template for them.
- In the worst case you have to specify and describe syntax, semantics, protocols, error handling,
- restrictions, versions, qualities, necessary compatibilities and many things more.
-In the best case you will get away with examples or simple signatures.</p>
+<p><strong>Azure:</strong> Used for deploying applications on a server.</p>
</li>
</ul>
</div>
+<hr>
</div>
-</div>
+<div class="sect2">
+<h3 id="_top_level_decisions">1.2. Top-Level Decisions</h3>
<div class="paragraph">
-<p><em><strong><Overview Diagram></strong></em></p>
+<p>In this section, a summarized list of all decisions regarding the architecture of the application is included.</p>
</div>
-<div class="dlist">
-<dl>
-<dt class="hdlist1">Motivation</dt>
-<dd>
-<p><em><text explanation></em></p>
-</dd>
-<dt class="hdlist1">Contained Building Blocks</dt>
-<dd>
-<p><em><Description of contained building block (black boxes)></em></p>
-</dd>
-<dt class="hdlist1">Important Interfaces</dt>
-<dd>
-<p><em><Description of important interfaces></em></p>
-</dd>
-</dl>
-</div>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Insert your explanations of black boxes from level 1:</p>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 50%;">
+<col style="width: 50%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Architectural Pattern</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">In this project, the pattern based on the Microservices model is used.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Frontend (Client)</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">React: Building the user interface</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Backend (Server)</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">NodeJS: Building the server on the backend</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Mongoose: Interaction with the database</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Database</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">MongoDB: NoSQL database storing data in BSON format</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Deployment</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Azure cloud services</p></td>
+</tr>
+</tbody>
+</table>
+<hr>
</div>
+<div class="sect2">
+<h3 id="_quality_goals_2">1.3. Quality Goals</h3>
<div class="paragraph">
-<p>If you use tabular form you will only describe your black boxes with name and
-responsibility according to the following schema:</p>
+<p>Next, several quality goals are established, along with the decisions made to achieve them.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
-<col style="width: 33.3333%;">
-<col style="width: 66.6667%;">
+<col style="width: 50%;">
+<col style="width: 50%;">
</colgroup>
<thead>
<tr>
-<th class="tableblock halign-left valign-top"><strong>Name</strong></th>
-<th class="tableblock halign-left valign-top"><strong>Responsibility</strong></th>
+<th class="tableblock halign-left valign-top"><strong>Quality Goal</strong></th>
+<th class="tableblock halign-left valign-top"><strong>Decisions</strong></th>
</tr>
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><black box 1></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"> <em><Text></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Usability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Creation of a responsive interface adaptable to all types of screens.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Accessibility</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Compliance with accessibility standards to ensure a usable application.</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><black box 2></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"> <em><Text></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Maintainability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">A structured project that facilitates the maintainability of the application.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Testing</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Assurance of a fully functional and error-free application.</p></td>
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p>If you use a list of black box descriptions then you fill in a separate black box template for every important building block .
-Its headline is the name of the black box.</p>
-</div>
+<hr>
</div>
+<div class="sect2">
+<h3 id="_relevant_organizational">1.4. Relevant Organizational</h3>
+<div class="paragraph">
+<p>Regarding the organization of the team, we have decided to use agile methodologies for better and faster group work. In this project, we will follow the best practices of the SCRUM framework.</p>
</div>
-<div class="sect3">
-<h4 id="_name_black_box_1">5.1.1. <Name black box 1></h4>
-<div class="sidebarblock arc42help">
-<div class="content">
<div class="paragraph">
-<p>Here you describe <black box 1>
-according the the following black box template:</p>
+<p>Practices to be followed:</p>
</div>
<div class="ulist">
<ul>
<li>
-<p>Purpose/Responsibility</p>
+<p>Division of the project into <strong>tasks</strong>.</p>
</li>
<li>
-<p>Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.</p>
+<p>Equitable <strong>assignment</strong> of tasks.</p>
</li>
<li>
-<p>(Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, …​.</p>
+<p>Frequent <strong>meetings</strong> on the progress of the application.</p>
</li>
<li>
-<p>(Optional) directory/file location</p>
-</li>
-<li>
-<p>(Optional) Fulfilled requirements (if you need traceability to requirements).</p>
-</li>
-<li>
-<p>(Optional) Open issues/problems/risks</p>
+<p>Construction of <strong>"Alpha"</strong> versions before the final release.</p>
</li>
</ul>
</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em><Purpose/Responsibility></em></p>
-</div>
<div class="paragraph">
-<p><em><Interface(s)></em></p>
+<p>Additionally, "Issues" and the GitHub-provided Kanban (ToDo - In Progress - Done) are used for communication.</p>
</div>
-<div class="paragraph">
-<p><em><(Optional) Quality/Performance Characteristics></em></p>
-</div>
-<div class="paragraph">
-<p><em><(Optional) Directory/File Location></em></p>
-</div>
-<div class="paragraph">
-<p><em><(Optional) Fulfilled Requirements></em></p>
+<hr>
</div>
+<div class="sect2">
+<h3 id="_motivation_2">1.5. Motivation</h3>
<div class="paragraph">
-<p><em><(optional) Open Issues/Problems/Risks></em></p>
+<p>This section addresses the fundamental decisions for the project’s architecture.</p>
</div>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 50%;">
+<col style="width: 50%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Data Management</strong></p></td>
+<td class="tableblock halign-left valign-top"></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Deployment</strong></p></td>
+<td class="tableblock halign-left valign-top"></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Security</strong></p></td>
+<td class="tableblock halign-left valign-top"></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Monitoring</strong></p></td>
+<td class="tableblock halign-left valign-top"></td>
+</tr>
+</tbody>
+</table>
+<div style="page-break-after: always;"></div>
</div>
-<div class="sect3">
-<h4 id="_name_black_box_2">5.1.2. <Name black box 2></h4>
-<div class="paragraph">
-<p><em><black box template></em></p>
</div>
</div>
-<div class="sect3">
-<h4 id="_name_black_box_n">5.1.3. <Name black box n></h4>
-<div class="paragraph">
-<p><em><black box template></em></p>
+<div class="sect1">
+<h2 id="section-building-block-view">2. Building Block View</h2>
+<div class="sectionbody">
+<div class="sect2">
+<h3 id="_level_1_whitebox_of_the_overall_system">2.1. Level 1: Whitebox of the Overall System</h3>
+<div class="imageblock">
+<div class="content">
+<img src="./images/level1.png" alt="level1" width="1016" height="578">
</div>
</div>
<div class="sect3">
-<h4 id="_name_interface_1">5.1.4. <Name interface 1></h4>
+<h4 id="_motivation_3">2.1.1. Motivation</h4>
<div class="paragraph">
-<p>…​</p>
+<p><strong><em>WIQ</em></strong> application is the general structure of a system in which users will have the possibility to play a game like <em>Saber y Ganar</em> and compare their results with their friends.</p>
</div>
</div>
<div class="sect3">
-<h4 id="_name_interface_m">5.1.5. <Name interface m></h4>
-
+<h4 id="_contained_building_blocks">2.1.2. Contained building blocks</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>User</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Client of the application which will interact with it.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>WIQ</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">System developed to be used by the users.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>WIKIDATA</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Aplication to generate the questions and answers.</p></td>
+</tr>
+</tbody>
+</table>
</div>
</div>
<div class="sect2">
-<h3 id="_level_2">5.2. Level 2</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.</p>
-</div>
-<div class="paragraph">
-<p>You have to decide which building blocks of your system are important enough to justify such a detailed description.
-Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks.
-Leave out normal, simple, boring or standardized parts of your system</p>
-</div>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_white_box_building_block_1">5.2.1. White Box <em><building block 1></em></h4>
-<div class="sidebarblock arc42help">
+<h3 id="_level_2">2.2. Level 2</h3>
+<div class="imageblock">
<div class="content">
-<div class="paragraph">
-<p>…​describes the internal structure of <em>building block 1</em>.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em><white box template></em></p>
+<img src="./images/level2.png" alt="level2" width="1022" height="578">
</div>
</div>
<div class="sect3">
-<h4 id="_white_box_building_block_2">5.2.2. White Box <em><building block 2></em></h4>
+<h4 id="_motivation_4">2.2.1. Motivation</h4>
<div class="paragraph">
-<p><em><white box template></em></p>
-</div>
-<div class="paragraph">
-<p>…​</p>
+<p>Shows how the application will work internally. The user, through the user interface, will use microservices to access the different modules with the help of the database.</p>
</div>
</div>
<div class="sect3">
-<h4 id="_white_box_building_block_m">5.2.3. White Box <em><building block m></em></h4>
-<div class="paragraph">
-<p><em><white box template></em></p>
-</div>
+<h4 id="_contained_building_blocks_2">2.2.2. Contained building blocks</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>User Interface</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The user will interact with the UI.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>Microservices</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It is the backend of the UI, formed by different modules.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>DataBase</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">MongoDB is the chosen NoSQL database management system. It stores all the information necessary for the proper functioning of the application.</p></td>
+</tr>
+</tbody>
+</table>
</div>
</div>
<div class="sect2">
-<h3 id="_level_3">5.3. Level 3</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you can specify the inner structure of (some) building blocks from level 2 as white boxes.</p>
-</div>
-<div class="paragraph">
-<p>When you need more detailed levels of your architecture please copy this
-part of arc42 for additional levels.</p>
-</div>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_white_box_building_block_x_1">5.3.1. White Box <_building block x.1_></h4>
-<div class="sidebarblock arc42help">
+<h3 id="_level_3">2.3. Level 3</h3>
+<div class="imageblock">
<div class="content">
-<div class="paragraph">
-<p>Specifies the internal structure of <em>building block x.1</em>.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em><white box template></em></p>
+<img src="./images/level3.png" alt="level3" width="1039" height="578">
</div>
</div>
<div class="sect3">
-<h4 id="_white_box_building_block_x_2">5.3.2. White Box <_building block x.2_></h4>
+<h4 id="_motivation_5">2.3.1. Motivation</h4>
<div class="paragraph">
-<p><em><white box template></em></p>
+<p>Detailed structure of the system. Focused on the components of the <em>User Interface</em> and <em>Data Access</em>.</p>
</div>
</div>
<div class="sect3">
-<h4 id="_white_box_building_block_y_1">5.3.3. White Box <_building block y.1_></h4>
-<div class="paragraph">
-<p><em><white box template></em></p>
-</div>
+<h4 id="_contained_building_blocks_3">2.3.2. Contained Building Blocks</h4>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 16.6666%;">
+<col style="width: 83.3334%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Name</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>Game</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Game screen where the user can play the game.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>Ranking</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It contains the best scores recorded in the game, including the user’s highest score and the scores of other users belonging to their group.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>History</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Contains all user participations with the number of games played, correct/incorrect answers, and times.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>About</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Contains important information about the project, like the development method, the developers and how to contact them.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>Users Service</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Allows the client to create a new account for the application, log in and log out.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong><em>Question service</em></strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Allows to ask him questions and receive the answers of them.</p></td>
+</tr>
+</tbody>
+</table>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
</div>
<div class="sect1">
-<h2 id="section-runtime-view">6. Runtime View</h2>
+<h2 id="section-runtime-view">3. Runtime View</h2>
<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>The runtime view describes concrete behavior and interactions of the system’s building blocks in form of scenarios from the following areas:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>important use cases or features: how do building blocks execute them?</p>
-</li>
-<li>
-<p>interactions at critical external interfaces: how do building blocks cooperate with users and neighboring systems?</p>
-</li>
-<li>
-<p>operation and administration: launch, start-up, stop</p>
-</li>
-<li>
-<p>error and exception scenarios</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>Remark: The main criterion for the choice of possible scenarios (sequences, workflows) is their <strong>architectural relevance</strong>. It is <strong>not</strong> important to describe a large number of scenarios. You should rather document a representative selection.</p>
-</div>
+<div class="sect2">
+<h3 id="_login">3.1. Login</h3>
<div class="paragraph">
-<div class="title">Motivation</div>
-<p>You should understand how (instances of) building blocks of your system perform their job and communicate at runtime.
-You will mainly capture scenarios in your documentation to communicate your architecture to stakeholders that are less willing or able to read and understand the static models (building block view, deployment view).</p>
+<p>For the login, the app shows the login view, which asks the user for his username and his password.</p>
</div>
<div class="paragraph">
-<div class="title">Form</div>
-<p>There are many notations for describing scenarios, e.g.</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>numbered list of steps (in natural language)</p>
-</li>
-<li>
-<p>activity diagrams or flow charts</p>
-</li>
-<li>
-<p>sequence diagrams</p>
-</li>
-<li>
-<p>BPMN or EPCs (event process chains)</p>
-</li>
-<li>
-<p>state machines</p>
-</li>
-<li>
-<p>…​</p>
-</li>
-</ul>
+<p>Then, the app does a login request to the users microservice, which redirect the user to the identity provider, which handles the authentication.</p>
</div>
<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-6/">Runtime View</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_runtime_scenario_1">6.1. <Runtime Scenario 1></h3>
-<div class="ulist">
-<ul>
-<li>
-<p><em><insert runtime diagram or textual description of the scenario></em></p>
-</li>
-<li>
-<p><em><insert description of the notable aspects of the interactions between the
-building block instances depicted in this diagram.></em></p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>It is possible to use a sequence diagram:</p>
+<p>If the login is succesfully, the app shows the different options of the game.
+In case the login isn’t succesfully, a warning message is shown.</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="./images/Sequence%20diagram.png" alt="Sequence diagram" width="332" height="335">
-</div>
+<img src="./images/sequencediagram-login.png" alt="sequencediagram login" width="509" height="508">
</div>
</div>
-<div class="sect2">
-<h3 id="_runtime_scenario_2">6.2. <Runtime Scenario 2></h3>
-
</div>
<div class="sect2">
-<h3 id="">6.3. …​</h3>
-
-</div>
-<div class="sect2">
-<h3 id="_runtime_scenario_n">6.4. <Runtime Scenario n></h3>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-deployment-view">7. Deployment View</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Content</div>
-<p>The deployment view describes:</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>technical infrastructure used to execute your system, with infrastructure elements like geographical locations, environments, computers, processors, channels and net topologies as well as other infrastructure elements and</p>
-</li>
-<li>
-<p>mapping of (software) building blocks to that infrastructure elements.</p>
-</li>
-</ol>
-</div>
+<h3 id="_game">3.2. Game</h3>
<div class="paragraph">
-<p>Often systems are executed in different environments, e.g. development environment, test environment, production environment. In such cases you should document all relevant environments.</p>
+<p>When the user starts a game, the app generates a question and request the correct answer to the WikiData API. When the user choose a posible answer, the app checks if it is the correct answer. Then, this process is repeated until the end of the game.</p>
</div>
-<div class="paragraph">
-<p>Especially document a deployment view if your software is executed as distributed system with more than one computer, processor, server or container or when you design and construct your own hardware processors and chips.</p>
-</div>
-<div class="paragraph">
-<p>From a software perspective it is sufficient to capture only those elements of an infrastructure that are needed to show a deployment of your building blocks. Hardware architects can go beyond that and describe an infrastructure to any level of detail they need to capture.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Software does not run without hardware.
-This underlying infrastructure can and will influence a system and/or some
-cross-cutting concepts. Therefore, there is a need to know the infrastructure.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>Maybe a highest level deployment diagram is already contained in section 3.2. as
-technical context with your own infrastructure as ONE black box. In this section one can
-zoom into this black box using additional deployment diagrams:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>UML offers deployment diagrams to express that view. Use it, probably with nested diagrams,
-when your infrastructure is more complex.</p>
-</li>
-<li>
-<p>When your (hardware) stakeholders prefer other kinds of diagrams rather than a deployment diagram, let them use any kind that is able to show nodes and channels of the infrastructure.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-7/">Deployment View</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_infrastructure_level_1">7.1. Infrastructure Level 1</h3>
-<div class="sidebarblock arc42help">
+<div class="imageblock">
<div class="content">
-<div class="paragraph">
-<p>Describe (usually in a combination of diagrams, tables, and text):</p>
+<img src="./images/sequencediagram-game.png" alt="sequencediagram game" width="632" height="612">
</div>
-<div class="ulist">
-<ul>
-<li>
-<p>distribution of a system to multiple locations, environments, computers, processors, .., as well as physical connections between them</p>
-</li>
-<li>
-<p>important justifications or motivations for this deployment structure</p>
-</li>
-<li>
-<p>quality and/or performance features of this infrastructure</p>
-</li>
-<li>
-<p>mapping of software artifacts to elements of this infrastructure</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>For multiple environments or alternative deployments please copy and adapt this section of arc42 for all relevant environments.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p><em><strong><Overview Diagram></strong></em></p>
-</div>
-<div class="dlist">
-<dl>
-<dt class="hdlist1">Motivation</dt>
-<dd>
-<p><em><explanation in text form></em></p>
-</dd>
-<dt class="hdlist1">Quality and/or Performance Features</dt>
-<dd>
-<p><em><explanation in text form></em></p>
-</dd>
-<dt class="hdlist1">Mapping of Building Blocks to Infrastructure</dt>
-<dd>
-<p><em><description of the mapping></em></p>
-</dd>
-</dl>
</div>
</div>
<div class="sect2">
-<h3 id="_infrastructure_level_2">7.2. Infrastructure Level 2</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<p>Here you can include the internal structure of (some) infrastructure elements from level 1.</p>
-</div>
-<div class="paragraph">
-<p>Please copy the structure from level 1 for each selected element.</p>
-</div>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_1">7.2.1. <em><Infrastructure Element 1></em></h4>
-<div class="paragraph">
-<p><em><diagram + explanation></em></p>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_2">7.2.2. <em><Infrastructure Element 2></em></h4>
-<div class="paragraph">
-<p><em><diagram + explanation></em></p>
-</div>
-<div class="paragraph">
-<p>…​</p>
-</div>
-</div>
-<div class="sect3">
-<h4 id="_infrastructure_element_n">7.2.3. <em><Infrastructure Element n></em></h4>
-<div class="paragraph">
-<p><em><diagram + explanation></em></p>
-</div>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-concepts">8. Cross-cutting Concepts</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
+<h3 id="_ranking">3.3. Ranking</h3>
<div class="paragraph">
-<div class="title">Content</div>
-<p>This section describes overall, principal regulations and solution ideas that are relevant in multiple parts (= cross-cutting) of your system.
-Such concepts are often related to multiple building blocks.
-They can include many different topics, such as</p>
+<p>In this view, the user can watch different rankings:</p>
</div>
<div class="ulist">
<ul>
<li>
-<p>models, especially domain models</p>
-</li>
-<li>
-<p>architecture or design patterns</p>
-</li>
-<li>
-<p>rules for using specific technology</p>
+<p>Ordered by accuracy percentage</p>
</li>
<li>
-<p>principal, often technical decisions of an overarching (= cross-cutting) nature</p>
+<p>Ordered by number of questions answered correctly</p>
</li>
<li>
-<p>implementation rules</p>
+<p>Ordered by quantity of game rounds</p>
</li>
</ul>
</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>Concepts form the basis for <em>conceptual integrity</em> (consistency, homogeneity) of the architecture.
-Thus, they are an important contribution to achieve inner qualities of your system.</p>
-</div>
-<div class="paragraph">
-<p>Some of these concepts cannot be assigned to individual building blocks, e.g. security or safety.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>The form can be varied:</p>
+<div class="imageblock">
+<div class="content">
+<img src="./images/sequencediagram-ranking.png" alt="sequencediagram ranking" width="408" height="305">
</div>
-<div class="ulist">
-<ul>
-<li>
-<p>concept papers with any kind of structure</p>
-</li>
-<li>
-<p>cross-cutting model excerpts or scenarios using notations of the architecture views</p>
-</li>
-<li>
-<p>sample implementations, especially for technical concepts</p>
-</li>
-<li>
-<p>reference to typical usage of standard frameworks (e.g. using Hibernate for object/relational mapping)</p>
-</li>
-</ul>
</div>
+</div>
+<div class="sect2">
+<h3 id="_history">3.4. History</h3>
<div class="paragraph">
-<div class="title">Structure</div>
-<p>A potential (but not mandatory) structure for this section could be:</p>
+<p>In this view, the user can watch this options about his past games:</p>
</div>
<div class="ulist">
<ul>
<li>
-<p>Domain concepts</p>
-</li>
-<li>
-<p>User Experience concepts (UX)</p>
-</li>
-<li>
-<p>Safety and security concepts</p>
-</li>
-<li>
-<p>Architecture and design patterns</p>
+<p>Number of games played</p>
</li>
<li>
-<p>"Under-the-hood"</p>
+<p>Best times</p>
</li>
<li>
-<p>development concepts</p>
-</li>
-<li>
-<p>operational concepts</p>
+<p>Correct/incorrect questions</p>
</li>
</ul>
</div>
-<div class="paragraph">
-<p>Note: it might be difficult to assign individual concepts to one specific topic
-on this list.</p>
-</div>
<div class="imageblock">
<div class="content">
-<img src="./images/08-Crosscutting-Concepts-Structure-EN.png" alt="Possible topics for crosscutting concepts">
+<img src="./images/sequencediagram-history.png" alt="sequencediagram history" width="362" height="305">
</div>
</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-8/">Concepts</a> in the arc42 documentation.</p>
+<div style="page-break-after: always;"></div>
+</div>
</div>
+</div>
+<div class="sect1">
+<h2 id="section-deployment-view">4. Deployment View</h2>
+<div class="sectionbody">
+<div class="sidebarblock arc42help">
+<div class="content">
+
</div>
</div>
<div class="sect2">
-<h3 id="_concept_1">8.1. <em><Concept 1></em></h3>
+<h3 id="_infrastructure_level_1">4.1. Infrastructure Level 1</h3>
+<div class="sidebarblock arc42help">
+<div class="content">
+<div class="imageblock text-center">
+<div class="content">
+<a class="image" href=""Diag_Comp.jpg"><img src="./images/Diag_Comp.jpg" alt="Diag Comp"></a>
+</div>
+<div class="title">Figure 1. Deployment Diagram</div>
+</div>
+<div class="dlist">
+<dl>
+<dt class="hdlist1">Motivation</dt>
+<dd>
+<p>The system is based in microservices architecture with three independent services, each responsible for a specific aspect of the functionality. One service is the Graphic interface, this service handles the presentation layer of a web application. Another service is tasked with managing user-related functionalities. MongoDB, a NoSQL database, is used to store and manage user data efficiently. The third service utilizes Wikidata, a free open base, to automatically generate questions.</p>
+</dd>
+<dt class="hdlist1">Quality and/or Performance Features</dt>
+<dd>
+<p>The main reason we have chosen a microservices architecture is to achieve a fast and efficient application.. The availability and efficiency of the application will be affected by Wikidata’s availability, but just in the question generation moment.</p>
+</dd>
+<dt class="hdlist1">Mapping of Building Blocks to Infrastructure</dt>
+</dl>
+</div>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top"><strong>Element</strong></th>
+<th class="tableblock halign-left valign-top"><strong>Description</strong></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Browser</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The browser on the user’s device where they can access to the application.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>WebApp</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The graphical interface through which users can interact.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>API Gateway</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The API that comunicates the rest of the microservices with the graphical interface.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Question_Generator</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The microservice responsible for generating questions through Wikidata.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Wikidata</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The Wikidata API that allows us to access its information.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Users</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>The microservice responsible for managing users.</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>MongoDB</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"> <em>A NoSQL based database where we can save the user’s data.</em></p></td>
+</tr>
+</tbody>
+</table>
+<div style="page-break-after: always;"></div>
+<div id="section-concepts" class="paragraph">
+<p>== Cross-cutting Concepts</p>
+</div>
+</div>
+</div>
+<div class="sidebarblock">
+<div class="content">
<div class="paragraph">
-<p><em><explanation></em></p>
+<p>=== <em>Domain Model</em></p>
</div>
+<div class="paragraph">
+<p><em>TBD</em></p>
</div>
-<div class="sect2">
-<h3 id="_concept_2">8.2. <em><Concept 2></em></h3>
<div class="paragraph">
-<p><em><explanation></em></p>
+<p>=== <em>Security</em></p>
+</div>
+<div class="paragraph">
+<p><em>The communication between the application’s APIs will be through the secure mode of HTTP.</em></p>
+</div>
+<div class="paragraph">
+<p>=== <em>Privacy</em></p>
+</div>
+<div class="paragraph">
+<p><em>The user’s data will be stored in a MongoDb database. That implies that the information is stored securely.</em></p>
</div>
<div class="paragraph">
<p>…​</p>
</div>
+<div class="paragraph">
+<p>=== <em><Concept n></em></p>
</div>
-<div class="sect2">
-<h3 id="_concept_n">8.3. <em><Concept n></em></h3>
<div class="paragraph">
<p><em><explanation></em></p>
</div>
<div style="page-break-after: always;"></div>
+<div id="section-design-decisions" class="paragraph">
+<p>== Architecture Decisions</p>
</div>
</div>
</div>
-<div class="sect1">
-<h2 id="section-design-decisions">9. Architecture Decisions</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
<div class="paragraph">
<div class="title">Contents</div>
<p>Important, expensive, large scale or risky architecture decisions including rationales.
@@ -1601,16 +1437,44 @@ <h2 id="section-design-decisions">9. Architecture Decisions</h2>
<p>See <a href="https://docs.arc42.org/section-9/">Architecture Decisions</a> in the arc42 documentation.
There you will find links and examples about ADR.</p>
</div>
-</div>
-</div>
+<div class="sidebarblock">
+<div class="content">
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Decision</th>
+<th class="tableblock halign-left valign-top">Motivation</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Docker</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It is decided to use Docker due to its popularity in the professional field and its ease of execution thanks to the configuration files provided by the subject’s faculty.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">MongoDB</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It is decided to use MongoDB based on the recommendation of the faculty, as it is one of the most popular NoSQL databases and because it fits perfectly with the application’s needs.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">NodeJS</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It is decided to use NodeJS since it is the recommended option by the subject’s faculty and one of the most widely used technologies in this area of web applications, thus having extensive documentation and examples available on the Internet.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">React</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">It is decided to use React since it is the recommended option by the subject’s faculty.</p></td>
+</tr>
+</tbody>
+</table>
<div style="page-break-after: always;"></div>
+<div id="section-quality-scenarios" class="paragraph">
+<p>== Quality Requirements</p>
+</div>
</div>
</div>
-<div class="sect1">
-<h2 id="section-quality-scenarios">10. Quality Requirements</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
<div class="paragraph">
<div class="title">Content</div>
<p>This section contains all quality requirements as quality tree with scenarios. The most important ones have already been described in section 1.2. (quality goals)</p>
@@ -1629,12 +1493,13 @@ <h2 id="section-quality-scenarios">10. Quality Requirements</h2>
<div class="title">Further Information</div>
<p>See <a href="https://docs.arc42.org/section-10/">Quality Requirements</a> in the arc42 documentation.</p>
</div>
+<div class="sidebarblock">
+<div class="content">
+<div class="paragraph">
+<p>=== Quality Tree</p>
+</div>
</div>
</div>
-<div class="sect2">
-<h3 id="_quality_tree">10.1. Quality Tree</h3>
-<div class="sidebarblock arc42help">
-<div class="content">
<div class="paragraph">
<div class="title">Content</div>
<p>The quality tree (as defined in ATAM – Architecture Tradeoff Analysis Method) with quality/evaluation scenarios as leafs.</p>
@@ -1660,14 +1525,19 @@ <h3 id="_quality_tree">10.1. Quality Tree</h3>
<div class="paragraph">
<p>In any case the tree should include links to the scenarios of the following section.</p>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="./images/10-Quiality_Tree.png" alt="Quality Tree">
</div>
</div>
-</div>
-<div class="sect2">
-<h3 id="_quality_scenarios">10.2. Quality Scenarios</h3>
-<div class="sidebarblock arc42help">
+<div class="sidebarblock">
<div class="content">
<div class="paragraph">
+<p>=== Quality Scenarios</p>
+</div>
+</div>
+</div>
+<div class="paragraph">
<div class="title">Contents</div>
<p>Concretization of (sometimes vague or implicit) quality requirements using (quality) scenarios.</p>
</div>
@@ -1701,80 +1571,139 @@ <h3 id="_quality_scenarios">10.2. Quality Scenarios</h3>
<div class="title">Form</div>
<p>Tabular or free form text.</p>
</div>
-</div>
-</div>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-technical-risks">11. Risks and Technical Debts</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
-<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>A list of identified technical risks or technical debts, ordered by priority</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>“Risk management is project management for grown-ups” (Tim Lister, Atlantic Systems Guild.)</p>
-</div>
-<div class="paragraph">
-<p>This should be your motto for systematic detection and evaluation of risks and technical debts in the architecture, which will be needed by management stakeholders (e.g. project managers, product owners) as part of the overall risk analysis and measurement planning.</p>
-</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>List of risks and/or technical debts, probably including suggested measures to minimize, mitigate or avoid risks or reduce technical debts.</p>
-</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-11/">Risks and Technical Debt</a> in the arc42 documentation.</p>
-</div>
-</div>
-</div>
-<div style="page-break-after: always;"></div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="section-glossary">12. Glossary</h2>
-<div class="sectionbody">
-<div class="sidebarblock arc42help">
+<div class="sidebarblock">
<div class="content">
-<div class="paragraph">
-<div class="title">Contents</div>
-<p>The most important domain and technical terms that your stakeholders use when discussing the system.</p>
-</div>
-<div class="paragraph">
-<p>You can also see the glossary as source for translations if you work in multi-language teams.</p>
-</div>
-<div class="paragraph">
-<div class="title">Motivation</div>
-<p>You should clearly define your terms, so that all stakeholders</p>
-</div>
<div class="ulist">
<ul>
<li>
-<p>have an identical understanding of these terms</p>
+<p>Usage Scenarios</p>
</li>
+</ul>
+</div>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 20%;">
+<col style="width: 40%;">
+<col style="width: 40%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Quality Goal</th>
+<th class="tableblock halign-left valign-top">Scenario</th>
+<th class="tableblock halign-left valign-top">Response</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Performance efficiency</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The user wants to start answering questions.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application generates a set of questions. This generation should be as fast as possible.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Usability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">A new user starts using the application.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">User should be able to do it without difficulty.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Security</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The application must encript sensible data.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Data will be only accessible by its owner.</p></td>
+</tr>
+</tbody>
+</table>
+<div class="ulist">
+<ul>
<li>
-<p>do not use synonyms and homonyms</p>
+<p>Change Scenarios</p>
</li>
</ul>
</div>
-<div class="paragraph">
-<div class="title">Form</div>
-<p>A table with columns <Term> and <Definition>.</p>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 20%;">
+<col style="width: 40%;">
+<col style="width: 40%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Quality Goal</th>
+<th class="tableblock halign-left valign-top">Scenario</th>
+<th class="tableblock halign-left valign-top">Response</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Maintainability</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Introduce new functionality.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Reuse key components in order to easily add that new functionality.</p></td>
+</tr>
+</tbody>
+</table>
+<div style="page-break-after: always;"></div>
+<div id="section-technical-risks" class="paragraph">
+<p>== Risks and Technical Debts
+=== Risks</p>
</div>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Risk</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Teamwork failures</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The distribution of tasks must be done effectively, so that if one member of the team does not perform an assigned task, it can be solved by another member.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Version management problems</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Errors in version control can delay the project. Ignorance of the branches and their purpose can lead to code conflicts.</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Lack of time</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Not planning work well can result in difficulties meeting deadlines</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Use of unknown technologies</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">The use of languages and technologies unknown to group members can make it difficult to perform assigned tasks</p></td>
+</tr>
+</tbody>
+</table>
<div class="paragraph">
-<p>Potentially more columns in case you need translations.</p>
+<p>=== Technical debts</p>
</div>
-<div class="paragraph">
-<div class="title">Further Information</div>
-<p>See <a href="https://docs.arc42.org/section-12/">Glossary</a> in the arc42 documentation.</p>
+<table class="tableblock frame-all grid-all stretch">
+<colgroup>
+<col style="width: 33.3333%;">
+<col style="width: 66.6667%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-left valign-top">Risk</th>
+<th class="tableblock halign-left valign-top">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">Insufficient documentation</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">A lack of clear documentation about code and architecture can make it difficult to understand and maintain code, leading to additional work.</p></td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+<div style="page-break-after: always;"></div>
</div>
</div>
</div>
+<div class="sect1">
+<h2 id="section-glossary">5. Glossary</h2>
+<div class="sectionbody">
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 33.3333%;">
@@ -1788,12 +1717,24 @@ <h2 id="section-glossary">12. Glossary</h2>
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Term-1></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><definition-1></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>React</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>JavScript library, we make use of this User Interface library on the front-end</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Docker</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>We use it to deploy applications within virtual containers</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Node.js</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>JavaScript runtime environment, we make use of this on the back-end</em></p></td>
+</tr>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>GitHub</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>Portal used to host the application code and documentation</em></p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><Term-2></em></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><em><definition-2></em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>MongoDB</em></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><em>NoSQL database management system used in the application</em></p></td>
</tr>
</tbody>
</table>