> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/1.frontend/frontend-services-types.md). # Frontend Services Types ### Builder The term **“builder”** refers to a service development system that uses a drag-and-drop widget feature. This feature allows users to instantly convert their designs into mobile and web frontends, which can also be directly integrated with existing systems.
One of the most important components within the builder is the **Form Builder**. In simple terms, when you create a form using the Builder, you’re essentially structuring a database — including its fields, data types, validations, and supporting components such as **“Submission”** and **“Payment”** modules — all within a no-code platform. Every piece of data submitted through a form is automatically stored in a generated database. The data within that database can be accessed via an automatically generated API. Besides retrieving data through APIs, users can also manage the stored data directly within the platform using the **Backoffice Builder** feature. #### Frontend Builder A feature that allows users to create the **frontend portal** of a service using an easy **drag-and-drop widget** system. #### Backoffice Builder A feature designed to build the **backoffice or admin page** of an application, also using the available **drag-and-drop widgets**. #### API Integration A feature that enables users to **connect and integrate data** previously created using the builder. *** ### Package Fitur package/plugin dapat di manfaatkan oleh developer untuk membangun layanan menggunakan native code (Plugin) secara langsung dan menggabungkan nya dengan source code mainApp serta langsung mempublikasikan nya ke portal nasional.

Package Mobile Flow

The **package/plugin feature** allows developers to build services using **native code (Plugins)** and integrate them directly with the **main app’s source code**. Once integrated, the combined application can be published directly to the national portal. In QuantumByte’s **package development workflow**, developers begin by duplicating a **code template or example project** into their own repository for local development. When the code is compiled through the platform, the system automatically **synchronizes the developer’s repository** with the platform. During the **compilation process**, the system merges the **miniapp package** with the **main app’s source code**, which involves routing setup, dependency overrides, and compilation. If no errors or conflicts occur, the developer can **download a preview version** of the app in **APK format**. Currently, the miniapp package can be successfully merged with the main app. However, before it can be officially published to the **Play Store** or **App Store**, it must first go through an **approval and verification process** by the **QuantumByte admin team** for merging and pushing to the main repository. *** ### Microsite The **microsite feature** allows developers to build services by writing code directly, deploy them on the framework’s server cluster, and publish them instantly to the national portal.

Microsite Workflow

The process of creating a microsite is quite similar to developing a package. Developers start by duplicating the code template into their own repository for local development. When deploying to the QuantumByte Kubernetes cluster, the process follows these steps: 1. Synchronize the microsite source code 2. Build the Docker image 3. Push the image to the Docker registry 4. Deploy to the Kubernetes cluster 5. Set up the subdomain 6. Enable internet access After deployment, developers can set the microsite as the default frontend for their service. Once approved by the QuantumByte admin, the microsite becomes accessible through the national portal. #### Code Template Several code templates are available, including: * **Vue3** (Nuxt Framework) * **ReactJS** (Next Framework) * **PHP** (Laravel Framework) * **Other** (Custom) Each provided code template includes the following components: * **UI Kit**\ A set of UI components used to build microsite pages, serving as a standardized design system for services that use Tailwind and custom KonstaUI styling. * **SDK Library** * **SDK Libs:** A library that provides tools or shortcuts for accessing service functionalities such as retrieving user details, managing shipping addresses, handling transactions, and accessing location data in both development and production modes. * **SDK MainApp:** A library that facilitates communication with the MainApp, enabling functions like navigation control, opening main app pages, or triggering modals. *** ### Microservice Fitur microservice dapat digunakan untuk membuat backend service di framework dengan code template yang tersedia serta men-deploy nya di server cluster framework untuk dapat di akses melalui API
Secara alur pembuatan microservice, caranya tidak jauh berbeda dengan develop microsite, yang membedakan output berupa Rest-API dan tidak dapat di setel sebagai default frontend layanan. #### Code Template Terdapat beberapa code template yaitu : * **Python (Flask)** * **Golang (Fiber)** * **Typescript (NestJs)** * **Other (Custom)** *** ### Storage The **Storage feature** allows developers to upload document files within the framework, up to a specified capacity, and manage them through an API.
In practice, a developer can create or add storage and define the required capacity. The system then uses QuantumByte’s storage servers to store the uploaded files. The platform automatically generates a **REST API** that developers can use to upload and manage document files. An **API Key** and **Secret Key** are also automatically created to provide secure access to the API. {% hint style="info" %} **Why not store files directly in Microservices or Microsites?**\ Microservices and Microsites are **stateless**, meaning any files or data stored within them will be deleted when the service is restarted or redeployed. {% endhint %} *** ### **Database** The **database feature** is used to store data and can be accessed by microservices or other services as a place to manage structured information.
To create a database on the QuantumByte server, developers can start by selecting one of the available database templates, such as **PostgreSQL**, **MySQL**, or **MongoDB**. They can then configure the environment settings as needed, including the user, password, and other parameters. Once the setup is complete, the platform automatically deploys the database service to the QuantumByte server and creates the necessary storage for it. After deployment, developers can directly access and use the database. *** ### API Management API Management serves as a tool for exchanging data between developers through a shared framework.
With this feature, you can use APIs created by other developers (if access is granted) and also publish your own APIs directly through the platform, allowing other developers to integrate with your services easily. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/1.frontend/frontend-services-types.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.