🫧 $1M AI App, Advanced CSS Animations & Bubble Buddy Review

Building a $1M AI App with Bubble

Let's kick off this edition with an electrifying founder tale!

Starter Story recently sat down with the mastermind behind formula bot, a game-changing AI chat assistant designed to streamline data analytics tasks. What's more, it's all crafted on Bubble!

Here's a brief summary of the interview:

• By the Numbers: With just 1.5 years under its belt, formula bot boasts a staggering 750k users and a mouthwatering $26k in monthly recurring revenue.

• From Zero to No-Code Hero: Despite zero coding chops, the founder stumbled upon Bubble and embarked on a self-taught learning journey. The official documentation guided him in the beginning, but the vibrant content generated by the Bubble community is what helped him overcome the biggest challenges in building the app.

• Rapid Rise: In a mere 6 weeks, the initial version was born. Then, going viral on Reddit, catapulted them to 350k users in just 1.5 months.

• Monetization Epiphany: The journey from free to paid wasn't without its bumps, including a hefty $5k Open AI bill wake-up call.

• UI Overhaul: Relaunching with a slicker interface, a paywall, and additional features propelled them ahead of competitors.

• Balancing Act: Recent roadblocks prompted a hybrid approach, blending no-code with custom code solutions for about 10% of the app.

For me personally, there are three key takeaways from this story:

1. No-code is a new kind of vehicle than empowers anyone to bring their ideas to life.

2. Choosing a no-code platform is not just about its features; it’s about the community. And that is where Bubble’s ecosystem is miles ahead of its competitors.

3. Don’t let potential limitations of no-code deter you. Start small, validate, then tackle hurdles head-on with newfound resources and knowledge.

In essence, with the right mix of determination and innovation, the sky's the limit in the no-code world!

Build Tip: Marquee Looping Animations with CSS

Ever wondered how to make your website pop with those cool marquee scrolling sections? You know, the ones that make your announcements and promos stand out like a neon sign in the night?

Well, guess what? Since the <marquee> HTML tag has been retired a long time ago, we can now quickly achieve this effect with a bit of custom CSS magic.

So, picture this: You've got a landing page on Bubble, and you want to showcase your client logos with an infinitely, scrolling animation. Piece of cake! Here's how to make it happen:

1. First, install the Classify plugin. It gives you the power to assign CSS classes to your elements.

2. Create your marquee section by combining the following standard elements:

   

   • G:Marquee wraps the horizontally moving content.

     Configuration:

     • Container layout → Align to parent

     • Fit height to content → ☑️ 

   • Inside the main container, we stack two identical G:MarqueeContent groups behind each other.

     Configuration:

     • Container layout → Row

     • Container alignment → Space around

     • Min width → 100%

     • Fit width to content → ☑️

   • Lastly, we place all the IMG:PartnerLogo images within the content groups.

     Configuration:

     • Width → 120px

     • Keep element aspect ratio fixed → ☑️

3. Add CSS classes to your groups by adding the following expressions to their ID Attribute fields:

   • G:Marquee -> {addClass: "marquee"}

   • G:MarqueeContent → {addClass: "marquee_content"}

   

4. Add a HTML element to the page to define the custom CSS styling that will create the infinite scrolling effect.

   

   Here is the full CSS code for easier copy-and-pasting:

   <style>
   .marquee {
     --gap: 1rem;
     display: flex !important;
     overflow: hidden !important;
     user-select: none;
     gap: var(--gap);
   }
   
   .marquee_content {
     flex-shrink: 0;
     gap: var(--gap);
     animation: scroll 20s linear infinite;
   }
   
   @keyframes scroll {
     from {
       transform: translateX(0);
     }
     to {
       transform: translateX(calc(-100% - var(--gap)));
     }
   }
   </style>

And voilà! If you've followed along, you'll have yourself a mesmerizing, endlessly looping carousel of logos on your website.

See? With just a bit of CSS know-how, there's no limit to the fancy UI effects you can whip up in Bubble!

Tool Review: Enhance Your Bubble Experience with Bubble Buddy

When your app starts growing, navigating the Bubble editor can feel like searching for a needle in a haystack.

Enter the Bubble Buddy Chrome Extension, your new sidekick in the quest for efficiency! Its mission? To streamline your workflow with nifty keyboard shortcuts.

I've put it through its paces over the last few days, and here's the lowdown:

Functionality: 🛠️ 2/5

Bubble Buddy delivers on its promise, offering a handful of useful shortcuts for both the editor and preview windows.

While the selection is modest, features like toggling debug mode and navigating the elements tree are really useful additions for busy Bubble builders.

Ease of Use: 🪶 5/5

Installation is a breeze – simply add the Chrome Extension, refresh your Bubble session, and voila! You're good to go in less time than it takes to brew a cup of coffee.

Costs: 💵 5/5

Bubble Buddy won't cost you a dime. It's free of charge, so there's no reason not to give it a spin!

Conclusion: ⭐ 2/5

Bubble Buddy shows promise as a time-saving tool for navigating the Bubble editor. While its current functionality is somewhat limited, its ease of use and cost-free nature make it a no-brainer addition to your toolkit. Plus, who wouldn't appreciate ditching the endless right-clicking to find components in the Elements Tree? Give it a whirl – your workflow will thank you!

Quick Bites

• The Ultimate Guide to Stripe Subscriptions: At some point, everyone building an app with Bubble wants to collect payments from their users. If you are one of them, check out this great new tutorial that covers everything from monthly plans, to pricing tables, paywalling features and webhooks.

• New No-Code Community on the Block: NoCodeDevs started a new no-code community. It is still in its early stages but nevertheless a great new place to connect with like-minded people!

• How to Build an AI App in 48 Hours: Josh shared on X how he built his new “Voice-to-Notion” app over a weekend with Bubble. Great example of how no-code empowers anyone to launch their own SaaS.

• Improving UX with Skeleton Loaders: Super simple video tutorial on how to give your repeating groups a professional look while the data is loading.

• Working with the Midjourney API: Last week, I had to work with the Midjourney API for the first time and this video came out at just the right time. In just 13 minutes, it teaches you how to send a prompt to the AI model and display the generated image back to your users.