Tunisian Republic

Ministry of Higher Education

and Scientific Research
University of Carthage
Higher Institute of Information and
Communication Technologies

Graduation Report
Presented for the purpose of obtaining
Bachelor in Computer Engineering
Curriculum: Network and Systems Engineering

Design and realisation of an e-learning web

application

By
Anis Ben Youssef and Med Haroun Bouchamia
Company Name: Tabaani Inc

Publicly presented on May 26, 2023, in front of the jury composed by:

President: Mr. Nabil Chaabani, Professor, ISTIC

Reviewer: Mr. Moez Attia, Professor, ISTIC
Professional supervisor: Mr. Hamza Moussi, Founder and CEO, Tabaani
Academic supervisor: Ms. Nesrine Ben Rjab, Master Assistant, ISTIC

Academic year: 2022 - 2023

 Tunisian Republic
Ministry of Higher Education
and Scientific Research
University of Carthage
Higher Institute of Information and
Communication Technologies

Graduation Report
Presented for the purpose of obtaining
Bachelor in Computer Engineering
Curriculum: Network and Systems Engineering

Design and realisation of an e-learning web

application

By
Anis Ben Youssef and Med Haroun Bouchamia
Company Name: Tabaani Inc

Authorization to deposit the End-of-Studies Project Report:

Professional supervisor: Academic supervisor:

Mr. Hamza Moussi Ms. Nesrine Ben Rjab

Date: Date:

Signature: Signature:
Dedications

We dedicate this work to everyone who has supported and inspired us. Our
families. Our parents, our brothers, our sisters. You provided us with the
endless support we needed. You understood our crazy dreams and you pushed
us forward as we chase them! Thank you.

To every teacher who supported and inspired us. Thank you for teaching
us valuable things, for challenging us and pushing us to our limits, and for
making us believe in ourselves.

To our friends. When life gets tough, you are always there to cheer us up.
Thank you for being such amazing friends. We could never do it without
you.

To Everyone we love, Thanks for being so wonderful and kind to us. We

appreciate your support and understanding.

Anis Ben Youssef and Mohamed Haroun Bouchamia

i
Acknowledgment

Before presenting our work, we would like to thank all the people who contributed to the
success of our internship and who helped us in the preparation of this report.

First of all, we want to express our deep gratitude to the Tabaani family especially
Mr. Hamza Moussi for his help, relevant explanations, and valuable advice that have had
the greatest impact on this successful project, we would also like to thank Mr. Moukim
Hfaidh for helping us and being very kind and supportive.

We would like to thank our academic supervisor, Mrs. Nesrine Ben Rjab, a Master
Assistant at the Higher Institute of Information and Communication Technologies, for
her help and the valuable lessons we learned from her.

We would also like to thank all our professors for being very kind and caring. We love
you from the bottom of our hearts.

Finally, we would like to express our profound gratitude to the Director of the Higher
Institute of Information and Communication Technologies Mr. Lazher MANAI, the Head
of the study Mrs. Neila BEDOUI, and all members of the administration for the efforts
and care they have given to facilitate and make sure that we work in good conditions.

ii
Contents

General Introduction 1

1 Project context 2
1.1 Host overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.2 Information about the company . . . . . . . . . . . . . . . . . . . . 2
1.1.3 Company activities . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Project presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.1 Project description . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.2 Problematic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.3 Study of the existing . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.4 Proposed solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Work methodology and planning . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.1 Agile Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.2 Methodology adopted . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Specification of needs and modeling 8

2.1 Analysis and requirements specification . . . . . . . . . . . . . . . . . . . . 8
2.1.1 The actors of the system . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.2 Functional requirements . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1.3 Non-functional requirements . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Modelization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.1 Class diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Product backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4 Sprint planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Sprint planning 13
3.1 Sprint 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 Sprint planning 20
4.1 Sprint 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 Implementation 24
5.1 Work Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.1.1 Hardware Environment . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.1.2 Software Environment . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2 Development Technologies: . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

iii
Contents Contents

5.2.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.2 CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.3 React JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2.4 Node JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2.5 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2.6 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.7 Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.3 Architecture of the solution . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3.1 Technical architecture . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3.2 Used architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3.3 Design pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.4 Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

General Conclusion 46

Bibliography 47

iv
List of Figures

1.1 Tabaani Logo[1] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Tabaani Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Existing Training Program . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Agile manifesto [2] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Agile scrum [3] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Global Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.7 Global Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.8 Authentification Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . 14
3.9 Start Course Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . 16
3.10 Course Browsing and Searching Use Case Diagram . . . . . . . . . . . . . 17
3.11 Authentification sequence Diagram . . . . . . . . . . . . . . . . . . . . . . 18
4.12 Manage Course Content Use Case Diagram . . . . . . . . . . . . . . . . . . 21
4.13 Course Detail Page Use Case Diagram . . . . . . . . . . . . . . . . . . . . 21
4.14 FAQ Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.15 Progress Tracking Use Case Diagram . . . . . . . . . . . . . . . . . . . . . 23
5.16 Dell Logo [4] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.17 Lenovo Logo [5] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.18 VSCode [6] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.19 Github [7] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.20 Star UML [8] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.21 HTML5 [9] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.22 CSS [10] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.23 React JS [11] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.24 Node JS [12] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.25 JavaScript [13] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.26 TypeScript [14] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.27 Firebase [15] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.28 Types of database [16] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.29 NoSQL database types [17] . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.30 FLUX Flow [18] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.31 Redux Flow [19] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.32 Sign-UP model for creating profile . . . . . . . . . . . . . . . . . . . . . . . 32
5.33 Login to access your profile . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.34 Password Recovery Process . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.35 Email Recovery Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.36 Home Page Navigation Panel . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.37 Course Listings part1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.38 Course Listings part2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.39 Course Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

v
List of Figures List of Figures

5.40 Course Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

5.41 Courses FAQs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.42 Course Portal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.43 Video-Based Course Curriculum . . . . . . . . . . . . . . . . . . . . . . . . 41
5.44 Knowledge Assessment Exam . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.45 Course Exam Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.46 Course Exam Failure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.47 Module Completion Quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.48 Quiz Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.49 Content Management Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

vi
List of Tables

1.1 Tabaani data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Scrum Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Product Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Sprint Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.5 Authentication(Login) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.6 Authentication(Sign up) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.7 Authentication(Forget password) . . . . . . . . . . . . . . . . . . . . . . . 16
3.8 Start Course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.9 Browse Courses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.10 Search Courses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.11 Manage Course Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.12 Course Detail Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.13 FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.14 Progress Tracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.15 Hardware Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

vii
General Introduction

Traveling is a way for people to discover new cultures, meet people from all walks of life,
open up to other perspectives, and strengthen bonds between people. It is also a vehicle
for personal development, as it can help people step out of their comfort zone, learn new
skills, and grow as individuals.

The realm of tourism wields its immense power, pouring forth billions of dollars as a
wellspring of revenue year after year. In the year 2019, the international traveler influx
reached a staggering 1.5 billion, surging by 4 percent when juxtaposed with the previous
year, as reported by the esteemed establishment known as World of Tourism. This mon-
umental statistic serves as a testament to the burgeoning significance of tourism within
the economic sphere, fueling job creation and propelling the growth of numerous nations’
economies. Given its dynamic and fiercely competitive nature, this industry demands
the perpetual prowess to adapt to the ever-evolving needs and desires of its clientele.
Thus, the paramount focal point for tourism enterprises resides in the realm of customer
satisfaction, safety, and pure delight.

In this context, Tabaani works on facilitating the connection between local Ambas-
sadors with travelers from all around the world by hosting a private tour or experience in
their city. The report is divided into five chapters:

The first chapter aims to present the host company Tabaani, the project presentation,
the project requirements, and the proposed solution. as well as the methodology adopted.
The second chapter is devoted to defining the actors and specifying their functional
and non-functional needs, then presenting the system modelization.
The third and fourth chapters focus on the sprints of the Tabaani Host Academy
project and describe how the development process goes.
The fifth chapter is dedicated to the work environment, the technologies used, and the
realization of the Tabaani platform development.
In the end, we close our present report with a general conclusion.

1
Chapter 1

Project context

Introduction
In this chapter, we dedicated the presentation of the host company to which we carried
out our end-of-study graduation project. Then, we will present the project context and
describe the proposed solution. Finally, we will explain the work methodology followed
to carry out our project.

1.1 Host overview

Within this section, we shall unveil the inner workings of our esteemed host company,
delving deep into its intricate web of data and dynamic endeavors.

1.1.1 Presentation
Tabaani is a start-up founded on Mars in 2020. It is a web platform where travelers
looking for authentic unique experiences get to connect with Locals offering tour and hos-
pitality services allowing them to immerse into the local community and feel like locals.
This platform allows residents to monetize their free time while promoting their city and
providing sustainable tourism services. [20]

Figure 1.1: Tabaani Logo[1]

1.1.2 Information about the company

In Table 1.1 below, we will represent the company details.

2
Chapter 1 1.2. Project presentation

Company Characteristics
Sector Technology and Communications
Size 12 employees
Head office Mohamed V, Tunis
Type For Profit
Date of creation 2020
Contact contact@tabaani.co

Table 1.1: Tabaani data

Tabaani Structure

Figure 1.2: Tabaani Structure

1.1.3 Company activities

Tabaani aims to connect travelers with locals by promoting different destinations and
cities in the Mena region, by creating the most authentic experiences for individuals. Lo-
cals will not only be able to earn extra money but also connect with travelers and get the
chance to promote their own favorite destinations.

1.2 Project presentation

In this section, we will describe our project and the problem that the company face and
analyze the existing one, then we will present the proposed solution.

1.2.1 Project description

Today, thanks to technology, it is possible to find a multitude of accommodation offers by
hosts from different countries with a simple click on Google. Collaborative tourism plat-
forms have taken advantage of this trend by connecting travelers with local inhabitants,

3
Chapter 1 1.2. Project presentation

thus offering a more authentic and immersive travel experience. This evolution has also
created new opportunities for people who want to become hosts and share their culture
with travelers from all over the world. Tabaani is an ever-evolving platform that aims to
connect travelers with local hosts based on their destination. The company is constantly
looking for new ideas to guarantee an unforgettable experience for its users. In this order,
our idea is to offer an online training solution accessible to all potential hosts on the web
platform, aiming to help them become competent and professional hosts.

1.2.2 Problematic
Taabani has made a training program for the new host candidates by creating youtube
videos to teach them the basics of hosting and how to create a good experience for trav-
elers, but it faced major problems such as high dropout rates and a lack of interaction.
Tabaani worked to fix these problems, by adding some educational articles and case stud-
ies to the program, But they were unable to rectify these issues.

1.2.3 Study of the existing

The analysis of the existing training program allows us to study the shortcomings that
have disrupted the progress of the company.

Figure 1.3: Existing Training Program

Figure 1.3 shows the old Tabaani training program is based on a youtube course which
has many disadvantages such as:
• Quality of content: Host candidates may lose motivation or become displeased due
to the poor quality shown in the content.
• Absence of progress-tracking: Tabaani administration team can’t guarantee that
the host candidate completes the course and will be able to become the promised
host that the company desires.

4
Chapter 1 1.3. Work methodology and planning

1.2.4 Proposed solution

Tabaani could consider implementing standardized training and operating procedures for
hosts to ensure consistency and quality across all experiences offered on the platform.
This could include a comprehensive training program that covers everything from guest
interaction to safety protocols, as well as ongoing support and feedback to help hosts
continually improve their offerings.
By implementing these measures, Tabaani could create a more standardized and
streamlined experience for both hosts and travelers, which could help to build a loyal cus-
tomer base and drive repeat business. Additionally, having its own proprietary technology
platform and operating system could help Tabaani to differentiate itself from competitors
and establish itself as a leader in the travel industry.

1.3 Work methodology and planning

In this section, we are going to talk about agile methods and describe the methodology
adopted.

1.3.1 Agile Methods

The realm of Agile Software Development embodies a distinctive methodology, where flex-
ibility, collaboration, and the ultimate contentment of customers reign supreme. Rooted
in the bedrock of the Agile Manifesto, this approach encompasses a set of principles that
exalt the significance of individuals and their interactions, the manifestation of functional
software, the synergy fostered through customer collaboration, and the art of gracefully
adapting to change.
Embraced by software development teams far and wide, Agile Software Development
stands as a revered beacon of adaptability and pliability, tailor-made to cater to the
ever-evolving requisites and breakneck velocity of software development

Figure 1.4: Agile manifesto [2]

1.3.2 Methodology adopted

Unveiling itself as an agile development methodology, Scrum dances gracefully within the
realm of Software creation, driven by iterative and incremental processes. Acting as a
chameleon of efficiency, it presents itself as an adaptable, swift, pliable, and exceptionally

5
Chapter 1 1.3. Work methodology and planning

potent agile framework, meticulously engineered to bestow unceasing value upon the
customer’s doorstep throughout the entire project’s development.
At the heart of Scrum resides a noble quest: to satiate the customer’s yearnings,
nurtured within an environment of transparent communication, shared responsibility, and
ceaseless forward motion. Like a seedling sprouting from a faint notion, the development
process embarks upon its journey, intricately crafting a prioritized compendium of coveted
traits (product backlog) as envisioned by the product owner.
Finally, the why and how of Scrum, or the tools a Scrum team uses to prioritize and
communicate its work.

Figure 1.5: Agile scrum [3]

The Scrum team consists of three roles:

- The product owner: The product Owner leads ROI optimization by identifying and
prioritizing product features for the next Sprint.
- The Scrum master: guides the product group in applying Scrum for business value,
supporting the Team, Product Owner, and organization.
- Development team members: team members collaborate to deliver the requested prod-
uct increments with unwavering commitment.

6
Chapter 1 1.3. Work methodology and planning

Sprint A maximum of 4 weeks in which a goal is achieved.

A new Sprint starts immediately after the conclusion
of the previous Sprint. Deadlines do not exceed one
month and are consistent throughout the development
process.
Sprint planning Where all Scrum team members meet to initiate the
Sprint by laying out the work to be performed for the
Sprint. This resulting plan is created by the
collaborative work of the entire Scrum Team.
Daily Scrum 15-minute event for the Developers of the Scrum Team.
To reduce complexity, it is held at the same time and
place every working day of the Sprint.
Sprint review The Scrum Team presents the results of their work to
key stakeholders and progress toward the Product Goal
is discussed.
Sprint retrospective a meeting where the Scrum team concludes the Sprint.
It is timeboxed to a maximum of three hours for a one-
month Sprint. For shorter Sprints, the event is usually
shorter.

Table 1.2: Scrum Events

Conclusion
In this first chapter, we started by putting the project in its general context by presenting
the host organization, detailing the existing situation, and showing its limitations. Then,
we spread out the methodological approach used for the implementation of the applica-
tion. In the next chapter, we conduct a theoretical study in order to analyze the needs
and study the general design of our system.

7
Chapter 2

Specification of needs and modeling

Introduction
In this chapter, we will present the system modelization which makes it possible to for-
malize the preliminary stages of development.

2.1 Analysis and requirements specification

The aim of this chapter is to collect, analyze and define the needs of functional and non-
functional as well as the various actors who interact with our application. Then, we will
detail the backlog and the planning of the different project sprints.

2.1.1 The actors of the system

Before seeing the needs of our system, we will determine the main actors of it which are:
• Host Candidate: A user that is eligible to start the hosting program after logging
in and completing the application form:
- Browse and search for courses.
- Enroll in courses and track progress.

• Admin: The Admin is the person who manages and controls the website:
- Manage course content, and enrollments.
- Generate reports on course enrollment and student progress.

• Developer: A Developer is the person who is responsible for creating, improving,

and enhancing the website:
- Ensure that the Tabaani Host Academy website is optimized for search
engines.
- ensure that the Tabaani Host Academy website is secure and has appropriate
measures in place to protect user data.

8
Chapter 2 2.1. Analysis and requirements specification

Global Use case diagram

Figure 2.6: Global Use Case Diagram

2.1.2 Functional requirements

In this section, we will focus on the functional requirements of our website. Functional
requirements refer to the features and options that the interface will provide to the user.
Our application will provide the following features:

• Authentification: The host, and admin will have to authenticate in order to ac-
cess the application.

• Browse and search: The host candidate will have the freedom to browse and
search in the available course.

• Start course: The host candidate will have the freedom to start any course
program anytime.

• Track progress: The user will be able to track his progress on each course.

9
Chapter 2 2.2. Modelization

• Manage course content: The admin will be able to add, update, and delete
course content.

2.1.3 Non-functional requirements

Non-functional needs define the essential internal options to improve the functioning of
the system. The non-functional requirements of our platform are defined in the following
points:

• User interface: to provide a good look and a good interface on the platform that
attracts users.

• User experience: To offer the user a good experience when using the platform.

• Performance: The system must be fast in responding to different operations for

the importance of the time factor which targets many users.

• Security: The platform must have a secure access system based on authentication
and data encryption.

2.2 Modelization
In this section, we will represent our global class diagram and describe its different ele-
ments.

2.2.1 Class diagram

Figure 2.7: Global Class Diagram

10
Chapter 2 2.3. Product backlog

The class diagram (Figure 2.7) represents the internal structure of the system. It
shows the different classes and relationships that present the structure of our database.

• User: It is the class that represents our User, it contains information like email,
password, phone number, and login status.

• User activity: It is the class that represents the User activity, it contains infor-
mation like the user’s last login and time logged in.

• Register: It is the class that represents the Registration process, it contains infor-
mation like first name, last name, email, password, phone number, and age.

• Host: It is the class that represents our Host, it contains information like hostname,
host id, age, and address.

• Admin: It is the class that represents our Admin, it contains information like admin
name and admin id.

• Interface: It is the class that represents the Interface, it contains information of

creation date.

• Course: It is the class that represents the Course, it contains information like
course id, date added, and course language.

• Test: It is the class that represents the course Test, it contains information like test
id, date added, and course languages.

• Video: It is the class that represents the course Video, it contains information like
the video title and video duration.

• Article: It is the class that represents the course Article, it contains information
like article title and article length.

2.3 Product backlog

The product backlog comprises the set of product features developed and each feature of
which is a story associated with acceptance criteria with an order of priority.

11
Chapter 2 2.4. Sprint planning

Features Situation Priority

Authentification As a host, or admin you must authenticate. High
Course browsing and Searching As a host you can browse all the available
courses or search for a specific one. High
Start Course As a host, you will have the freedom to
start any course program. High
Progress tracking As a host you can track your progress. Low
Manage course content As an admin, you can add, delete or update
course content. High
Course detail page As a host, you can access course detail page
to read more about the course you chose. High
Frequently Asked Questions As a host, you can read FAQs about courses. Low

Table 2.3: Product Backlog

2.4 Sprint planning

A project using the scrum methodology is based on iterations called sprints which follow
one another in a few weeks. We will divide according to priority.
The table below shows the sprint planning relating to our application:

Sprint 1 Sprint 2

Authentification Manage Course Content

Start Course Manage Detail Page

Course Browsing and Searching Frequently Asked Question

Progress Tracking

Table 2.4: Sprint Planning

Conclusion
In this chapter, we have prepared our work plan. Indeed, we identified the actors and
the use cases. Next, we have captured the functional and non-functional needs of our
application. Then, we showed our application backlog and our project sprint plan.

12
Chapter 3

Sprint planning
Introduction
In this chapter, we will delve into the details of the first sprint of our project. Our
focus will be on the Host User but first the development of the product backlog, and
the analysis of the various tasks. As we progress through this chapter, we will provide a
detailed analysis of each step in the sprint, the challenges encountered, and the solutions
implemented. Our aim is to present a comprehensive overview of the sprint planning and
execution process, highlighting our approach to developing a high-quality product that
meets the needs of our users.

3.1 Sprint 1
Before starting it is important to set up a web development environment with the nec-
essary tools and technologies: This step involves setting up a development environment
with the tools and technologies needed to build the website. This includes installing a
code editor, such as Visual Studio Code, and setting up a local development server, such
as XAMPP, to run the website.

Create the registration and login system: A user registration and login system is de-
veloped to allow users to create accounts, log in, and access course content.

Design the start course cards: These cards contain a glimpse of the course like the
title, lesson numbers, course level, and the start button that lands you on the course
details page.

Develop a course listing with search and filter functionality: This page is created
within the home page to display a list of available courses and allow users to search and
filter the courses based on their preferences. This makes it easy for users to find courses
that meet their needs.

13
Chapter 3 3.2. Analysis

3.2 Analysis
This sprint involves creating a start course card design, creating a registration and login
system, and developing a course listing with search and filter functionality.

The first step involves setting up the web development environment with the necessary
tools and technologies and updating Github. This is a crucial step in ensuring that the
development process runs smoothly and that everyone on the team is on the same page.
It is important to ensure that all the necessary tools are installed and configured correctly
to avoid issues later on.

The second step involves creating a registration and login system. This is a key feature
of the website and should be user-friendly and secure to protect users’ personal informa-
tion.

The third step involves creating the start course card design. This is an important
step as it sets the tone for the entire website and is the first impression that users will
have about the course. The card design should be attractive and user-friendly, with a
clear call to action.

The fourth step involves developing a course listing with search and filter functionality.
This is important as it allows users to easily find the courses they are interested in and
filter them based on their preferences.

Overall, this sprint is crucial in developing a user-friendly, and secure website for the
Tabaani Host Academy. It involves careful planning and design to ensure that the website
meets the needs of both the users and the business.

Refinement of the "Authentication" use case

In this step, we will illustrate the diagram of the use case “authentication” which is
presented in Figure 3.8 and is followed by a textual description.

Figure 3.8: Authentification Use Case Diagram

14
Chapter 3 3.2. Analysis

Use case name Authentication(Login)

Actors User, host, admin
Precondition User accesses the application
Postcondition User is connected to his profile
Main Scenarios - The interface for authentication
is presented by the system.
- The user provides their login and password.
- The user taps or clicks the "Sign in" button.
- An indicator of the successful login is displayed,
and it will be redirected to the home page
Alternative scenarios - Account does not exist or incorrect password,
the system displays the message “invalid
access please check your email or password".

Table 3.5: Authentication(Login)

Use case name Authentication(Sign up)

Actors User, host
Precondition User accesses the application
Postcondition Account created and the user is connected to his profile
Main Scenarios - The system displays a sign-up interface.
- The user provides their email, and password,
and confirms the password.
- The user selects the "Sign up" button.
- An indicator of the successful sign-up is displayed,
and it will be redirected to the home page.
Alternative scenarios - Incorrect email, the system displays the message
“The email address is badly formatted”.
- Already in a use email address, the system displays
the message “The email address is already in use by
another account”.

Table 3.6: Authentication(Sign up)

15
Chapter 3 3.2. Analysis

Use case name Authentication(Forget password))

Actors User, host
Precondition User accesses the application
Postcondition Confirmation email with instructions sent
to the user’s email
Main Scenarios - The system displays the login interface.
- The user enters his email.
- The user clicks on the "Forgot password?" button.
- The system displays the message “Verification mail has
been sent please check your mail for more instructions”.
Alternative scenarios - Incorrect email, the system displays the message
“The email address is badly formatted.
- Wrong email, the system displays the message “There is
no user corresponding to this email address”.

Table 3.7: Authentication(Forget password)

Refinement of the "Start Course" use case

In this step, we will illustrate the diagram of the use case “Home Page” which is presented
in Figure 3.9 and is followed by a textual description.

Figure 3.9: Start Course Use Case Diagram

Use case name Start Course

Actors host
Precondition User accesses the application
Postcondition The system displays a home page with a list of courses.
Main Scenarios - The system displays a home page with a list of courses.
- The host chooses to start any course.
Alternative scenarios N/A

Table 3.8: Start Course

16
Chapter 3 3.2. Analysis

Refinement of the "Course Browsing" use case

In this step, we will illustrate the diagram of the use case “Course Browsing” which is
presented in Figure 3.10 and is followed by a textual description.

Figure 3.10: Course Browsing and Searching Use Case Diagram

Use case name Browse courses

Actors host
Precondition User accesses the application
Postcondition The system displays the home page with a list of courses
Main Scenarios - The system displays the home page with a list of courses.
- The host chooses to click on a course
- The system displays the course page.
Alternative scenarios N/A

Table 3.9: Browse Courses

Use case name Search for courses

Actors host
Precondition User accesses the application
Postcondition The system displays the home page with a list
of courses and their categories by criteria
Main Scenarios - The system displays the home page with a list
of courses and their categories by criteria
- The user chooses to click on a category button.
- The system displays the top courses from each category.
Alternative scenarios N/A

Table 3.10: Search Courses

17
Chapter 3 3.2. Analysis

Figure 3.11: Authentification sequence Diagram

Conclusion
In conclusion, Sprint 1 has been a productive period for our team. We have successfully set
up our web development environment and created the course cards for the Tabaani Host
Academy home page. We have also developed a registration and login system. Moreover,
we have created a course listing with search and filter functionality.
During this sprint, we have worked closely with our Business Analysis team to identify
two key areas for improvement: performing user acceptance testing (UAT) on the features

18
Chapter 3 3.2. Analysis

developed during this sprint. We believe that this step is crucial to improving the overall
user experience of the Tabaani Host Academy, and we are committed to implementing
them in Sprint 2.
We are confident that Sprint 1 has laid a solid foundation for the Tabaani Host Academy.
In the following chapter, our effort will be devoted to producing a new sprint covering the
remaining functionalities in this release.

19
Chapter 4

Sprint planning
Introduction
In this chapter, we will be discussing the second sprint of the Tabaani Host Academy
project. The main focus of this sprint is to develop features that will enable the admin to
manage course content and create a course detail page. Additionally, we will be developing
progress tracking and a Frequently Asked Questions (FAQ) section. The aim is to make
the platform user-friendly, interactive, and easy to navigate.

4.1 Sprint 2
Manage Course Content: In this task, we will develop a content management system
(CMS) that allows the admin to manage course content. This feature will enable the
admin to add videos, quizzes, and other learning materials for the course content.
Course Detail Page: In this task, we will create a course detail page with all relevant
information, such as course description, course duration, and pricing. This is important
as it provides users with all the information they need to make an informed decision about
which course to take.
Frequently Asked Questions: In this task, we develop a FAQ section that provides
answers to common questions users may have about the platform. This feature will
enable users to get quick answers to their questions without having to contact support.
Progress Tracking: In this task, we will create a progress-tracking system that allows
users to monitor their progress as they complete courses. This feature enables users to
keep track of their achievements and motivates them to continue their learning journey
on the platform.

4.2 Analysis
The second sprint of the Tabaani Host Academy project is critical to ensuring the success
of the platform. The development of a content management system, course detail page,
progress tracking, and FAQ section will enhance the user experience and provide more
control and flexibility to users. The content management system will enable the admin
to manage course content more effectively. The course detail page will help users to know
more about the courses they taking. The progress tracking system will help motivate
users to continue their learning journey, while the FAQ section will provide quick and
easy access to answers to common questions.

20
Chapter 4 4.2. Analysis

Refinement of the "Manage Course Content" use case

In this step, we will illustrate the diagram of the use case “Manage Course Content" which
is presented in Figure 4.12 and is followed by a textual description.

Figure 4.12: Manage Course Content Use Case Diagram

Use case name Manage course content

Actors admin
Precondition Admin access the courses panel
Postcondition Course content updated successfully
Main Scenarios - The system displays a course content interface.
- The admin adds, updates, or deletes a course.
Alternative scenarios N/A

Table 4.11: Manage Course Content

Refinement of the "Course Detail Page" use case

In this step, we will illustrate the diagram of the use case “Course Detail Page” which is
presented in Figure 4.13 and is followed by a textual description.

Figure 4.13: Course Detail Page Use Case Diagram

21
Chapter 4 4.2. Analysis

Use case name Course detail page

Actors host
Precondition User accesses the course
Postcondition The system displays the course detail page
Main Scenarios - The system displays the course detail page.
- The host read the course details.
- The host clicks on the start button.
Alternative scenarios N/A

Table 4.12: Course Detail Page

Refinement of the "FAQ" use case

In this step, we will illustrate the diagram of the use case “FAQ" which is presented in
Figure 4.14 and is followed by a textual description.

Figure 4.14: FAQ Use Case Diagram

Use case name FAQ

Actors host
Precondition User accesses the course
Postcondition The system displays the course detail page
Main Scenarios - The system displays the course detail page.
- The host read the FAQ section.
Alternative scenarios N/A

Table 4.13: FAQ

Refinement of the "Progress Tracking" use case

In this step, we will illustrate the diagram of the use case “Course Detail Page” which is
presented in Figure 4.15 and is followed by a textual description.

22
Chapter 4 4.2. Analysis

Figure 4.15: Progress Tracking Use Case Diagram

Use case name Progress Tracking

Actors host
Precondition User accesses the home page
Postcondition The system displays the home page
Main Scenarios - The system displays the home page.
- The host will be able to see his
progress on the course card.
Alternative scenarios N/A

Table 4.14: Progress Tracking

Conclusion
In conclusion, the second sprint of the Tabaani Host Academy project focused on devel-
oping features that will enhance the user experience on the platform. The development
of a content management system, course detail page, progress tracking, and FAQ section
will provide more control, flexibility, and motivation to users. It is important to note
that while the Tabaani Host Academy team is responsible for the development of these
features, it is mainly the work of the user ADMIN to create engaging and informative
course content. The next step was to test and refine these features before moving on to
the implementation.

23
Chapter 5

Implementation
Introduction
In this chapter, we will present the technologies that we used to accomplish our project,
as well as the developed pages of the platform.

5.1 Work Environment

In this section, we will describe our hardware and software environment.

5.1.1 Hardware Environment

We used as hardware environment a desktop computer which has the following
characteristics:

Brand Dell Lenovo

Owner Anis Haroun
Processor I5-7400 3.00GHz Ryzen 3 3250U 2.60GHz
Memory 16Go 8Go
Hard Drive 1To HDD + 512 SSD 512 SSD
Operating System Windows 10 Windows 10

Table 5.15: Hardware Description

Figure 5.16: Dell Logo [4] Figure 5.17: Lenovo Logo [5]

24
Chapter 5 5.1. Work Environment

5.1.2 Software Environment

In our project, we used the following software:

Visual Studio Code:

Visual Studio Code, often referred to as VS Code, is a popular and versatile source code
editor developed by Microsoft. It offers a wide range of features, extensions, and a user-
friendly interface, making it a preferred choice for developers across different platforms.

Figure 5.18: VSCode [6]

Github:
GitHub is a web-based platform that serves as a centralized hub for version control and
collaboration in software development projects. It allows developers to host, manage, and
share their code repositories, facilitating teamwork and efficient code management.

Figure 5.19: Github [7]

StarUML:
Star UML is a comprehensive and user-friendly software modeling tool used for designing
and visualizing various types of diagrams, including class diagrams, sequence diagrams,
and use case diagrams. With its intuitive interface and powerful features, Star UML
simplifies the process of creating and documenting software designs, making it a valuable
tool for developers and system architects.

25
Chapter 5 5.2. Development Technologies:

Figure 5.20: Star UML [8]

5.2 Development Technologies:

In this section, we will describe the technologies we used to develop our application.

5.2.1 HTML5
HTML, short for HyperText Markup Language, is the foundation of web pages, provid-
ing the structure and organization of content. It uses tags to define elements and their
properties, enabling the creation of interactive and visually appealing websites.

Figure 5.21: HTML5 [9]

5.2.2 CSS 3
CSS, or Cascading Style Sheets, is a powerful language used to style and format the
presentation of HTML elements on a web page. It allows developers to control the ap-
pearance, layout, and visual aspects of web content, enhancing the overall design and user
experience.

Figure 5.22: CSS [10]

26
Chapter 5 5.2. Development Technologies:

5.2.3 React JS
React.js, commonly known as React, is a popular JavaScript library for building user
interfaces. It enables developers to create interactive and dynamic web applications by
efficiently managing the component-based structure and efficiently updating the user in-
terface based on data changes.

Figure 5.23: React JS [11]

5.2.4 Node JS
Node.js is a powerful JavaScript runtime environment that allows developers to run
JavaScript code outside of the browser, enabling server-side scripting and building scal-
able network applications.

Figure 5.24: Node JS [12]

5.2.5 JavaScript
JavaScript is a versatile programming language used for adding interactivity and dynamic
functionality to websites and web applications.

27
Chapter 5 5.2. Development Technologies:

Figure 5.25: JavaScript [13]

5.2.6 TypeScript
TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript,
providing additional features and enhanced developer productivity.

Figure 5.26: TypeScript [14]

5.2.7 Firebase
Firebase is a comprehensive platform offered by Google that empowers developers to build
and deploy web and mobile applications effortlessly. It provides a suite of services, in-
cluding real-time database, authentication, hosting, cloud storage, and more. With its
easy integration and robust infrastructure, Firebase simplifies the development process,
enabling developers to focus on creating innovative and scalable applications without wor-
rying about managing complex backend systems.

Figure 5.27: Firebase [15]

28
Chapter 5 5.2. Development Technologies:

Database
Databases come in various types, each designed to store different kinds of data:

Figure 5.28: Types of database [16]

We, at Tabaani Host Academy, decided to choose a NoSQL Database for this project.
A NoSQL database can be classified into four distinct types for easier understanding and
categorization:

Figure 5.29: NoSQL database types [17]

Firestore is a powerful and user-friendly NoSQL database offered by Firebase, a Google

platform. It provides a cloud-based solution for storing and managing data, making it
ideal for building real-time web and mobile applications. With Firestore, developers can
easily store, retrieve, and synchronize data across multiple devices, while benefiting from
features like offline data access and automatic scaling. Its flexible data model, secure
infrastructure, and seamless integration with other Firebase services make it a reliable
choice for modern application development.

29
Chapter 5 5.3. Architecture of the solution

5.3 Architecture of the solution

Web application architecture illustrates how web applications, databases, and middleware
systems interact with each other on the Internet.

5.3.1 Technical architecture

Architecture is all the technical and application aspects that are important for software.
Architectural choices influence the success or failure of a project. We first describe the
target technical architecture of the solution as well as the application architectures.

Single-Page Applications (SPAs)

A single-page application is an app that doesn’t need to reload the page during its use
and works within a browser. Think of the apps you use daily: Facebook, Google Maps,
Gmail, Twitter, Google Drive, or even GitHub. All these are examples of a SPA.
One of the best advantages of a correctly-configured SPA is the user experience (UX),
where the user enjoys the natural environment of the app without having to wait for
the page reloads and other things. You remain on the same page, which is powered by
JavaScript programming language. [21]

Serverless Architectures
Serverless uses the existing managed services available through the public cloud not just
as a means to host an application but becomes an intrinsic part of the application and
replaces manually configured infrastructure and sometimes even entire libraries of code
with the managed services.
Contrary to what the word “Server-less” would have you think, servers still exist with
serverless! With a serverless development model, developers are able to build, deploy
and run applications without having to manage servers. Once deployed, a serverless
application will respond to traffic and automatically scale up or down as needed. [22]

5.3.2 Used architecture

We opted for a serverless architecture utilizing React, a renowned JavaScript library,
and Google Firebase as our cloud infrastructure provider. This choice enables us to
develop a highly responsive and interactive SPA front-end platform. With real-time web
applications, we ensure swift user responses and enhanced engagement. JavaScript serves
as a popular scripting language for web application development, and by leveraging React
and Firebase, we create fast, scalable, and real-time user interfaces that seamlessly handle
data updates. The Flux and Redux patterns are well-suited for managing data flow
within React applications, complementing the MVC structure and facilitating efficient
development.

5.3.3 Design pattern

FLUX
Flux, a brainchild of "Facebook," elegantly intertwines with React, introducing an archi-
tectural pattern that bears a striking resemblance to the observer-observable paradigm.

30
Chapter 5 5.3. Architecture of the solution

While Flux abstains from being labeled as a library or framework, its pièce de résistance
lies in the concept of uni-directional data flow.

Figure 5.30: FLUX Flow [18]

REDUX
Redux, an offspring of Flux’s inspiration, stands as both an implementation and a library.
It simplifies state management and effortlessly renders data based on user actions. This
powerhouse of a library boasts immense potency, yet gracefully maintains a feather-light
footprint.

Figure 5.31: Redux Flow [19]

31
Chapter 5 5.4. Production

5.4 Production
Figure 5.32 represents the Sign-UP page. To facilitate the account creation, process the
user can sign up using his Google or Facebook account else he can fill in the form and
then clicks the “Sign-UP” button.

Figure 5.32: Sign-UP model for creating profile

32
Chapter 5 5.4. Production

Figure 5.33 represents the Login page. If the user has forgotten his password or email,
he can request a new one by clicking on the “Forgot your password?” or “Forgot your
email?” button.

Figure 5.33: Login to access your profile

33
Chapter 5 5.4. Production

Figure 5.34 represents the Password Recovery Page, which is the page that displays
to the user after clicking on the "Forgot your password?" link in an attempt to recover
his forgotten password.

Figure 5.34: Password Recovery Process

Figure 5.35 represents the Email Recovery Page, which is the page that displays to the
user after clicking on the "Forgot your email?" link in an attempt to recover his forgotten
email.

Figure 5.35: Email Recovery Process

34
Chapter 5 5.4. Production

Figure 5.36 represents the header of the home page. It contains a list of course cate-
gories and shows a stunning welcome message.

Figure 5.36: Home Page Navigation Panel

35
Chapter 5 5.4. Production

Figure 5.37 represents the course listings on the home page. You can browse and
search for any course or see all the best instructors.

Figure 5.37: Course Listings part1

36
Chapter 5 5.4. Production

Figure 5.38 represents the second part of the course listings on the home page.

Figure 5.38: Course Listings part2

37
Chapter 5 5.4. Production

Figure 5.39 represents the top part of the course detail page where you can read more
details about the course you have chosen.

Figure 5.39: Course Details

38
Chapter 5 5.4. Production

Figure 5.40 represents the bottom part of the course detail page. It shows all the
course modules.

Figure 5.40: Course Modules

39
Chapter 5 5.4. Production

Figure 5.41 represents the FAQs section inside the course details page. Here you can
find all the answers to any question that comes to your mind.

Figure 5.41: Courses FAQs

40
Chapter 5 5.4. Production

Figure 5.42 represents the course page. Once you access this page you will find your
unfinished courses and the courses on your list.

Figure 5.42: Course Portal

Figure 5.43 represents the video page. The learning process starts here where you will
watch all the lessons before taking the test.

Figure 5.43: Video-Based Course Curriculum

41
Chapter 5 5.4. Production

After completing your first video you will land on the test page that is represented in
Figure 5.44

Figure 5.44: Knowledge Assessment Exam

If you pass the test you will land on the next page where you will get congratulation
and read about the next steps (Figure 45)

Figure 5.45: Course Exam Validation

42
Chapter 5 5.4. Production

If you failed the test you will land on another page that tells you that you have either
retake the test or watch the video again. (Figure 46)

Figure 5.46: Course Exam Failure

Figure 47 represents a page that prepares you before taking the Quiz at the end of
the module assessment.

Figure 5.47: Module Completion Quiz

43
Chapter 5 5.4. Production

Figure 48 represents the quiz page and it is the last test in each module.

Figure 5.48: Quiz Page

44
Chapter 5 5.4. Production

Figure 49 represents the Content Management Page from where the admin can add,
update or delete course content.

Figure 5.49: Content Management Page

Conclusion
This chapter covered all the implementation steps, first, we represented our work environ-
ments and all the technologies needed for the realization, then we presented the different
pages of the application,

45
General Conclusion

In order to improve and promote tourism in Tunisia and the MENA region, Tabaani
has developed an application that aims to connect travelers with locals(hosts) in order
to improve their travel experiences. To refine our host’s skills, we decided to create an
e-learning web application that provides our hosts with the best courses in hosting in
order to continue developing the travel experience on our application.
First of all, we have introduced the general context of our internship, which took
place within the Tabaani start-up. Then we identified the different requirements and
introduced the methodological framework adopted for the management of our project.
We have planned our project, using the Scrum method, listing all the tasks to be carried
out, with the assignment of the degrees of importance. Next, we were able to provide two
sprints, each sprint completing its previous one. In the end, we explained the realization
process going from work environments and used technologies to presenting the different
pages of the application.
It is important to emphasize that the objectives set at the beginning have been
achieved, although difficulties were encountered, it has been possible for us to overcome
them and to carry out an application corresponding to the needs formulated by the prod-
uct owner.
For the next step, we planned with Tabaani startup, an AI solution that can help
the host academy platform personalize the learner journey by enabling host students to
control their learning trajectory. Based on the learning outcomes, the host academy
platform with AI may recommend micro-lessons or provide extra work, suggesting ways
to improve by allowing them to get content that is tailored to each learner’s goals and
past success.

46
 Bibliography

[1] https://tabaani.co/home. tabaani logo.

[2] https://blog.american-technology.net/agile-principles-and-values/. agile values.

[3] https://www.scrum.org/learning-series/what-is-scrum. scrum.

[4] https://www1.euro.dell.com/tn/ar/gen/df.aspx?refid=dfs=gen. Dell.

[5] https://www.lenovo.com/us/en/?Redirect=False. Lenovo.

[6] https://commons.wikimedia.org/wiki/File:VisualS tudioC ode1 .35i con.svg.vscodelogo.

[7] https://github.com/logos. github logo.

[8] https://fr.wikipedia.org/wiki/Fichier:Starumll ogo.png. starumllogo.

[9] https://commons.wikimedia.org/wiki/File:HTML5l ogoa ndw ordmark.svg. htmllogo.

[10] https://commons.wikimedia.org/wiki/File:CSS3l ogoa ndw ordmark.svg. csslogo.

[11] https://ubidreams.fr/en/expertises/development/react-js. reactjs logo.

[12] https://seeklogo.com/vector-logo/273749/node-js. nodejs logo.

[13] https://commons.wikimedia.org/wiki/File:JavaScript-logo.png. javascript logo.

[14] https://commons.wikimedia.org/wiki/File:Typescriptl ogo2 020.svg. typescriptlogo.

[15] https://commons.wikimedia.org/wiki/File:FirebaseL ogo.svg. f irebaselogo.

[16] https://www.javatpoint.com/types-of-databases. databases types.

[17] https://brainalyst.in/what-is-nosql-database/. nosql database types.

[18] http://fluxxor.com/what-is-flux.html. flux flow.

[19] https://www.slideshare.net/RajeshKumar1938/spfx-with-react-redux. redux flow.

[20] https://tabaani.co/about. tabaani.

[21] https://huspi.com/blog-open/definitive-guide-to-spa-why-do-we-need-single-page-
applications/. spas.

[22] https://www.serverless.com/blog/serverless-architecture. serverless architectures.

47
 Abstract
This report introduces the project accomplished for the completion of my Bachelor’s
degree in Computer Engineering with a specialization in Network and Systems
Engineering at the Higher Institute of Information Technologies and Communication.
The project was carried out in collaboration with Tabaani, a startup company. The main
objective of this work was to design and develop the comprehensive Tabaani platform a
web-based application that is user-friendly, mobile-responsive, and prioritizes security.

Keywords
Sustainable tourism
Host academy
E-learning