# Best Buy - Retail Marketplace

***

## Intro

<figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FNLjE19Sv9TKMzM4jp34w%2Fhttps___meta-l.cdn.bubble.io_f1692708999050x866812196410111900_Frame%2520943.png?alt=media&#x26;token=99f7fa55-f474-470d-b24a-2dda7ac6e7b2" alt=""><figcaption></figcaption></figure>

## Links

🖥️[ Preview link](https://adtoo.bubbleapps.io/)

🌐[ Template page on Bubble Marketplace](https://app.gitbook.com/o/RuM1d1eiHA6tPghPDndi/s/Q2TSK7gTTjwJjBpdj0Yt/)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FgsMI6evpUuRA6tBf9Sl3%2F1.png?alt=media&#x26;token=106f7575-c7aa-4d79-a991-98883d8be431" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2F4ycNe776518yb2Yj8ofz%2F2.png?alt=media&#x26;token=680ded62-442c-4911-a59e-521e2fb1b7c9" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FcFUGnnM7WL6NVzRzje3L%2F3.png?alt=media&#x26;token=ea981bbc-5e08-43b8-9216-14997825821b" alt=""><figcaption><p>User dashboard</p></figcaption></figure> <figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FqjtC8wKVeZs6EW2pAHwc%2F4.png?alt=media&#x26;token=ec5a1228-c20a-47ef-9fcd-10950d7a3bec" alt=""><figcaption><p>Product page</p></figcaption></figure> <figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FoGtoFC8ZgyyIEe5yVjCu%2F5.png?alt=media&#x26;token=464ea462-3160-4e98-b641-854c981718c5" alt=""><figcaption><p>Admin dashboard</p></figcaption></figure> <figure><img src="https://3660732270-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ2TSK7gTTjwJjBpdj0Yt%2Fuploads%2FU5kGNoeVAiLnKHDW76Vs%2F6.png?alt=media&#x26;token=03b26a6f-6a45-4d5b-94aa-5e6295423204" alt=""><figcaption><p>Register page</p></figcaption></figure></div>

***

## Template details

We are thrilled to present to you our new template, "Best Buy," developed on the Bubble.io platform. Best Buy is an exceptionally user-friendly template that falls within the marketplace category. Our designers and developers have crafted this template to be intuitively understandable for users of all types. Within this template, you can register and list the items you wish to sell. Should a user require a purchase, this template serves as an ideal choice, as we have incorporated a wide array of diverse product categories, catering to each user's specific needs.

Furthermore, we have introduced a feature that enables buyer-seller communication through a chat system. Here, they can discuss all necessary transaction details and coordinate meetings. The template also includes an admin panel. Within this dashboard, administrators can oversee all activities within the template. They can view the complete list of items available for sale, see all users, and add new content to the Blog section. Our Appassion team hopes that you will find this template appealing and that it will be a valuable asset to your productive use!

Best Buy template features the following:&#x20;

✅ Responsive design&#x20;

✅ Signup/Login&#x20;

✅ Demo User/Admin&#x20;

✅ User dashboard&#x20;

✅ Admin dashboard&#x20;

✅ Possibility of publishing and editing the product&#x20;

✅ Communication between users&#x20;

✅ Opportunity to leave a review&#x20;

✅ Search product by category

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 as soon as possible.

Under the Standard license, this template can be used multiple times to create applications for you own use, personal or business, that you can monetize your application with paid users or advertising. You should not use this license to build apps for others. The Developer license lets you build multiple applications based on this template for yourself and for others.\
\
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 is 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;

&#x20;-> Sign up/Login; -> Product search; -> View product; -> Possibility of publishing and editing the product. -> Ability to leave review; -> Chat between buyer-seller -> Favorites in your personal dashboard.

***

## 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>PRODUCT LISTINGS</strong></mark> </td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>ADVANCED SEARCH AND FILTERING</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>BUYER PROTECTION AND REVIEWS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>USER-FRIENDLY 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/Q2TSK7gTTjwJjBpdj0Yt/blobs/RRibXaDEjHaiDQr3OgBO/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Q2TSK7gTTjwJjBpdj0Yt/blobs/3DsYACDarNpVDOXKI69C/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/Q2TSK7gTTjwJjBpdj0Yt/blobs/dZqJG79EmtWkg2jmsTmM/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/Q2TSK7gTTjwJjBpdj0Yt/blobs/iQRNkEoLqGMRSyFIGhk7/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/Q2TSK7gTTjwJjBpdj0Yt/blobs/xNEj5y9idmZLgvbGdDLO/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, recommended products, rated categories, last added products.

<mark style="color:orange;">**Category:**</mark> This page compile all products with the required information in a certain category.

<mark style="color:orange;">**Created Add:**</mark> This page contains the necessary functionality to create and add a product to the site.

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

<mark style="color:orange;">**Blog Page:**</mark> This page contains more information about us.

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

* The "Products" compiles information about all products on the site.&#x20;
* The "Blog" compiles information about all blogs on the site.
* The "Users" compiles information about all users on the site.

<mark style="color:orange;">**Chat:**</mark> This page has the functionality to allow users to communicate with each other using a cheat.

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

* The "My Ads" compiles all products that the utility has added to the site
* The "Favorites" compiles products the user has added to favorites.
* The "Settings" tab facilitates basic platform access customization.

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

<mark style="color:orange;">**Details:**</mark> This page contains all the information about a product on the site such as name, price, description, owner, product status and others.

<mark style="color:orange;">**Store:**</mark> This page compile all products with the required information in a certain subcategory.

***

## Reusable elements

1. **Card product** - contains the minimum information about a product.
2. **Footer** - a section at the bottom of a web page containing additional information such as contacts and links. Used in the following pages: <mark style="color:orange;">index, category, created\_add, blog, profile, credentials, details, store.</mark>
3. **Login** - Effortlessly reset your password and receive updated login credentials for seamless access.
4. **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

### Blogs

This data type is designed for storing all Blogs related information.

| Field name      | Type            | Notes                      |
| --------------- | --------------- | -------------------------- |
| `Content`       | `Text`          | Blog content               |
| `Divider`       | `Text`          | Blog divider content       |
| `Enter Excerpt` | `Text`          | Blog enter excerpt content |
| `Photo`         | `Image`         | Blog image                 |
| `Second Photo`  | `Image`         | Blog second image          |
| `Title`         | `Text`          | Blog name                  |
| `Creator`       | [`User`](#user) | Blog creator user name     |

### Category

This data type is designed for storing information related to Category.&#x20;

| Field name      | Type                                     | Notes               |
| --------------- | ---------------------------------------- | ------------------- |
| `Image`         | `Image`                                  | Category image      |
| `Subcategories` | `List of` [`Subcategorys`](#subcategory) | Subcategories names |
| `Title`         | `Text`                                   | Category name       |

### Chat

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

| Field name          | Type                             | Notes                  |
| ------------------- | -------------------------------- | ---------------------- |
| `Count for Sort`    | `Number`                         | Chat messages number   |
| `List Participants` | `List of` [`Users`](#user)       | Chat users             |
| `Messages`          | `List of` [`Messages`](#message) | Chat messages          |
| `Recipient Users`   | [`User`](#user)                  | Chat recipient user    |
| `Creator`           | [`User`](#user)                  | Chat creator user name |

### Comments

This data type is designed for storing information regarding Comments.

| Field name | Type                  | Notes                     |
| ---------- | --------------------- | ------------------------- |
| `Product`  | [`Product`](#product) | Product comment           |
| `Text`     | `Text`                | Comment content           |
| `Creator`  | [`User`](#user)       | Comment creator user name |

### Message

This data type is designed for storing information regarding Message.&#x20;

| Field name | Type            | Notes                     |
| ---------- | --------------- | ------------------------- |
| `Body`     | `Text`          | Message content           |
| `Chat`     | [`Chat`](#chat) | Chat message              |
| `File`     | `File`          | Message file              |
| `ID`       | `Number`        | Message id                |
| `New`      | `Yes/No`        | Message new status        |
| `Creator`  | [`User`](#user) | Message creator user name |

### Product

This data type is designed for storing information regarding Product.

| Field name           | Type                                                                                                 | Notes                     |
| -------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------- |
| `Brand`              | `Text`                                                                                               | Product brand name        |
| `Category`           | [`Category`](#category)                                                                              | Product category name     |
| `Description`        | `Text`                                                                                               | Product description       |
| `Favorites`          | `List of` [`Products`](#product)                                                                     | Favorites products        |
| `Haggle Appropriate` | <p><code>Option set:</code><br><a href="#haggle-appropriate"><code>Haggle Appropriate</code></a></p> | Product haggle            |
| `Images`             | `List of Images`                                                                                     | Product images            |
| `Location`           | `Text`                                                                                               | Product address           |
| `Owner`              | <p><code>Option Set:</code><br><a href="#person-type"><code>Person Type</code></a></p>               | Product owner type        |
| `Price`              | `Number`                                                                                             | Product price             |
| `Secondary Phone`    | `Text`                                                                                               | Product secondary phone   |
| `Status`             | <p><code>Option set:</code><br><a href="#status-for-a-ds"><code>Status for ADS</code></a></p>        | Product status            |
| `Subcategory`        | [`Subcategory`](#subcategory)                                                                        | Product subcategory       |
| `Title`              | `Text`                                                                                               | Product name              |
| `Used`               | <p><code>Option set:</code><br><a href="#product-type"><code>Product Type</code></a></p>             | Product used status       |
| `Views`              | `Number`                                                                                             | Product views number      |
| `Year`               | `Number`                                                                                             | Product year              |
| `Creator`            | [`User`](#user)                                                                                      | Product creator user name |

### Reviews

This data type is designed for displaying preview of Reviews.&#x20;

| Field name | Type            | Notes                    |
| ---------- | --------------- | ------------------------ |
| `Creator`  | [`User`](#user) | Review creator user name |

### Subcategory

This data type is designed for storing all information related to Subcategory.<br>

| Field name | Type                             | Notes               |
| ---------- | -------------------------------- | ------------------- |
| `Products` | `List of` [`Products`](#product) | Product subcategory |
| `Title`    | `Text`                           | Subcategory name    |

### User

This data type is designed for storing User related information and precisely to indicate user type. <br>

| Field name      | Type                             | Notes                  |
| --------------- | -------------------------------- | ---------------------- |
| `Admin`         | `Yes/No`                         | User admin status      |
| `Chat`          | `List of` [`Chats`](#chat)       | User chats             |
| `Favorite`      | `List of` [`Products`](#product) | User favorite products |
| `Full Name`     | `Text`                           | User full name         |
| `Location`      | `Text`                           | User address           |
| `Online`        | `Date`                           | User online date       |
| `Phone`         | `Text`                           | User phone number      |
| `Profile Photo` | `Image`                          | User profile image     |
| `User Type`     | `Text`                           | User type              |
| `Email`         | `Text`                           | User email             |

***

## Option sets&#x20;

#### Brands

* Clarks
* Gucci
* Sketchers
* Mango
* Zara
* Mercedes
* BMW

#### Haggle Appropriate

* Yes
* No

#### Brands

* Private person
* Business

#### Person Type

* Yes
* No

#### Product Type

* < 1.000$

#### Sort

* By price (cheaper)
* By price (more expensive)
* By date (new)
* By date (oldest)

#### Status For Ads

* Published
* Draft

#### User Type

* Admin
* User

***

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