# AIA - Membership App like Patreon

***

## Intro

<figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FAU0IAp9AXF0wgsfhau3l%2Fhttps___meta-q.cdn.bubble.io_f1675251215200x513248644498011970_Frame%2520930.png?alt=media&#x26;token=bf84f728-95e3-4fd3-988c-29c21855319c" alt=""><figcaption></figcaption></figure>

## Links

🖥️[ Preview link](https://aia-project.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/membership-app-like-patreon-1669894496876x894080971353620500)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FqjO0IwzuMc8uTOhf6iXJ%2F1.png?alt=media&#x26;token=c411237b-8938-428f-acc2-d039ee5e08f8" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2F3RLdtv9WXVo9ZgEHLW5I%2F2.png?alt=media&#x26;token=3f3a4d7e-9a02-4522-814b-358fe767e756" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FlGE3N2o3eylgZItDD6pG%2F3.png?alt=media&#x26;token=ca681b89-e654-4b12-b359-aa1431abd576" alt=""><figcaption><p>Creators page</p></figcaption></figure> <figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FR1tazOy14cdJuolr2cmc%2F4.png?alt=media&#x26;token=96173a02-6feb-4155-9806-30eaf96c5edc" alt=""><figcaption><p>Membership page</p></figcaption></figure> <figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FbV6Iit7QSHCkRPohJiUz%2F5.png?alt=media&#x26;token=e9e2d76e-bf7f-4624-a629-2ce0c0b740e5" alt=""><figcaption><p>Creator dashboard</p></figcaption></figure> <figure><img src="https://4175303787-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCpuh5YkgfciCJMOhratG%2Fuploads%2FXNwqTyWnIAsQjWAFPgfT%2F6.png?alt=media&#x26;token=aadd4058-4a33-4c7f-a5f2-9172e952d582" alt=""><figcaption><p>Admin dashboard</p></figcaption></figure></div>

***

## Template details

AIA - this is a great template for creative people who can create and publish their content. Content in the template can be paid and free. There are two types of users in the template - “Сreators” - people who are willing to share their content and “Members\readers” are those who can access the content, comment on it and contact the author directly.

AIA template features the following:&#x20;

✅ Responsive design&#x20;

✅ Signup/Login&#x20;

✅ Demo Creator/Member/Admin&#x20;

✅ Admin dashboard&#x20;

✅ Creator dashboard&#x20;

✅ Member dashboard&#x20;

✅ Update and add posts&#x20;

✅ Purchase and payment of content&#x20;

✅ Chat between members and creators&#x20;

✅ Likes and comments on posts&#x20;

✅ Convenient search

This template is sold "as is" but if there are any critical bugs, feel free to reach out. Our team will try to fix them ASAP.\
\
We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend.\
\
If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via <dev@appassion.io>. We are always there to help build new products and mobile/web applications.\
\
We hope this template would become a great starting point for your project.

{% hint style="warning" %}
*<mark style="color:red;">**Removing the banner**</mark>*

*<mark style="color:red;">**1. Open the app in Bubble editor**</mark>*&#x20;

*<mark style="color:red;">**2. Go to settings -> SEO/Metatags**</mark>*&#x20;

*<mark style="color:red;">**3. Remove the content of "Script in the body"**</mark>*
{% endhint %}

***

## User flows&#x20;

**Main user flow:**&#x20;

-> Sign up/Login -> Creators search -> View posts -> Purchase and payment of content -> Ability to comment on content -> Chat with creators -> View all subscriptions in your personal account.

***

## Key features

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="checkbox"></th></tr></thead><tbody><tr><td></td><td align="center"><mark style="color:orange;"><strong>MULTISELECT DROPDOWN</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>RICH TEXT EDITOR</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>MEMBERSHIP COMMUNITIES</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CONTENT MONETIZATION FEATURES</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>IN-APP PURCHASES AND SUBSCRIPTIONS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>DIGITAL ART MARKETPLACE</strong></mark></td><td></td><td></td><td>false</td></tr></tbody></table>

## Workflows&#x20;

### Primary colors and their purposes

### **Green**

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/gS1xjRQW8tRwq38oQ3Md/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/FYvDyBZZLHQBTszyeYL5/exmp%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Red**

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/CoAJbUt9PlWcx9JDBrnb/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/jYygvqB2TPjIFVLSY91I/exmp%204.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Blue**

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/tXSejxwtS6yuyVgM8BI3/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/s1F4ykGzrnBMvPi3DCdp/exmp%206.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Orange**

Used for actions related to app navigation, providing ease of orientation within the interface.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/FqCYwZa5xdTMjaTTT6yZ/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/U1PY1xSsdyzyZDu9UTNL/exmp%208.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Brown**

&#x20;Utilized for custom workflows and API work, highlighting these actions among others.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/nwEtcPhcT6usKG2tuSVJ/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/9BbZtnmEOFsY6sQwFJDj/exmp%2010.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Purple**

Left to the developer's discretion for assigning color to actions as they see fit.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/HB8Zx0lqA9CPPBP4yjC3/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/TAWAt95LSpZZnzkVgtQV/purple%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Cyan**

&#x20;**I**ntended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

**For example:**

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/hCkhDco1HoLOY5P4O6yz/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/zB4yw8usLs9xi7f46ocw/cyan%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Grey**

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

For example:

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

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/viHxGgdAJe7OMm6GJm1x/grey%201.svg" alt="" width="352"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.
{% endhint %}

***

## Pages

*Below, you will find a list of all the pages available on this platform, along with a brief description of their functionality.*

\ <mark style="color:orange;">**Index:**</mark> Explore our landing page for insights on the template, featuring descriptions, who use AIA, feedbacks.

<mark style="color:orange;">**All Creators:**</mark> This page compiles all creators who are registered on the site.

<mark style="color:orange;">**About Us:**</mark> Exploring this page the user can find out more interesting and useful information about us.

<mark style="color:orange;">**Creator Questionnaire:**</mark> This page is used for the creator to enter data about himself and what content he deals with.

<mark style="color:orange;">**Contact Us:**</mark> Connect with platform administrators effortlessly through our user-friendly contact page.

<mark style="color:orange;">**Docs:**</mark> Access all necessary platform documentation, including Privacy Policy, Terms & Conditions, and Frequently Asked Questions (FAQ).

<mark style="color:orange;">**Dashboard Creator:**</mark> An creator's dashboard providing essential and up-to-date information.&#x20;

* The  "Analytics" tab compiles general information such as total earned, members and comments, graphics and month statistics, last notifications and memberships.
* The  "Tiers" tab compiles information about all tiers with the necessary information such as price, name, description, category and as needed, the creator can edit tier or create a new tier.
* The  "Posts" tab compiles all created posts and information about them such as name, type, date of publication, tiers, views and if you want you can edit or delete the post and at the top of the page you can choose by category to create a new post.
* The  "Settings" tab compiles all the information about the creator and has the possibility to modify it.
* The  "Security" tab compiles information about the last time the creator changed his email or password and also gives him the possibility to change them once.

<mark style="color:orange;">**Login:**</mark> This page allows users to log in or register on the site.

<mark style="color:orange;">**Chat:**</mark> This is the page where users can talk to each other using a chat.

<mark style="color:orange;">**Creator Page:**</mark> This page compiles all information about the creator such as memberships, recent posts.

<mark style="color:orange;">**Dashboard Admin:**</mark> An admin's dashboard providing essential and up-to-date information.&#x20;

* The  "Analystics" tab compiles information about the site such as total earning, members and comments, last notifications and memberships.&#x20;
* The  "Members" tab compiles information about all members registered on the site and in how many memberships he has.
* The  "Creators" tab compiles information about all creators registered on the site and in how many members he has.
* The  "Settings" tab compiles all the information about the account and has the possibility to modify it.
* The  "Security" tab compiles information about the last time the admin changed his email or password and also gives him the possibility to change them once.

<mark style="color:orange;">**Dashboard Member:**</mark> Еhis page contains information about account, security, email notifications, memberships, chat settings and if he wants he can modify them.

<mark style="color:orange;">**Feed:**</mark> This page contains posts from creators to which the member is subscribed.

<mark style="color:orange;">**Reset Password:**</mark> Effortlessly reset your password and receive updated login credentials for seamless access.

***

## Reusable elements

1. **Footer** - a section at the bottom of a web page containing additional information such as contacts and links. <mark style="color:orange;">Found on all application pages.</mark>
2. **Header** - the top part of a web page containing the logo, application name, navigation elements, and other important components. <mark style="color:orange;">Found on all application pages.</mark>

***

## Data Types

### Benefits

This data type is designed for storing information related to Benefits.

| Field name | Type   | Notes         |
| ---------- | ------ | ------------- |
| `Title`    | `Text` | Benefits name |

### Admin

This data type is designed for storing information related to Admins.

| Field name | Type            | Notes            |
| ---------- | --------------- | ---------------- |
| `Creator`  | [`User`](#user) | Admin user email |

### Categories

This data type is designed for storing information related to Categories.

| Field name | Type    | Notes          |
| ---------- | ------- | -------------- |
| `Image`    | `Image` | Category image |
| `Title`    | `Text`  | Category name  |

### Comments

This data type is designed for storing information related to Comments.

| Field name      | Type                       | Notes                     |
| --------------- | -------------------------- | ------------------------- |
| `Body`          | `Text`                     | Comment content           |
| `Like Comments` | `List of` [`Users`](#user) | Comment users likes       |
| `Post`          | [`Posts`](#posts)          | Comment post              |
| `Creator`       | [`User`](#user)            | Comment creator user name |
| `Created Date`  | `Date`                     | Comment created date      |

### Conversation

This data type is designed for storing information related to Conversation.

| Field name      | Type                       | Notes                          |
| --------------- | -------------------------- | ------------------------------ |
| `Count of Sort` | `Number`                   | Conversation sort number       |
| `Participants`  | `List of` [`Users`](#user) | Conversation participants      |
| `Creator`       | [`User`](#user)            | Conversation creator user name |
| `Modified Date` | `Date`                     | Conversation modified date     |
| `Created Date`  | `Date`                     | Conversation created date      |

### Creator

This data type is designed for storing information related to Creator.

| Field name             | Type                                    | Notes                        |
| ---------------------- | --------------------------------------- | ---------------------------- |
| `Categories`           | `List of` [`Categorieses`](#categories) | Creator categories           |
| `Category Description` | `Text`                                  | Creator category description |
| `Cover Image`          | `Image`                                 | Creator image cover          |
| `Link Facebook`        | `Text`                                  | Creator facebook link        |
| `Link Instagram`       | `Text`                                  | Creator instagram link       |
| `Link Twitter`         | `Text`                                  | Creator twitter link         |
| `Link Youtube`         | `Text`                                  | Creator youtube link         |
| `Page Description`     | `Text`                                  | Creator page description     |
| `Tiers`                | `List of` [`Tierses`](#tiers)           | Creator tiers                |
| `Creator`              | `User`                                  | Creator username             |

### Feedback

This data type is designed for storing information related to Feedback.

| Field name        | Type            | Notes                      |
| ----------------- | --------------- | -------------------------- |
| `Body`            | `Text`          | Feedback content           |
| `Full Name`       | `Text`          | Feedback full name         |
| `Occupation`      | `Text`          | Feedback occupation        |
| `Profile Picture` | `Image`         | Feedback profile picture   |
| `Creator`         | [`User`](#user) | Feedback creator user name |
| `Created Date`    | `Date`          | Feedback created date      |

### Member

This data type is designed for storing information related to Member.

| Field name                                    | Type                                   | Notes                                                     |
| --------------------------------------------- | -------------------------------------- | --------------------------------------------------------- |
| `AIA Newsletter`                              | `Yes/No`                               | Member newsletter status                                  |
| `Connected Stripe`                            | `Yes/No`                               | Member content stripe status                              |
| `Membership`                                  | `List of` [`Memberships`](#membership) | Member memberships                                        |
| `Product Updates and community announcements` | `Yes/No`                               | Member product updates and community announcements status |
| `Receiving Notifications`                     | `Yes/No`                               | Member received notifications status                      |
| `Send AIA Newsletter in Chat`                 | `Yes/No`                               | Member send newsletter in chat status                     |

### Membership

This data type is designed for storing information related to Membership.

| Field name           | Type                                                                     | Notes                         |
| -------------------- | ------------------------------------------------------------------------ | ----------------------------- |
| `Member`             | [`Member`](#member)                                                      | Membership member             |
| `Paid`               | `Yes/No`                                                                 | Membership paid status        |
| `Subscription End`   | `Date`                                                                   | Membership subscription end   |
| `Subscription Start` | `Date`                                                                   | Membership subscription start |
| `Tier`               | [`Tiers`](#tiers)                                                        | Membership tiers              |
| `Type Membership`    | <p><code>Option set:</code><br><a href="#type"><code>Type</code></a></p> | Membership type               |

### Message

This data type is designed for storing information related to Message.

| Field name      | Type                            | Notes                     |
| --------------- | ------------------------------- | ------------------------- |
| `Content`       | `Text`                          | Message content           |
| `Conversation`  | [`Conversation`](#conversation) | Message conversation      |
| `Created Date`  | `Date`                          | Message created date      |
| `Modified Date` | `Date`                          | Message modified date     |
| `Creator`       | [`User`](#user)                 | Message creator user name |

### Notifications

This data type is designed for storing information related to Notifications.

| Field name | Type            | Notes                       |
| ---------- | --------------- | --------------------------- |
| `Content`  | `Text`          | Notification content        |
| `Whom`     | [`User`](#user) | Notification whom user name |

### Posts

This data type is designed for storing information related to Posts.

| Field name      | Type                                                                               | Notes                  |
| --------------- | ---------------------------------------------------------------------------------- | ---------------------- |
| `Audio`         | `File`                                                                             | Post audio file        |
| `Comments`      | `List of` [`Commentses`](#comments)                                                | Post comments          |
| `Description`   | `Text`                                                                             | Post description       |
| `Images`        | `List of Images`                                                                   | Post images            |
| `Like Posts`    | `List of` [`Users`](#user)                                                         | Post users likes       |
| `Links`         | `List of Texts`                                                                    | Post links             |
| `Post Type`     | <p><code>Option set:</code><br><a href="#posttypes"><code>Post Type</code></a></p> | Post type              |
| `Preview`       | `Image`                                                                            | Post preview image     |
| `Tier`          | [`Tiers`](#tiers)                                                                  | Post tiers             |
| `Title`         | `Text`                                                                             | Post title             |
| `Video`         | `Text`                                                                             | Post video             |
| `Creator`       | [`User`](#user)                                                                    | Post creator user name |
| `Created Date`  | `Date`                                                                             | Post created date      |
| `Modified Date` | `Date`                                                                             | Post modified date     |

### Tiers

This data type is designed for storing information related to Tiers.

| Field name      | Type                                                                     | Notes                  |
| --------------- | ------------------------------------------------------------------------ | ---------------------- |
| `Benefits`      | `List of` [`Benefitses`](#benefits)                                      | Tier benefits          |
| `Description`   | `Text`                                                                   | Tier description       |
| `Image`         | `Image`                                                                  | Tier image             |
| `Memberships`   | `List of` [`Memberships`](#membership)                                   | Tier memberships       |
| `Posts`         | `List of` [`Postses`](#posts)                                            | Tier posts             |
| `Price`         | `Number`                                                                 | Tier price             |
| `Title`         | `Text`                                                                   | Tier title             |
| `Type Tier`     | <p><code>Option set:</code><br><a href="#type"><code>Type</code></a></p> | Tier type              |
| `Creator`       | [`User`](#user)                                                          | Tier creator user name |
| `Created Date`  | `Date`                                                                   | Tier created date      |
| `Modified Date` | `Date`                                                                   | Tier modified date     |

### User

This data type is designed for storing information related to User.

| Field name      | Type                                                                              | Notes                      |
| --------------- | --------------------------------------------------------------------------------- | -------------------------- |
| `Admins User`   | [`Admin`](#admin)                                                                 | User admin                 |
| `Creator User`  | [`Creator`](#creator)                                                             | User creator               |
| `Member User`   | `Member`                                                                          | User member                |
| `Accept Terms`  | `Yes/No`                                                                          | User accepted terms status |
| `Change Email`  | `Date`                                                                            | User changed email date    |
| `Change Pass`   | `Date`                                                                            | User changed password date |
| `Demo User`     | `Yes/No`                                                                          | User demo user status      |
| `First Name`    | `Text`                                                                            | User first name            |
| `Last Name`     | `Text`                                                                            | User last name             |
| `Online`        | `Date`                                                                            | User online date           |
| `Profile Image` | `Image`                                                                           | User profile image         |
| `Username`      | `Text`                                                                            | User username              |
| `User Type`     | <p><code>Option set:</code><br><a href="#usertype"><code>User Type</code></a></p> | User type                  |
| `Email`         | `Text`                                                                            | User email                 |

### View Post

This data type is designed for storing information related to View Post.

| Field name | Type              | Notes           |
| ---------- | ----------------- | --------------- |
| `Post`     | [`Posts`](#posts) | Posts from post |

***

## Option sets&#x20;

#### Analytics

* Week
* Month
* Year

#### Post Types

* Images
* Text
* Video
* Link
* Audio

#### Type

* Active
* Archived

#### User Type

* Creator
* Member
* Admin

***

<figure><img src="https://content.gitbook.com/content/Cpuh5YkgfciCJMOhratG/blobs/qasAYHCURlsxKNGsx8PM/Logo-Appassion.png" alt=""><figcaption></figcaption></figure>

The template is available in its current form, however, further alterations can be negotiated.&#x20;

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at [<mark style="color:orange;">https://appassion.io/</mark>](https://appassion.io/) or email us at <mark style="color:orange;"><dev@appassion.io></mark>

<mark style="color:orange;">**We are always at your service through:**</mark> [Upwork](https://www.upwork.com/agencies/1472948949083369472/), [Clutch](https://clutch.co/profile/appassion#highlights). \ <br>