# Hear Me - Blog Posting App

***

## Intro

<figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2F8noLXEjw3QRPV3tG2gNJ%2Fhttps___meta-q.cdn.bubble.io_f1675250725369x631335626304462100_Frame%2520908.jpg?alt=media&#x26;token=30789b42-9fff-40f4-8b19-7508a006ec18" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://social-lite.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/blog-posting-app-1640352070923x713272449276313600)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FxxhZFmn9u6pt2VUnQDuL%2F1.png?alt=media&#x26;token=2680905e-d930-4d74-be14-314888dab30d" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FoyEtAVvjO8gM8yyIzCeE%2F2.png?alt=media&#x26;token=32b39a8a-d119-4466-9da0-c9837eb2e835" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FaDDIRt67nLcowlh9o6Ei%2F3.png?alt=media&#x26;token=7a591734-b80d-4617-999a-bc86725e63af" alt=""><figcaption><p>Articles</p></figcaption></figure> <figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FNezx72PydhoRRmCJC4yT%2F4.png?alt=media&#x26;token=de222101-40f8-4bcc-9f42-9fc6fb0ce2a3" alt=""><figcaption><p>Community</p></figcaption></figure> <figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FO4dxgwrfob7xbAiCJcAQ%2F5.png?alt=media&#x26;token=0003aab3-eaba-44c9-964d-8fb462369219" alt=""><figcaption><p>About us</p></figcaption></figure> <figure><img src="https://1210285193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7mKSMQoM38ZGmfRXOIbt%2Fuploads%2FQxVkr7P83OO7UpQ2VdJu%2F6.png?alt=media&#x26;token=12e81cee-da75-401d-885f-f72a30b135c8" alt=""><figcaption><p>Contact us</p></figcaption></figure></div>

***

## Template details

“Hear me” is a place to read and post articles. This is a blogging platform, for writers and content makers, similar Medium. Post, read and follow what you like. Share your ideas and articles easily with the community. Track number of total view and per article views and see how you perform against other writers.

Hear me template features the following:&#x20;

✅ Web and mobile responsive

✅ Dashboard for creators with rich text editor and some analytics

✅ Great and easy to modify design

✅ Filter by tags/categories

✅ Search articles by keyword in topic and category

✅ Follow favorite writers

✅ Comment articles

✅ See number of views

✅ Leave likes

Responsive design - To provide a better mobile experience we've separated mob and web version on separate pages.

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.

{% 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 Flow:**

-> Registering a new user -> Navigating to the Dashboard page -> Create an Article -> View your Articles

***

## 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>ARTICLE PUBLISHING</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>USER ENGAGEMENT AND INTERACTION</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>PERSONALIZED READING EXPERIENCE</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>PERFORMANCE ANALYTICS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>COMMUNITY BUILDING TOOLS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>SOCIAL SHARING INTEGRATION</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/7mKSMQoM38ZGmfRXOIbt/blobs/QmKbdyn8ZdnlHeXqe8Ha/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/xQMkK5gZiD6f8jv3dT3k/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/7mKSMQoM38ZGmfRXOIbt/blobs/gR5ZCVM4qbQGHjTTLGHL/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/eyqnfWz3hEFCeh9X44LC/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/7mKSMQoM38ZGmfRXOIbt/blobs/QFkLb3JuMszd6SxlVfzV/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/pQBn5JtzBy97Zv3Od39L/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/7mKSMQoM38ZGmfRXOIbt/blobs/NHsMQnYB5wOcQHMffCIl/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/n34qddPnK5tcLKMMYLEC/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/7mKSMQoM38ZGmfRXOIbt/blobs/slwA3i9nA43EurXwb3LY/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/VdyMuzbsNzNhzRqE1lbC/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/7mKSMQoM38ZGmfRXOIbt/blobs/2OPw7fdVviZLThwolL5L/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/29MwYax0L3NBzuBFUBIt/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/7mKSMQoM38ZGmfRXOIbt/blobs/rvskefeezTRMKSuoqr2o/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/5SScK8iuGPRbHRI8Ym4B/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/7mKSMQoM38ZGmfRXOIbt/blobs/x3JbHyDTRfSoxvHBnBlk/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, short descriptions of different sections, the most important and popular articles.

<mark style="color:orange;">**Article Page:**</mark> This page contains all information about the article starting with the title and description of the article and ending with the creator, comments and other necessary information.

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

<mark style="color:orange;">**Register Page:**</mark> Page where users provide personal information to create an account on a website or application, granting access to its features and services.

<mark style="color:orange;">**Community:**</mark> Provides all users with a brief description that are registered on the site and on which you can follow.

<mark style="color:orange;">**Dashboard\_user:**</mark> A page on which the user can look at all the information he needs:

* Your article
* Saved articles
* Followers and following&#x20;
* View statistics

<mark style="color:orange;">**Reset Password:**</mark> The user can use this page to reset the password.

<mark style="color:orange;">**About Us:**</mark> A page where you can read all the information about us, our achievements and feedbacks.

<mark style="color:orange;">**Articles:**</mark> A page with all articles where you can see brief information about the article and also sort them by category.

<mark style="color:orange;">**Privacy and Policy:**</mark> On this page you can see all the information about Privacy and Policy.

<mark style="color:orange;">**User Profile:**</mark> The user page will allow us to view information about the user for example:

* Created articles
* Liked articles
* Followers

***

## Reusable elements

1. **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>
2. **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>

***

## Data Types

### Articles

This data type is designed for storing all information about articles.

| Field name          | Type                                                                                                       | Notes                               |
| ------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| `Added to Favorite` | `List of` [`Users`](#user)                                                                                 | Users who added article to favorite |
| `Body text`         | `Text`                                                                                                     | Article content                     |
| `Categories`        | <p><code>Option set:</code></p><p><code>List of</code> <a href="#category"><code>Categories</code></a></p> | Article categories                  |
| `Comments`          | `List of` [`Comments`](#comments)                                                                          | Article comments                    |
| `Likes`             | `List of` [`Users`](#user)                                                                                 | Users who like article              |
| `Main Picture`      | `Image`                                                                                                    | Article image                       |
| `Short Description` | `Text`                                                                                                     | Short description about article     |
| `Tags`              | `List of` [`Tags`](#tags)                                                                                  | Article tags                        |
| `Title`             | `Text`                                                                                                     | Article title                       |
| `Views`             | `Number`                                                                                                   | Article view count                  |

### Banner About Us

This data type is designed for storing information about banners used in application.&#x20;

| Field name    | Type    | Notes          |
| ------------- | ------- | -------------- |
| `Description` | `Text`  | Banner content |
| `Picture`     | `Image` | Banner image   |
| `Title`       | `Text`  | Banner title   |

### Comments

This data type is designed for storing all information about comments posted by [`Users`](#user).

| Field name    | Type                            | Notes                                       |
| ------------- | ------------------------------- | ------------------------------------------- |
| `Article`     | [`Articles`](#articles)         | The article to which this commentary refers |
| `Body`        | `Text`                          | Comment content                             |
| `Images`      | `List of Images`                | Comment images                              |
| `Likes`       | `List of` [`Users`](#user)      | Users who like comment                      |
| `Likes Count` | `Number`                        | Number of likes on comment                  |
| `Replies`     | `List of` [`Replies`](#replies) | Replies of comment                          |

### Conversation

This data type is designed for storing information about conversation.

| Field name             | Type                             | Notes                                      |
| ---------------------- | -------------------------------- | ------------------------------------------ |
| `Created by`           | [`User`](#user)                  | Conversation creator                       |
| `Invited User`         | [`User`](#user)                  | Users invited on this conversation         |
| `List of Participants` | `List of` [`Users`](#user)       | Users who participate in this conversation |
| `Messages`             | `List of` [`Messages`](#message) | Conversation messages                      |

### Feedback About Us

This data type is designed for storing information about feedbacks.&#x20;

| Field name      | Type    | Notes         |
| --------------- | ------- | ------------- |
| `Function Work` | `Text`  | User function |
| `Image`         | `Image` | User Image    |
| `Name`          | `Text`  | User name     |
| `Opinion`       | `Text`  | User opinion  |

### Foll

This data type is designed for storing information about followers and following.

| Field name  | Type            | Notes          |
| ----------- | --------------- | -------------- |
| `Follower`  | [`User`](#user) | User follower  |
| `Following` | [`User`](#user) | User following |

### Instagram

This data type is designed for storing all information about Instagram.<br>

| Field name | Type    | Notes           |
| ---------- | ------- | --------------- |
| `Body`     | `Text`  | Instagram body  |
| `Image`    | `Image` | Instagram image |
| `Title`    | `Text`  | Instagram title |

### Message

This data type is designed for storing all message information.<br>

| Field name     | Type                            |                      |
| -------------- | ------------------------------- | -------------------- |
| `Content`      | `Text`                          | Message content      |
| `Conversation` | [`Conversation`](#conversation) | Message conversation |
| `Creator`      | [`User`](#user)                 | Message creator      |
| `New`          | `Yes/No`                        | New message or no    |

### Notifications

This data type is designed for storing all user notifications. <br>

| Field name             | Type                                                                                                        |                            |
| ---------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------- |
| `Allow Notifications`  | `Yes/No`                                                                                                    | Allow notification or no   |
| `Checked`              | `Yes/No`                                                                                                    | Checked notification or no |
| `Made For`             | [`User`](#user)                                                                                             | Who made notification      |
| `Send notification`    | `Yes/No`                                                                                                    | Send notification or no    |
| `Type of Notification` | <p><code>Option set:</code></p><p><a href="#type-of-notification"><code>Type of Notification</code></a></p> | Type of notification       |

### Replies

This data type is designed for storing all information about replies posted by [`Users`](#user).

| Field name    |                            |                            |
| ------------- | -------------------------- | -------------------------- |
| `Body`        | `Text`                     | Replied content            |
| `Comment`     | `Comments`                 | Replied comments           |
| `Likes`       | `List of` [`Users`](#user) | Users who like replied     |
| `Likes Count` | `Number`                   | Number of likes on replied |

### Subscribers hear me

This data type is designed for storing information about subscribers on application.

| Field name |        |                  |
| ---------- | ------ | ---------------- |
| `Email`    | `Text` | Subscribed email |

### Tags

This data type is designed for storing articles with all tags.

| Field name  |                                     |                  |
| ----------- | ----------------------------------- | ---------------- |
| `Article`   | `List of` [`Articleses`](#articles) | Article with tag |
| `Name Tags` | `Text`                              | Tag name         |

### User

This data type is designed for storing all information about user registered on the website.

| Field name               |                                             |                                  |
| ------------------------ | ------------------------------------------- | -------------------------------- |
| `Address`                | `Text`                                      | User address                     |
| `Allow notifications`    | `Yes/No`                                    | User allow notifications         |
| `Article`                | `List of` [`Articles`](#articles)           | User articles                    |
| `Bio`                    | `Text`                                      | User biography                   |
| `Category`               | `List of Texts`                             | User categories                  |
| `Comments`               | `List of` [`Comments`](#comments)           | User comments                    |
| `Customer ID`            | `Text`                                      | User ID                          |
| `Date of birth`          | `Date`                                      | User birthday                    |
| `Facebook`               | `Text`                                      | User facebook                    |
| `Favorite Articles`      | `List of` [`Articles`](#articles)           | User favorite articles           |
| `Full Name`              | `Text`                                      | User full name                   |
| `Gen`                    | `Text`                                      | User gender                      |
| `Hear Me`                | `Text`                                      | User hear me                     |
| `Instagram`              | `Text`                                      | User instagram                   |
| `Last Activity Time`     | `Date`                                      | User last activity date          |
| `Last Activity`          | `Text`                                      | User last activity action        |
| `Liked Articles`         | `List of` [`Articles`](#articles)           | User liked articles              |
| `Liked Comments`         | `List of` [`Comments`](#comments)           | User liked comments              |
| `Liked Replies`          | `List of` [`Replies`](#replies)             | User liked replies               |
| `Modified Date Email`    | `Date`                                      | User last date modified email    |
| `Modified Date Password` | `Date`                                      | User last date modified password |
| `Notifications`          | `List of` [`Notifications`](#notifications) | User notification                |
| `Phone Number`           | `Text`                                      | User phone number                |
| `Profile Photo`          | `Image`                                     | User image                       |
| `Profile View`           | `Number`                                    | User number of views             |
| `PWD`                    | `Text`                                      |                                  |
| `Replies`                | `List of` [`Replies`](#replies)             | User replies                     |
| `Send Notifications`     | `Yes/No`                                    | User send notifications or no    |
| `Show Other people`      | `Yes/No`                                    | User show other people or no     |
| `Subscription Status`    | `Yes/No`                                    | User subscription status         |
| `Subscribers`            | `List of Texts`                             | User subscribers                 |
| `Twitter`                | `Text`                                      | User twitter                     |
| `Username`               | `Text`                                      | Username                         |
| `Email`                  | `Text`                                      | User Email                       |

### Views

This data type is designed for storing information about user views.

| Field name      |                 |                    |
| --------------- | --------------- | ------------------ |
| `For what User` | [`User`](#user) | View for what user |

This data type is designed for storing all candidate related information.\ <br>

***

## Option sets&#x20;

#### Category

* Music
* Travel
* Comics
* Fashion
* Lifestyle
* Photography
* Programming
* Wallpapers
* Cute Animals
* Writing
* Anime
* K-pop music
* Kitchen style
* Gaming
* Netflix

#### Gender

* Male
* Female
* Other

#### Sort by

* Date ascending
* Date descending
* Name ascending
* Name descending
* Most views
* Less views

#### Statistics

* Last week
* Last month
* Last year

#### Type of notification

* Added to favorites your article
* Comment on your article
* Is now following you
* Liked your article
* Liked your reply
* Liked your comment
* Replied to your comment
* Replied to your message
* Send you a new message
* Subscribed to you

***

<figure><img src="https://content.gitbook.com/content/7mKSMQoM38ZGmfRXOIbt/blobs/ihFnQsr2f2SVrAf29DH8/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>