RoastMe: Our FlutterFlow NoCode Stack

Roasted

The story of RoastMe, the beginning of our NoCode experience.
Written by Sterling and reviewed by Rosson.

“I want to build an app called Roast Me”
Rosson said on the phone.

After talking about it, the idea seemed straightforward, and a great opportunity for me to learn a couple new tools: FlutterFlow and BuildShip.

And my brother was serious.
The next day he sent me a picture of all the domains he bought for the project.

He kicked it off by duplicating some of the work he had already done for another FlutterFlow project.

By the time I got involved on the second weekend (my job was to focus on the backend and AI generation) Rosson already had an entire UI working. He just needed help with actions, payment processing, and integrations with BuildShip.

It took us 4 weekends to put it all together from first call to final MVP.

And I will say, Rosson did the majority of the work making it look good, building the logos, making sure the UI transitioned smoothly. Rosson has an insane eye for an amazing user experience and he brought it all to bear on this project (just as he does with everything he pours his heart into).

Now, we’d like to introduce you to the NoCode stack that made it all possible.

The NoCode Stack

• FlutterFlow (frontend)

• Firebase (auth and db)

• BuildShip (automations)

• Stripe (payment processing)

• OpenAI (custom GPT roast bot)

FlutterFlow

FlutterFlow was the cornerstone for our UI/UX and action flows and allowed us to build an app that could quickly deploy to web, iOS, and Android which was important for the big picture of the kind of viral idea we wanted to build.

FlutterFlow also has great integrated database support for Firebase and Supabase which simplifies the process of setting up your DB down to a few clicks.

Using FlutterFlow we had Firebase set up and handling authentication, user management, and data storage in about 45 minutes. FlutterFlow’s built-in database builder automatically updated all of our permissions on Firebase documents. This. Was. LIFE CHANGING!

Highly recommend using Firebase as the go to FlutterFlow authenticator and database, especially if you’re looking for speed.

Firebase

Firebase served as our authentication and storage solution.

Its integration with FlutterFlow and BuildShip streamlined our backend configurations, making it an essential part of our stack. It was also insanely easy to set it up to function. FlutterFlow and BuildShip let you use a pre-generated project or provide your own.

We opted to providing our own (so we could use the same project between FlutterFlow and BuildShip).

BuildShip

BuildShip managed all backend operations.

This included secret key management and secure database updates. We used it to generate roasts securely, maintaining the privacy of our OpenAI key. It also managed user authentication and token updates, integrating smoothly with Stripe to handle transactions. The prebuilt triggers for Stripe purchases and the ability to generate nodes completely from AI made BuildShip an obvious choice for not writing any code.

Ultimately, I was able to build out the backend in a couple of hours using this beautiful tool.

Behold:

Stripe

We integrated Stripe directly into FlutterFlow for handling payments.

This setup allowed users to easily make purchases within the app. The tight integration between FlutterFlow and Stripe made payments easy, and the purchase flow incredibly simple.

BuildShip and Stripe made it possible to pass the UUID of whoever made the payment and then fulfill that purchase to the end user’s personal account and provide them with tokens (or in our case marshmallows).

For simplicity we decided to rely on the transactions stored in Stripe to validate whether a given user has the correct number of marshmallows if there were ever inconsistencies.

Rosson is still working to get Apple Pay and Google Pay set up. He showed me the forms he was filling out to make it work. I applaud his patience.

OpenAI

OpenAI’s powerful AI models were used to generate the witty roasts.

I built a Roast Bot GPT that we used to quickly test things. After a couple of iterations, it was destroying us properly (see it roast me below). Then I used the same prompt inside of BuildShip with a prebuilt script they provide (see “Text Generator” node above). Once I had everything prepared, copy and pasting the prompt and adding in the inputs from the user was a piece of cake.

OpenAI brought the creative concept to life.

Here’s some of our initial testing. The Roast Bot thoroughly destroyed my ego with just a few lines:

Attempted Integrations

Supabase

Initially, we considered Supabase for its appealing SQL table storage, which is cost-effective at scale.

However, integrating it proved to be complex, particularly in terms of implementing custom getters, setters, and permissions with our BuildShip backend.

Ultimately, we decided to stick with Firebase, as FlutterFlow offered out-of-the-box support that accelerated our development process.

Firebase Functions

While I thought about Firebase functions at the beginning, I didn’t even consider them for what we were trying to do because they would require me to write code.

And we are in the NoCode space.

So this had to be avoided like the plague.

Future Plans

Next planned steps for RoastMe (that we’ll share the how in future newsletters!)

1. Roasting Behemoths — Publicly roast big companies and comedians on X/Twitter (like Ryan Reynolds, Matt Rife, McDonalds, and Wendy’s) using the software.

2. Roast of the Day — Let people share roasts and vote on a roast each day that gets published to Twitter.

3. Roast to Voice — build in voice to the app and have your roasts read out to you, or call your friend and roast them. (We’re looking for a sassy AI voice! If you know of one, send it our way!)

4. Donations — 20% of the proceeds from RoastMe are designed to go towards anti-bullying, mental health, and roast victims! We are in the process of finding charities with these focuses to donate to.

5. HypeMe — If RoastMe takes off we may pursue making HypeMe, the inverse of RoastMe. Perfect for right before big moments where you need to get in the zone.

Conclusion

The RoastMe project was an awesome test of what NoCode platforms are capable of, resulting in a fully functional app developed in just four weekends.

Explore the RoastMe app here, get a personal dose of humility, and see how we used various NoCode tools to bring this fun idea to life.

Visit Discover NoCode to:

1. Discover more NoCode tech stacks.

2. Join the Discover NoCode community.

3. Schedule a free consultation to start building your dream app today!

NoCode tools make it possible to build anything you want, without writing a single line of code and combining them with AI (like BuildShip) let’s you still build completely custom solutions.

It’s fetching awesome!

Your NoCode enthusiasts,

Sterling Long
Rosson Long

What will you build?