How we built and launched a product in 3 hours using Bubble

As a builder, it's hard to stop the process of building. It can be both a blessing and a curse when you're building a startup.

But once in a while, you get that "fun-to-do" idea and you just want to test your skills and publish real fast.

That's what this was.

A few days ago, my build-mate Marina and I were sipping coffee in my living room, and chatting about NFTs. Suddenly, we saw how one NFT was letting their members upload their current PFP (Profile photo) and NFT from their collection, and combine them into a new photo.

So, we thought, how hard would it be to build a simple tool that does this for every NFT?

// Our tech stack? Figma for designs, and Bubble for no-code development.

// Our goal? The app should do these 4 features successfully:

Imgur

CHALLENGES

#1 challenge

The trick was, all NFTs don't have a transparent background, so we needed a way to clear the NFT from the background so that our users can drop it on their image, something like this:

Imgur

So the first thing we did is search for an API that let us do just that. We didn't plan to create a deep learning model that does this, ofc!

So we made a decision to go with Photo Room, which in our experience was the best price/feature/API documentation tool for us.

Then, we needed to find a way to send a file via the API Connector. This simple trick does just that:

Imgur

#2 challenge

The PFP and NFT photo were combined into one Group element in Bubble. So we needed a way to export that whole group as an image.

Bubble's plugins saved the day once again: We used the PDF/Screenshot image plugin that captures an element and lets us download it as an image.

Problem solved.

Cool, so we know that we can build it out, so let's get to work.

DESIGN

We designed a simple mockup using FIGMA. The goal was to make it a one page, and simple enough.

We ended up with this design:

Imgur

BONUS FEATURE

Near the end, as every no-code builder would do, we wanted to build that one extra feature.

And of course, we built it.

We wanted to allow our users to drag and drop their NFT in a desirable location.

To do that, we used the "Draggable element" in Bubble, which can be dragged by the user and dropped in a drop area.

Done.

LAUNCH

2:30 hours in the build process, we're nearly done. Next, we wanted to ship on Product Hunt.

We prepared our images/content, and scheduled it for launch!

This was probably the fastest build + launch that we EVER DID.

And you can do it too...

STATS AFTER LAUNCH

🖼️ 103 PFP created
🗳️ 71 upvotes
👀 250 page visits
🏗️ 2 happy no-code builders ( Marina nad me)

Not great, not terrible. 🤣

FINAL THOUGHTS

All and all, this was SUPER FUN!

You can check out the tool here: NFT Companion is live! ✨

We'll be building these interesting tools again in the future.

If you want to follow our build-in-public activities make sure to follow us on Twitter : @anitakirkovska and @marinatrajk.

Thanks for reading!