Flow Journey: TIL I learned about some NFT Marketplace business models

nft ft blockchain flow

Introduction

Next up in my Flow Journey was more a business related question. After going through the Cadence tutorials and starting to understand concretely how I might buy a NFT marketplace, or blockchain based dApp (distributed App) in general, I had a big question in mind.

Let's say you build an NFT marketplace. People purchase your NFTs and then they start trading them. From the examples I saw, it seemed like people could buy and sell between each other and then would just transfer FTs or Fungible tokens between each other. So with that in mind, how do the people who build the platform our marketplace make money.

I was browsing the NBA Top Shot Smart Contracts, and I couldn't find a place during the transaction that would lead to the platform making money. The closest thing I found was a 'beneficiary' cut.

So this led me to my question, how to these NFT marketplaces make money?

Thanks again in huge part to the Flow Community, the Flow Discord server, and the Flow office hours, I learned of 2 common business models for NFT Marketplaces

  • First party sales
  • Transaction based

First Party Sales

I apologize for not remembering the handle of specific person who answered (big thanks to that person!), but what they said was, the first common way for NFT marketplaces to make money is on "First Party Sales".

What this basically means is, the platform has minting permissions. So they are the ones who create the NFTs in the first place and when they are first minted, they belong to the organization. The way they make money is by selling these NFTs for the first time. Afterwards, when people buy and sell them, they don't make any more money.

This is analogous to say trading cards in the real world. When they are first sold, the company that produced them makes money. However, afterwards, when people buy and sell them, it's not like the original company gets a cut. They only make money on the first sale.

Transaction Based

The other way is through transaction fees. So if you build an NFT marketplace, you could take a cut during the purchasing and selling. If you write your Smart Contract to deposit some of the funds into the seller's account, but hold some back and deposit that into your account - then you make money off the transactions. So that's another way to do it.

Not to mention, you could combine the two.

Conclusion

These business models are probably pretty obvious to most people. However, the thing is, when you start learning Blockchain development, seemingly simple questions seem to feel daunting.

Business models was definitely a question of mine, and the Flow team answered it perfectly.

Til the next one.

Casey Li
CEO & Founder, BiteSite

Flow Journey: TIL that you can use established FTs for your NFT Marketplace

nft ft blockchain flow

Flow Journey Introduction

Welcome to the first post in our series called "Flow Journey". While we're confident in our Web and Mobile app development skills, we are brand new to blockchain development and specifically Flow.

For those who don't know, Flow is a new blockchain that was built by DapperLabs. They built it after their experience with building their dApp CrytoKitties on a different blockchain (Ethereum).

Anyway, our team is exploring Flow and learning a lot and as such, we thought we would start blogging about it to share our journey and knowledge that we've learned along the way.

As articles come out, we'll keep a running list here:

Fungible Tokens for your NFT Marketplace

Today, we're talking about FTs or Fungible Tokens.

For those that are new to blockchain development, Fungible Tokens are basically digital assets whose value is equivalent. For example, FUSD is a fungible token and 1 FUSD in 1 person's account is equivalent to 1 FUSD in someone else's account. Think of it as currency.

When you go through the the Cadence tutorials on the Flow website, they show you how to actually build your own Fungible Token to be used in a NFT marketplace. In other words, a way to create your own currency to use in your Marketplace.

Great tutorials, no question. But I had a big question afterwards.

If you're creating your own FT or currency, how would a marketplace work in terms of people buying your NFTs? More specifically, how would people use traditional money (or even established currency like FLOW or FUSD) to pay for your NFTs if you created your own FT?

Well there are 2 things I learned today while on the Flow Discord server. Big thanks to bjartek.find and Dene from Geniace: bjartek.find for answering my questions and to Dene from Geniace for presenting on their project which included a 'native FT' during the Flow Dev Office Hours which clarified my suspicions.

Answer number 1: You don't always create your own 'native FT'.

Thanks to bjartek.find, I learned that it is very common to create an NFT marketplace and use an already established FT (like FLOW or FUSD). The tutorials highlight how you would create your own FT, but that's not necessarily a common thing to do. Instead, you build your NFT marketplace and use FLOW or FUSD as your FT. This way, you don't have to worry about converting traditional currency or any currency for that matter. People will already have some FLOW and FUSD balance that they could use without any conversion.

Answer number 2: Convert to your Native FT

I'm definitely not an expert on this, but hearing Dene from Geniace talk - he talked about their native token and some of the implementation around it. Again, not an expert, but what I got from it, is indeed they would have to do a conversion or exchange to their native token. That I can only assume is way outside my knowledge base.

Long story short, if you're getting started, it looks like you can use a well established FT in your NFT marketplace.

Big thanks to the Flow team and the Flow community. Joining their discord server was one of the best things I've done so far in this journey.

Until the next one.

Casey Li
CEO & Founder, BiteSite

Rails 6 Action Text Amazon S3 Images and Attachments not Uploading

ruby on rails web development software development

So we've finally taken the plunge and carried out our first Action Text implementation. It was used to power a blog.

But we ran into an issue.

Problem

Here are the symptoms

  • We were on Rails 6
  • We had Active Storage setup
  • We had Action Text setup
  • On development, we used 'file' for Active Storage and it worked perfectly
  • On production, we used 'S3' for Active Storage and it didn't work
  • We tried switching to 'S3' for development to debug and it still didn't work

What was weird, is we were seeing things like this messages like S3 URL generated complete with an AWS Key, but when we went to browse the Amazon S3 bucket, there was nothing.

There was also something weird happening with the rich text editor. When we selected an image - we would see this gray bar across the image (that should have been the clue:)).

Solution

After days of trying to figure out what was going on, we stumbled upon this post which had our solution: https://stackoverflow.com/questions/63998547/rails-action-text-no-upload-after-switching-to-amazon-active-storage.

So as it turns out, Action Text and the Trix Rich Text Editor use client-side direct uploads. If you're not familiar with this, basically the file gets uploaded directly from the browser to the Amazon S3 without going through your Rails server. When you do a web request from a browser to another site, in this case from the user's browser to Amazon S3, you have to set up CORS rules!

So the answer, is you have to set up some CORS rules like this:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "https://www.example.com"
        ],
        "ExposeHeaders": []
    }
]

Ensure you actually fill out the Allowed Origins to match your actual website. If you're doing dev testing on your machine, you can put http://localhost:3000.

By the way, if you're wondering what that gray bar was all about? That was the progress bar for directly uploading to Amazon S3. It stayed there because the web app didn't have the CORS permissions to write to Amazon S3.

Thoughts

Unless I missed something - which is very possible - I think the main issue here is the documentation for Action Text. Active Storage can be set up in multiple ways. For example, you can set up Active Storage WITHOUT direct uploads and it'll work fine. However, to use Action Text, you HAVE to set up direct uploads. At the time of the writing of this article, this is all they have "Also, you need to set up Active Storage for embedded images and other attachments. Please refer to the Active Storage Overview guide." What they probably should say is that if you're embedding images or other attachments, be sure to setup "direct uploads", which subsequently tells you how to setup CORS.

Alright, hope that helps out some peeps!

Casey Li
CEO & Founder, BiteSite

3 Improvements A Day of UX/UI Design Can Bring To Any Web App

business ux/ui design

Before jumping into the syllabus, my course instructor for UX/UI Design gave us a grave warning that went something like this: You will never be able to look at a website the same way again. If you’re someone who enjoys browsing sites and wants to keep it that way, seriously consider not taking this course.

I found it humorous at the time, and a few students chuckled at his wryness. But now, more than a year later, I totally get what he meant.

Undergoing an education in UX/UI Design can cause one’s brain to instantly analyze every site or product they encounter. Call it an occupational hazard. However, when called upon, this perspective can benefit any web app, in as little time as a day.

Here are 3 benefits just a day of UX/UI Design can bring to any web app:

1. 85% percent of usability issues can be discovered with just 5 user tests

UX/UI Designers are strong allies for users on a site. They’re not only well-versed in research methods used to study user behaviour, but they’re also keen observers of human-technology interaction. If the designer is able to observe just 5 test participants while they interact with a product, up to about 85% of usability issues can be uncovered.

Depending on the scale and complexity of the web app, user testing sessions might take longer to plan and execute. However, small-scale testing of specific pages or flows of the app can be carried out more frequently. Even testing with just one user can bring out a third of usability issues existing on the design.

Hence, bringing together a designer with a couple testers can help identify the most pressing problem areas to fix in order to improve your users’ experience on your app.

(Why you only need to test with 5 users by Nielsen Norman Group)

2. Reduce visual inconsistencies and harmonize the entire app

A designer’s sharp eye and knack for organization can help your business identify and put together a visual style guide to polish off the entire app. Method and art both come into play when a designer creates a standard design language for your app to follow. No more text headers of different sizes, or buttons of a 1000 shades of grey ;).

A library of common visual elements to draw from and reuse across a site will make the site look uniform and professional, instilling trust in users. Furthermore, designers draw upon colour theory and visual design concepts to reinforce a company’s brand identity throughout its app. A simple style guide can be put together in less than a day, but its contents can be referenced and built upon for months.

Here’s a helpful site I came across that anyone (even non-designers) can use to create a style guide- DesignGapp.

3. Rectify crucial errors that defy web standards and turn users off

An experienced designer could point out right away technical and/or visual flaws that harm your users’ experience. If an element a user encounters frequently around the web (for example the close button on the top-right corner of pop-up’s) is suddenly placed out of their conventional place on your site, it will be disorienting and frustrating to the user. Often, it is better to stick to conventional design than reinvent the wheel, as humans are creatures of habit, and we like the familiar.

There are web and UI standards to follow that help improve user experience, and that address the 7 factors of UX. It could be as simple as increasing font size by 2px for better readability, or adding an undo (cmd+z) option to certain actions. Just like an editor/copywriter can weed out grammatical or spelling errors in language, a designer can help hone in on technical aspects to quickly improve your app.


 

Now I’m not saying that you can get a site makeover in a day; it takes time to create thoughtful design, and years to develop expertise. Design is both a creative and technical skill, and I wouldn’t rush anyone on this job (albeit there are some who work better under timed pressures).

Like they say, good things take time, and the cumulative result of design thinking and practice adds great value to a site (on average, every dollar invested in UX brings 100 in return.) However, these are just some of the ways (of many) that recruiting a designer’s unique lens can benefit your web app, and therefore business, in less time than you might think.

Tania Das
UX/UI Designer, BiteSite

Google Search Date Tip

productivity

I recently discovered something I have been using fairly regularly. I am probably late to the party here but I learned Google has a date filter for your searches. As all developers know, you can have 2 days or 20 years of experience and your number of searches per day will stay the same. Due to this I welcome anything to make my daily searches more efficient.

If you use Google as your search engine, append “before:YYYY” or/and “after:YYYY” to filter out unwanted results.

Twitter account, Google SearchLiason explains it best here : “The before: & after: commands return documents before & after a date. You must provide year-month-day dates or only a year. You can combine both. For example:

[avengers endgame before:2019] [avengers endgame after:2019-04-01] [avengers endgame after:2019-03-01 before:2019-03-05]”

Google has had this date filter for a while but it was hidden in the “Tools” menu. Now you can add the before/after terms to your search and achieve the same result.

Many times I have been searching for a JavaScript solution and all the top results are from a decade ago. Although the solutions most likely would still solve my issue, sometimes I would rather have a more recent answer. Adding after:20YY helps filter out these old results.

Hopefully you find this as useful as I do.

Chris Francis
Software Developer, BiteSite