# Ez Mobile PWA

<figure><img src="/files/dxMbncreuOsJ0EdqTz88" alt=""><figcaption></figcaption></figure>

***

## 🔗Links

&#x20;      [**Template Link on Bubble Marketplace**](https://bubble.io/template/ez-mobile-pwa-1484598525988x253565831442333700)

&#x20;      [**Template Link on Our Website**](https://eazycode.com/template/ez-mobile-pwa-1692021501954x106165269941832290)

&#x20;      [**Preview Link**](https://free-app.bubbleapps.io/)

&#x20;      [**Forum Link** ](https://forum.bubble.io/t/free-mobile-app-design-template/9614)

***

## Photos

{% tabs %}
{% tab title="1" %}

<figure><img src="/files/zyHMEgsy3nnsE8NzYt3E" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2" %}

<figure><img src="/files/5r5OseObjzCqLq2DDyJ3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="3" %}

<figure><img src="/files/Y1Q0aT4DeR3s04CBprBu" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="4" %}

<figure><img src="/files/DvHiunloxg9vEO7YMcSA" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="5" %}

<figure><img src="/files/usqOhApZRXYTr3Ro7D5q" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="6" %}

<figure><img src="/files/6e8zLISp4CKBHfW9Bdk7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="7" %}

<figure><img src="/files/Uq4bAqAFMYVCRCtEsmjy" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Introduction&#x20;

Ez Mobile PWA is a universal solution developed by EazyCode for creating various mobile applications. It is suitable for both beginners and experienced bubble developers. A Progressive Web Application (PWA) is a modern web application that offers a user-friendly and visually appealing experience similar to native mobile apps. This template is perfect for companies looking to provide a comprehensive range of services and bubble developers who want to create their applications.

In today's world, mobile phones have become essential for everyday tasks, and mobile applications play a crucial role in their value. EazyCode recognizes this importance and has carefully developed the Ez Mobile PWA template with all the necessary tools for this type of mobile application. With a wide selection of elements and actions, you can bring any idea to life and satisfy even the most demanding customers. The template also includes a chat tab with a contact list, allowing your clients to easily exchange messages.

The template is fully responsive and compatible with all types of mobile devices. Our team has designed it according to modern UX/UI standards, ensuring an intuitive interface and pleasant colors. The template is completely free, although additional modifications can be discussed. If you have any questions, please feel free to contact us, and we will be happy to help find a solution for your idea.

We can also provide **cross-platform** development or **containerization** based on this template.

***

## Features

* An animated loading page
* App landing page
* Sign in page
* Sign up page
* 5 pages app design - left wide open so you can easily put in your amazing app ideas!

***

## Notes

{% hint style="info" %} <mark style="color:blue;">**Important note**</mark><mark style="color:blue;">:</mark> After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security.&#x20;

Check all privacy settings by the following link before launch: [*<mark style="color:blue;">**Bubble Privacy**</mark>* ](https://manual.bubble.io/help-guides/data/the-database/protecting-data-with-privacy-rules)

Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules.
{% endhint %}

{% hint style="danger" %} <mark style="color:red;">This template is not the final product. Any part of the application can be modified for different needs.</mark>
{% endhint %}

***

## Pages

### index

The page greets the user with a slider with a short description of the application's features.

Following is the Sign-Up / Log-In form.

After authentification, a control panel appears containing five tabs.

* **Home** - This is the tab with a vertical slider, that describes additional features of the app.
* **Elements** - This tab displays a list of elements that the user can use for himself.
* **Actions** - This tab displays a list of actions that the user can use for himself.
* **Chat** - This tab shows a list of contacts with a chat window.
* **Settings** - This is a tab with the user's personal information.

### reset\_pw

This page allows the user to reset the password.

***

## Workflow

Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> standard for the use of colors with a detailed explanation.

{% hint style="warning" %} <mark style="color:orange;">The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.</mark>
{% endhint %}

**Blue** - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.

<div align="center"><figure><img src="/files/jXBLqAqnhRtr8trT1P4y" alt="" width="200"><figcaption></figcaption></figure></div>

**Green** - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.

<figure><img src="/files/IhsNgLQzEqD60jRJQ1nn" alt="" width="200"><figcaption></figcaption></figure>

**Red** - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."

<figure><img src="/files/Bvmu9eBxmVDTHmejQBzN" alt="" width="200"><figcaption></figcaption></figure>

**Orange** - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.

<figure><img src="/files/6V3DXdnLhMYwqnWDpiP8" alt="" width="200"><figcaption></figcaption></figure>

**Cyan** - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.

<figure><img src="/files/GPrMgq8tXbrjY9yyZVyH" alt="" width="200"><figcaption></figcaption></figure>

**Brown** - Custom workflow, API workflow, and similar tasks.

<figure><img src="/files/keW5zGLMCW3tTyyEOWOZ" alt="" width="200"><figcaption></figcaption></figure>

**Purple** - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.

<figure><img src="/files/XNzKj8OwRFRk1HFOGqvy" alt="" width="200"><figcaption></figcaption></figure>

**Grey** - All other actions.

<figure><img src="/files/HC9QqjagbZp1qTBebH6y" alt="test" width="201"><figcaption></figcaption></figure>

***

## Data Types

### Hello Screen

This data type is used to store hello screen image proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>image</code></td><td><code>image</code></td><td>Stores the image.</td><td></td></tr></tbody></table>

### Home Screen

This data type is used to store home screen image proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>image</code></td><td><code>image</code></td><td>Stores the image.</td><td></td></tr></tbody></table>

### Images

This data type is used to store uploaded image proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>images</code></td><td>image</td><td>Stores the uploaded image.</td><td></td></tr><tr><td><code>like</code></td><td><code>yes/no</code></td><td>Stores the image status(liked or not).</td><td></td></tr><tr><td><code>text</code></td><td><code>text</code></td><td>Stores the image description.</td><td></td></tr><tr><td><code>title</code></td><td><code>text</code></td><td>Stores the image title..</td><td></td></tr></tbody></table>

### Messages

This data type is used to store message proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Message</code></td><td><code>text</code></td><td>Stores the message content.</td><td></td></tr></tbody></table>

### User

This data type is used to store user proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Cover image</code></td><td><code>image</code></td><td>Stores the user cover image.</td><td></td></tr><tr><td><code>First name</code></td><td><code>text</code></td><td>Stores the user first name.</td><td></td></tr><tr><td><code>Last name</code></td><td><code>text</code></td><td>Stores the user last name.</td><td></td></tr><tr><td><code>Photo</code></td><td><code>image</code></td><td>Stores the user image.</td><td></td></tr></tbody></table>

***

## Option sets

### Filter\_new/old

* First new
* First old

***

<div align="left"><figure><img src="/files/FWlRXstCc6xNIGrX5Eqb" alt="" width="188"><figcaption></figcaption></figure></div>

The template is sold as is, although additional modifications can be discussed. Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – <http://eazycode.com/>

**Hire us:**

<img src="/files/4KPeHfCmX2d7zpd83cXF" alt="" data-size="line"> <https://www.fiverr.com/share/qQoDQZ>\ <img src="/files/h0wwtUMwvDod7FamBfIq" alt="" data-size="line"> <https://www.upwork.com/freelancers/~01c1a4cbef44ecb5f1>\
\
**Follow us:**

<img src="/files/67Q41mFR1z6nYwKvqJeJ" alt="" data-size="line"> <https://www.facebook.com/eazycode>\ <img src="/files/6MUa0InxwRzMoVStCu5q" alt="" data-size="line"> <https://twitter.com/ezcode_official>  \ <img src="/files/IUseXDC1i7zfvZcQgctx" alt="" data-size="line"> <https://www.instagram.com/eazycodecom/>\ <img src="/files/0dMeGeMKCjKSGW3RBP6P" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>


---

# Agent Instructions: 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.eazycode.com/ezcode-documentation/templates/ez-mobile-pwa.md?ask=<question>
```

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.