\chapter{Existing Course System}\label{chap:existingcoursesystem}

This chapter explains the structure and functionality of the existing application, which is already deployed and used. Understanding the existing backend is a critical part of creating additional features.

\section{Base technologies}

This diploma thesis will use standard technologies that are common for the creation of the application server.

This includes JavaScript, Node.js, NPM, React, Apollo Client and Java. JavaScript \cite{JavaScript} is a scriptable interpreted programming language. It is used primarily in the creation of interactive website pages or for application servers. The application server used in this thesis is based on the Express.js, Node.js web application framework.

Node.js \cite{Express.js/Node.js} is used for application servers, which represents the server side of the web application. It is for example used to take requests from the front-end side of the application, fulfill them and then send a response back to the front end. It is not bound to the browser and is run directly on the given OS server (or computer).

However, writing specific handlings of the requests in plain Node.js might be sometimes cumbersome. For that, there exist web frameworks that make the handling of requests easier, with more options without a need to reinvent the wheel.

One of the most commonly used is Express.js which is built on top of Node.js. It is a library that provides a set of features, like the possibility to handle requests with different HTTP methods (which on contrary must be programmed on your own by using Node.js), some basic web application settings like setting the port for connection or serving files.

To install libraries (packages), I will use the Node package manager tool (in short npm). With this software, it is possible to install all necessary packages from one place, so it is not necessary to access each package separately.

\section{Frontend}

Following section is dedicated to the frontend of the application. The frontend part of the application is written in React.

\subsection{React}

React \cite{React}  represents a Javascript library for more accessible user interface creation. It is currently managed by Meta Platforms which also developed Facebook. An advantage of React over other frameworks is the ability to divide the application's user interface into components. The component represents the fundamental element of the library. It typically represents a class or function. At the same time, it is possible to create bigger components from the smaller ones, and each can be used as separate, reusable parts.

The state of the application is saved by using the Redux package.

\subsection{Redux}

Redux \cite{Redux} is a JavaScript library used to control the state of variables, i.e., what values variables acquire. It is used, for example, in combination with React. All data (or application status) processed by applications are grouped under one JavaScript object, called a store - Storage. As a result, it is possible to access all variables from one place, which is much clearer, and work with data is better manageable. Thus, Redux represents a model, a structure by which we control data access, change, addition, and deletion. Within Redux, we should not change the state of variables directly to avoid errors. Instead, actions are used to change values. An action is represented by a simple JavaScript object that describes what happened. The action must contain an attribute type. An attribute defines the type of action which is executed. Thanks to this, we know exactly what happened in the application and how it changed. In addition, we can define additional parameters to the action which serve as additional arguments (they are optional).

\section{Backend}

In this section, I will describe the backend part of the application before the changes, followed by an analysis and stages which were proceeded.

\section{Frontend and Backend communication}

\begin{figure}[H]
\centering
\includegraphics[scale=0.75]{images/connectionBetweenBackendFrontendDatabase}
\caption{Communication between database, backend and frontend.}
\label{fig:connectionBackendFrontend}
\end{figure}

\subsection{RTK Query}

\section{Functionality of existing application}