# Diwo - NFT Marketplace

***

## Intro

<figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2FwAHNkfEYFXDsAU1yf0gQ%2Fhttps___meta-q.cdn.bubble.io_f1677579336674x882366950661029600_diwo.jfif?alt=media&#x26;token=e652520d-ccc8-4c3a-a385-dcdb54c793b6" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://nft-diwo.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/nft-marketplace-1648633429985x445271769251577860)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2F9Fg65P3DMxQUGjyEOg76%2F1.png?alt=media&#x26;token=c162166e-0562-47ee-9edb-7b95ed8b40d4" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2FF32pTx01Gfm5A9M1CG7j%2F6.png?alt=media&#x26;token=e1fdaafc-4f1a-4f9d-922e-93693feb887f" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2F64VCrFk9UE38pFXyH6Qp%2F2.png?alt=media&#x26;token=0e2e1a7f-d5db-470a-b9f2-d4ee4c55b445" alt=""><figcaption><p>Explore page</p></figcaption></figure> <figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2FKKhs9XoHpNgHspn5svJ0%2F3.png?alt=media&#x26;token=1a89b52f-c207-4029-84bf-2c5956f30fbe" alt=""><figcaption><p>Dashboard page</p></figcaption></figure> <figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2FNZDhYvMoag0cas51Qy1y%2F4.png?alt=media&#x26;token=4911e5f9-b8eb-4436-9fc2-50c5974f56df" alt=""><figcaption><p>About us</p></figcaption></figure> <figure><img src="https://3367174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmaja1AbVKfR8nQ1TM7Eg%2Fuploads%2FDWzFwml67YWzjB6LQQWR%2F5.png?alt=media&#x26;token=404fd855-2856-4ac0-a1b8-6f98e5b01a45" alt=""><figcaption><p>Contact us</p></figcaption></figure></div>

***

## Template details

NFT DiWo - digital marketplace template for crypto collectibles and non-fungible tokens (NFTs) with modern and minimalistic design. With this #nocode template you can buy, sell, and discover exclusive digital items.

Diwo template features the following:&#x20;

✅ New Responsive design&#x20;

✅ Signup/Login&#x20;

✅ User dashboard&#x20;

✅ Create and edit NFTs&#x20;

✅ Buy NFTs&#x20;

✅ See the collection of bought and added NFTs&#x20;

✅ Search by category&#x20;

✅ View the price history of each NFT&#x20;

✅ View the item activity

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; -> NFT search -> View NFT description -> Buy NFT -> Adding/Editing a NFT -> View NFT collection -> View and analyze Price History and Item Activity

***

## 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>NFT MARKETPLACE</strong></mark> </td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>RELATIVE TIME</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CHART ELEMENT</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>WALLET INTEGRATION</strong></mark> </td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>NFT CREATOR TOOLS</strong></mark> </td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>TOKENIZATION SUPPORT</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/maja1AbVKfR8nQ1TM7Eg/blobs/ugDxZkQb1k70rheOt1Gd/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/maja1AbVKfR8nQ1TM7Eg/blobs/lktcrVUAUStj5PaGo7on/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/maja1AbVKfR8nQ1TM7Eg/blobs/3Pzn41WSDhoX9yIQIpZF/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, a company directory, job openings, candidate resumes, and authentic user reviews.

<mark style="color:orange;">**Account Preview:**</mark> This page contains user content with all necessary information and statistics.

<mark style="color:orange;">**Dashboard:**</mark> A user dashboard providing essential and up-to-date information.

* "My NFTs" shows all the NFTs the user has.
* "Create NFT" allows the user to create their own NFT.
* "Profile" contains all the information about the user and again allows the user to modify it.
* "Settings" section where the user can change the password and email.

<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;">**Explore:**</mark> This page contains all the NFTs on the site and also a sorting bar where you can sort NFTs by category or price

<mark style="color:orange;">**Product\_Page:**</mark> This is page with all the information about NFT, such as description, price, details and others.

<mark style="color:orange;">**About Us:**</mark> Embark on a two-step registration process for companies looking to publish job openings, providing essential company information.

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

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

<mark style="color:orange;">**Login:**</mark> Page where the user can log in to the site or create an account.

***

## 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. Used in the following pages: <mark style="color:orange;">Found on all application pages.</mark>
3. **More Social**- this item contains information about social networks. Used in the following pages: <mark style="color:orange;">dashboard.</mark>

***

## Data Types

### Art

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

| Field name      | Type                                        | Notes              |
| --------------- | ------------------------------------------- | ------------------ |
| `Category`      | [`Categories`](#categories)                 | Category name      |
| `Chain`         | [`Chain`](#chain)                           | Chain name         |
| `Description`   | `Text`                                      | Art description    |
| `External Link` | `Text`                                      | Art link           |
| `History`       | `List of` [`Item Activity`](#item-activity) | Art history        |
| `Image`         | `Image`                                     | Art image          |
| `Name`          | `Text`                                      | Art name           |
| `Owner`         | [`User`](#user)                             | Art owner          |
| `Price Buy`     | `Number`                                    | Art buy price      |
| `Price Sell`    | `Number`                                    | Art sell price     |
| `Publish`       | `Yes/No`                                    | Art publish status |

### Categories

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

| Field name | Type     | Notes          |
| ---------- | -------- | -------------- |
| `ID`       | `Number` | Category id    |
| `Image`    | `Image`  | Category image |
| `Name`     | `Text`   | Category name  |

### Chain

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

| Field name | Type    | Notes      |
| ---------- | ------- | ---------- |
| `Logo`     | `Image` | Chain logo |
| `Name`     | `Text`  | Chain name |

### FAQ

This data type is designed for storing information regarding Answers and Questions.

| Field name | Type   | Notes            |
| ---------- | ------ | ---------------- |
| `Answer`   | `Text` | Answer content   |
| `Question` | `Text` | Question content |

### Item Activity

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

| Field name     | Type              | Notes                      |
| -------------- | ----------------- | -------------------------- |
| `Art`          | [`Art`](#art)     | Art name                   |
| `Buyer`        | [`User`](#user)   | Buyer name                 |
| `Chain`        | [`Chain`](#chain) | Chain name                 |
| `Event`        | `Text`            | Item activity event        |
| `Price`        | `Number`          | Item activity price        |
| `Price Change` | `Number`          | Item activity price change |
| `Seller`       | [`User`](#user)   | Seller name                |

### Newsletter

This data type is designed for storing information regarding Newsletter.

| Field name | Type   | Notes            |
| ---------- | ------ | ---------------- |
| `Email`    | `Text` | Newsletter email |

### Social Network

This data type is designed for storing all information related to Social Networks

| Field name | Type                                                                               | Notes               |
| ---------- | ---------------------------------------------------------------------------------- | ------------------- |
| `Link`     | `Text`                                                                             | Social network link |
| `Social`   | <p><code>Option set:</code><br><a href="#social-os"><code>Social OS</code></a></p> | Social network name |

### User

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

| Field name       | Type                                           | Notes                |
| ---------------- | ---------------------------------------------- | -------------------- |
| `Active`         | `Yes/No`                                       | User active status   |
| `Art Buy`        | `List of` [`ARTs`](#art)                       | Arts bought by user  |
| `Art Create`     | `List of` [`ARTs`](#art)                       | Arts created by user |
| `Avatar`         | `Image`                                        | User avatar          |
| `Banner`         | `Image`                                        | User banner          |
| `Bio`            | `Text`                                         | User bio             |
| `Links`          | `List of` [`Social Networks`](#social-network) | User socials links   |
| `User Name`      | `Text`                                         | User name            |
| `Waller Address` | `Text`                                         | User wallet address  |
| `Email`          | `Text`                                         | User email           |

***

## Option sets&#x20;

#### Social OS

* Twitter
* Instagram
* Site
* Facebook
* Youtube
* Pinterest
* Google

#### Sort Diagrame

* All time
* Last week
* Last month
* Last year

#### Sort OS

* Price: Low - Hight
* Price: Hight - Low
* Name: A - Z
* Name: Z - A

#### Status OS

* Yes
* No

***

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


---

# 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://appassion.gitbook.io/diwo/diwo-nft-marketplace.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.