I.1.

Client-Server Architecture
“Client-Server” is a distributed application structure in which tasks and jobs
are divided between resource or service providers called “Server” and resource or
service consumers call “Client”. Client and server communicate with each other
through computer networks on separate hardware or on the same system. The
clients normally share nothing with the server, they request resources from the
server. So that, they will set up the session to communicate with the server,
meanwhile, the server will be kept alive to wait for requests, handle them and
respond to the clients.
Clients and Servers “talk” to each other via messages, the messages coming
from the Client to Server are requests, the ones coming from Server for answering
those requests to the Client are responses through an Inter-process Communication
(IPC) and the messages must be in a standard called “Protocol”. Nowadays, in the
Application Layer in TCP/IP Model, there are many choices to choose protocols
for the app such as HTTP, MQTT, AMQP, FTP, SMTP and so on, however, HTTP
is the most popular one for developing a web application, the others still have their
own strengths but they will be used in some special cases (FTP is used for file
transfer, SMTP is used for sending emails,…).
The client will be responsible for providing the user interface (UI) and user
experience (UX) to the end-user, sending and receiving the message from the
server and presenting the data contained in the messages in an appropriate method.
The server will be responsible for receiving the message from clients,
handling them and sending the result back to the clients.
 I.2. Model – View – Service – Controller (MVSC) Design Pattern

Model – view – service – controller (MVSC) is an extended version of the

MVC software design pattern commonly used for developing user interfaces that
divide the related program logic into four inter-connected elements which are
Model, View, Service and Controller
Components
- Model is the application's dynamic data structure, independent of the user
interface. It directly manages the data, logic and rules of the application. It
connects to the database
- View is the representation of information.
- Controller accepts the request from, contacts for data from the model,
handles them and sends the result back to the view.
- Service is a bridge for view in the client communicating with the controller
in the server.

Mechanism
- The model is responsible for managing the data of the application. It
receives user input from the controller, queries into the database to get
 suitable records or performs data transformations (create, update or delete
records) and returns to the controllers.
- The view renders the presentation of the data received from the service in a
particular format.
- The controller responds to the user input from services, performs
interactions on the data model objects, collects the records returned by
models and handles the logic interaction with those data before passing them
to services. The controller receives the input, optionally validates it and then
passes the input to the model.
- The service is responsible to transfer the user inputs from views, direct them
to the right function in the controller and return the result from them.
As with other software patterns, MVC expresses the "core of the solution" to a
problem while allowing it to be adapted for each system.[17] Particular MVC
designs can vary significantly from the traditional description here.

I.3. PostgreSQL
PostgreSQL is one of the most advanced, free and open source object-relational
database management system (RDBMS) available. It is high scalability and
compliance with technical standards, designed to handle a wide range of
workloads, from personal computers to data warehouses or Web services with
many concurrent users.
- Developed by PostgreSQL Global Development Group, First Released:
08/07/1996.
- Flexible and can be run on a variety of platforms such as Mac OS X, Solaris,
and Windows.
- Free and open source software so PostgreSQL can be used, modified, and
disseminated by anyone for any purpose.
- Highly stable.

Features
PostgreSQL integrates many great features to help developers build apps that
respond to complex functions, query quickly, and securely maintain integrity and
reliability. To be more reliable, It also provides various security, authentication,
and disaster recovery options. PostgreSQL has proven to be highly scalable both in
terms of the amount of data and the number of concurrent users.
- Complex query (complex query)
- Event procedures (triggers)
- Views
- Integrity transactions
- Multi-version concurrency control
- Parallel query (parallel query)
- Streaming replication

Datatypes
- Primitives: Integer, Number, String, Boolean
- Structure: Date/Time, Array, Range, UUID.
- Document: JSON/JSONB, XML, Key-value

Data integrity
- UNIQUE, NOT NULL
- Primary Keys
- Foreign Keys
- Exclusion constraints
- Function Lock, Recommended Lock
- Concurrent, efficiency
- Cataloging: B-tree, Multicolumn, Expressions, Partial
- …

Security
- Authentication: GSSAPI, SSPI, LDAP, SCRAM-SHA-256, Certificate and
others
- Powerful access control system
- Column and row level security

Ability of extension
- Storage method
- Procedural Languages: PL/PGSQL, Perl, Python (and many more)
 - External data wrapper: connect to other databases or streams with standard
SQL interface
- And many extensions provide additional functionality, including PostGIS
- Text search:
- Support for international character sets, e.g. through ICU collations
- Full-text search
I.4. Typescript and NodeJS
I.4.1. Typescript
TypeScript is a programming language developed and maintained by Microsoft.
It is built on JavaScript
TypeScript may be used to develop JavaScript applications for both
client or server execution (as with Node.js). The default TypeScript Compiler can
be used or the Babel compiler can be invoked to convert TypeScript to JavaScript.
TypeScript offers all of JavaScript’s features and an additional layer on top
of these: TypeScript’s type system. This means that your existing working
JavaScript code is also TypeScript code. The main benefit of TypeScript is that it
can highlight unexpected behavior in your code, lowering the chance of bugs.
I.4.2. NodeJS
Node.js is a free, open-source server environment and runs on various
platforms (Windows, Linux, Unix, Mac OS X,…). It uses asynchronous
programming, eliminates the waiting, and simply continues with the next request.
It also runs single-threaded, non-blocking, which is very memory efficient.
- Nodejs generate many dynamic page content
- Node.js can create, open, read, write, delete, and close files on the server
- Node.js can collect form data
- Node.js can add, delete, and modify data in your database
- Node.js can do anything that a server app needs to do.
I.4.3. Knex JS and Objection JS
Knex.js is a. SQL query builder for PostgreSQL, MSSQL, MySQL,
MariaDB, SQLite3, Better-SQLite3, Oracle and Amazon Redshift designed to be
flexible, and portable to use.
It features both traditional node style callbacks as well as a “Promise” interface for
cleaner async flow control, a stream interface, full–featured query and schema
builders, transaction support (with save points), connection pooling and
standardized responses between different query clients.
 Objection.js is Object-relational programming (ORM) for Node.js that aims
to stay out of your way and make it as easy as possible to use the full power of
SQL and the underlying database engine while still making the common stuff easy
and enjoyable. Objection.js is built on an SQL query builder called Knex.js. All
databases supported by Knex are supported by Objection.js. SQLite3, Postgres and
MySQL are thoroughly tested.
I.4.4. Express JS
Express.js is a framework built on top of Nodejs. It provides powerful
features for web or mobile development. Express.js supports HTTP and
middleware methods creating an ie API.
Features:
- Set up intermediate classes to return HTTP requests.
- Define router allows use with different actions based on HTTP method and
URL.
- Allows returning HTML pages based on parameters.

Routings:
Routing refers to determining how an application responds to a client request
to a particular endpoint, which is a URI (or path) and a specific HTTP request
method (GET, POST, and so on).
Each route can have one or more handler functions, which are executed
when the route is matched.
Defining routing using methods of the Express app object that correspond to
HTTP methods; for example, app.get() to handle GET requests and app.post to
handle POST requests. For a full list, see app.METHOD.
These routing methods specify a callback function (sometimes called
“handler functions”) called when the application receives a request to the specified
route (endpoint) and HTTP method. In other words, the application “listens” for
requests that match the specified route(s) and method(s), and when it detects a
match, it calls the specified callback function.

Middlewares
Middleware functions are functions that have access to the request object
(req), the response object (res), and the next function in the application’s request-
response cycle. The next function is a function in the Express router which, when
invoked, executes the middleware succeeding the current middleware.

Middleware functions can perform the following tasks:

 - Execute any code.
- Make changes to the request and the response objects.
- End the request-response cycle.
- Call the next middleware in the stack.
I.4.5. Axios
Axios is a simple promise-based HTTP client for the browser and Node.js.
Axios provides a simple to use the library in a small package with a very extensible
interface.
I.4.6. Next JS and React JS
React is a JavaScript library for building user interfaces. The purpose of
creating ReactJS was to create attractive web applications with high speed and
efficiency with minimal coding. And the main purpose of ReactJS is that every
website when using ReactJS must run smoothly, quickly, and be highly extensible
and simple to implement. All the features or power of ReactJS usually comes from
focusing on components because of this point when working on the web instead of
it will work on the entire application of the website, ReactJS allows developers to
divide the user interface from a complicated page and make it into simpler
components and reuse them means that rendering of data can not only be done at
the server location but can also be done at the client when using ReactJS.

Next.js is an open-source React framework that adds features like Server-

Side Rendering (SSR) and Static Site Generation (SSG). Next.js is built on top of
the React library which means Next.js takes advantage of React and adds features.
- Server-Side Rendering: SSR allows the server to access all required data and
process JavaScript to display on the web page. Under this mechanism, most
of the logical processing is on the server side. In which, the server performs
processing and performs operations with the database to translate (render) to
HTML, then send the response to the client. The client's browser will also
render this HTML only.
- Search Engine Optimization (SEO): Using SSR also gives you an SEO
advantage, helping your website show up higher on search engine results
pages. SSR makes websites rank better for SEO because they load faster and
more website content can be scanned by SEO trackers.
The main advantage of Next.js is its built-in SSR support for increased
performance and SEO. Server-Side Rendering (SSR) works by changing the
request flow of a React application so that all components except the client send
their information to the server.
 I.4.7. Material UI
Material UI is a library of React Components that has been integrated with
Google's Material Design.
Material UI gives your website a comprehensive, unified interface, with buttons,
text fields, toggles,… designed in a style.
I.5. Docker
Docker is a platform that provides an easier way to build, deploy and run
applications using containers (on a virtualization platform).
- Docker Engine: is the main component of Docker, as a tool to package
applications
- Docker Hub: is a “GitHub for docker images”. On DockerHub there are
thousands of public images created by the community allowing you to easily
find the images you need. And just pull back and use with some config you
want.
- Images: is a template for creating a container. Usually, the image will be
based on an existing image with additional customizations. For example,
you build an image based on a sample Centos image available to run Nginx
and customize and configure your web application to run. You can build
your own image or use shared images from the Docker Hub community. An
image will be built based on the instructions of the Dockerfile.
- Container: is an instance of an image. You can create, start, stop, move or
delete containers based on Docker API or Docker CLI.
- Docker Client is a tool to help users communicate with the Docker host.
- Docker Daemon: listens to requests from Docker Client to manage objects
such as Containers, Images, Networks and Volumes through REST API.
Docker Daemons also communicate with each other to manage Docker
Services.
- Dockerfile: is a file that contains instructions for building an image.
- Volumes: is the piece of data created when the container is initialized.

Execution of a system using Docker

- Build: Create a dockerfile which contains source code. This Dockerfile will
be built on a computer that has Docker Engine installed. After the build, the
Container will be generated, in this Container contains the application with
our library.
- Push: After getting the Container, this Container will be pushed to the cloud
and save it there.
 - Pull, Run: If another computer wants to use the Container, it must be forced
to pull this container to the machine, of course, this machine must also
install Docker Engine. Then execute this Run Container.

Docker Compose is a tool used to define and run Docker programs that use
multi-containers. With Docker Compose, we use a YAML file to set up the
necessary services for the program. Finally, with one command, we will create and
start all services from those settings.
Using Compose typically involves the following three steps:
- Declare the program's environments in the Dockerfile.
- Declare the necessary services for the program in the docker-compose.yml
file so that the services can run together in an environment.
- Run the docker-compose up command to start Compose and run the
program.
Docker Compose has commands that allow to manage your program's lifecycle:
- Start, Stop and Rebuild the service.
- View the status of running services.
- View the log output of the running service.
I.6. Nginx
NGINX is open source software for web serving, reverse proxying, caching, load
balancing, media streaming, and more. It started out as a web server designed for
maximum performance and stability. In addition to its HTTP server capabilities,
NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP)
and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.