{'fraction_non_alphanumeric': 0.026251426707973258, 'fraction_numerical': 0.0045654655144301325, 'mean_word_length': 4.655601659751038, 'pattern_counts': {'":': 0, '<': 0, '<?xml version=': 0, '>': 0, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
Building an ID Card Repository with Progressive Web Application to Mitigate Fraud

A lot of service requires identity of users to mitigate undesirable incidents such as fraud. To cut down probability of potential fraud, ID Card of users are collected to be verified so people can verify users whenever an undesirable activity happens. However, to verify identity through an ID card, a repository for the ID Card is required. To verify ID cards, the ID Card repository will be connected to an automated ID Card Verification API. The ID Card repository is meant to be used both on mobile phones and desktop computers, so the concept of progressive web application is used. To be able to upload images smoothly and build progressive web application, the ID Card repository is built using ReactJS and Ant Design. Server side is powered by Strapi and MongoDB. GraphQL API is utilized to connect client side and server side. It involves queries to fetch data. To fetch data on the client side, Apollo client is used to in ReactJS. Git is utilized for version control system which gives contribution to Continuous Integration and Continuous Delivery. In this paper, we will discuss why Strapi is best suited on server side and how Ant Design, a library to style components in a web page, can provide required components in this web application.


I. INTRODUCTION
Data and information have been a part of human life. They are mostly accessed through the Internet and can be provided in various ways such as text, files, and images. People upload and download data. However, when developing a web application that enables its users to register, enterprises might want to verify a user's identity. One common way is to ask users to upload his/her identity card. ID card repository will be used to save user's ID card.
User Interface (UI) is important in creating an application, whether it is a mobile application or a web application. However, creating application's functionality is a lot more important than UI and those things are often time-consuming. Choosing an appropriate UI library becomes vital as necessary web application components must be provided.
On the server side, there are notable things that must be considered seriously. The first one is Application Programming Interface (API) creation. Other than Simple Object Access Protocol (SOAP), Restful API (REST API) and GraphQL API are available [1], [2]. Both REST API and GraphQL API have drawbacks and advantages, so it is desirable to have a library or framework that supports both. In order to focus on the web application's functionality, API creation time and effort need to be reduced.
Another notable thing is related to security which are authentication and authorization. JSON Web Token (JWT) is used to control authentication and authorization. Hence, public can not access pages that can only be seen by authenticated users.
Connecting database and API on the server side should be as easy as possible.
To create API in no time and to configure database on server side, Strapi is used.
To be able to create pages such as Login screen and Upload screen in this web application, Ant Design is involved in building this ID card repository. Nevertheless, placement of various web components can be a challenge in this web application as importing a web component sometimes needs extra configuration on style sheet.
Based on the introduction that has been described above, the following problem formulations are obtained : 1) Does Strapi provide adequate requirement on the server side such as API creation, security, and database configuration? 2) Are required components available in Ant Design?

II. LITERATURE STUDY
Here are technology stacks that power the ID Card Repository.

A. ReactJS
ReactJS is a JavaScript library which is deployed to develop reusable user interface (UI) components [3]. It is released by Facebook in 2013 and maintained by Facebook and a community consisting of developers and companies. ReactJS is optimized to provide speed, simplicity, and scalability [4]. The fundamental behind the React is the concept of virtual Document Object Manipulation (DOM) which React uses effectively. It renders sub-trees of nodes based upon state changes. In order to keep components up to date, React does the least amount of DOM manipulation possible. [5] It utilizes JSX to create React elements. With power of JSX, there is no need to call React.createElement() each time when building virtual DOM. JSX is an optional HTML-like syntax that allows its users to create a virtual DOM tree without using the React.createElement() method. [6] Other than JSX and virtual DOM, React has components which are categorized as stateful and stateless. Stateful components are used when data changes dynamically. State is a property of the React components that includes any data that a component needs. [7] Before React 16.8 was released, when data changes occur dynamically, a class-based component must be used. However, with the use of React hooks, a functional component can be used for it. React hooks is a mechanism for state management in a functional style that avoids the use of classes [8].

B. Progressive Web Application
Progressive Web Application (PWA) is a new set of standards advocated by the Google Web Fundamentals group to bridge a gap by introducing features such as offline support. PWA contributes toward the unification of the mobile experience where web applications can be installed and distributed without application marketplaces, work without Internet connectivity, receive push notifications, and look like regular applications. [9] C. Ant Design Ant Design is one of the most well-known ReactJS UI library that contains a set of high quality components and demos for building rich and interactive UI [10]. It is one of the most popular React UI library with more than 65000 stars on Github as well alongside Material UI, another famous React UI library. Even though it is said that Ant Design is a ReactJS UI library, Ant Design for VueJS and Angular are also available. Ant Design is applied on designing UI components.

D. Strapi
Strapi is a flexible and open-source headless content management system (CMS) that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content [11]. Strapi can be used to create Application Programming Interface (API) fast and easily. It provides a user-friendly interface and allows users to create content-types which is similar with tables in databases without any technical knowledge [12]. It has extensible plugin system including Admin Panel, Authentication & Permission Management, Content Management and API Generator. [13]. It offers Restful API (REST API) by default. However, GraphQL API can be used alongside REST API by installing a GraphQL plugin. It is possible to install a GraphQL plugin either through UI or terminal/command prompt. With REST API, you might test your API using a third-party software, such as Postman. However, if you install GraphQL plugin, Strapi provides GraphQL Playground which helps a lot on testing your GraphQL API. It is accessible at '/graphql' endpoint. Strapi cares about database configuration as well. It can be used with various database management systems, such as MySQL, MongoDB, SQLite, and PostgreSQL. To use one of them, installing locally the one that will be used is a must. For instance, MongoDB is used to store data of ID Card repository. Therefore, installing MongoDB in the machine that will be used is a requirement.

E. MongoDB
MongoDB is one of the most popular document based database [14]. It is a very scalable NoSQL database management system that stores data in a BSON format, a dynamic schema document structured like Javascript Object Notation (JSON) [15].

F. GraphQL
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It provides clients the power to ask for exactly what they need and makes it easier to evolve APIs over time. [16] Unlike Restful API that changes its version when it needs to upgrade, GraphQL API enables its users to add new fields and types to GraphQL API without impacting existing queries. Unlike REST API that has several endpoints, GraphQL API only utilizes a single endpoint which is '/graphql'. Moreover, GraphQL uses a schema to describe the organization of the data and declarative query language to allow clients to access data [17].

G. Git
Git is one of the most popular version control system. Distributed version control systems and their hosting services such as Github and Gitlab has revolutionized how developers collaborate by allowing them to freely exchange and integrate code changes in a peer-to-peer fashion [18]. Git keeps track of code changes, so if there is a change, what has been modified can be tracked through commit messages and git status.

III. METHODOLOGY
Creating API is one of the most vital things in building this ID card repository on the server side. In this PWA, GraphQL API is utilized within Strapi. However, before creating GraphQL API, Strapi requires its users to choose a database management system then configure it easily.
In setting up database management system through Strapi, develpoers are able to choose default configuration provided by Strapi as shown in fig. 1 or change it depends on what requirements of the application are.
Creating a content-type is a step that is similar to determining fields and their data types in database management system. As shown in fig. 2, here are fields with their data types that can be chosen in Strapi : Figure 2. Various fields that are provided by Strapi On the client side, Ant Design which has a lot of components can give a hand to style a web application. Not only components that usually can be seen in a web application like an input field and typography, it provides components to give spacing or margin as well. These are components of Ant Design that is used or planned to be utilized in the ID card repository on each page : fig. 3 illustrates dependency graphs in ID card repository PWA. Basically there are three components which are ID Card PWA that acts as a client side, Server side that generates GraphQL API and JWT provider within Strapi that is connected with MongoDB, and the last one is ID Card Verification API whose function is to verify ID Cards which are uploaded to ID card repository. On the client side, everything is dependent on yarn as a package manager. On the server side, JWT provider gives a JWT as one of the authentication response alongside username and password that are fetched from MongoDB. fig. 4 describes data flows on authentication process. First, React Apollo client will send an authentication request

V. EVALUATION RESULT
Strapi can be utilized to create API fast. Soon after selecting fields and saving the content type, the API will be created. Table 1 below is the fields in a content type of Strapi GraphQL API with their data types : In fig. 5, Strapi GraphQL server responds to createUser mutation in 755ms. fig. 6 shows Strapi GraphQL server gives response to Login mutation in 223ms.
Having Strapi run on the server side, on the client side, The styling was done with Ant Design, including its web components and icons as shown in fig. 7.  Strapi comes up with required fields and data types to create ID card repository. It also helps developers on API creation quickly and easily. GraphQL API and mutation queries that were tested with GraphQL playground in Strapi worked well as well. Ant Design that has a lot of web components enables styling to be done easily alongside ReactJS and Apollo Client on the client side.
For the future development, connecting to ID card verification API, creating registration, upload, and dashboard screens, making UI responsive, and implementing a JWT to control authentication and authorization flow are planned.
ACKNOWLEDGMENT First, we would like to thank Lovia (https://about.lovia.life), who supported us to finish this research paper. Next, we would like to thank to our parents, who supported us with love and understanding. Without them, we could never have reached this current level of success.