Write ups from our no-code computer scientists

How to Build an App Like Puff Count With FlutterFlow: Lessons from a Founder Who Helped 800,000+ People Quit Vaping

‍

Building an app like Puff Count, which has helped over 800,000 people quit vaping, requires more than just technical know-how. It’s about solving a real problem, understanding your audience, and using the right tools to bring your vision to life. Puff Count’s founder, Stephen, shared valuable insights on how he built, scaled, and marketed his app. Here’s how you can replicate his approach and build your own impactful app.

‍

Start with a Real Problem

Puff Count was born out of a personal need. Stephen struggled with vaping in college, just like many of his friends. One question sparked the idea: “How many times do you vape each day?” Realizing that most people couldn’t answer this, he built Puff Count to track usage and guide users toward quitting. Start with a problem you or your target audience is passionate about solving. The more personal the issue, the more likely you’ll stay motivated to see it through.

‍

Build a Simple, Effective MVP

At its core, Puff Count focuses on tracking vape usage, providing quit plans, and allowing users to add “quit buddies” for support. Stephen didn’t try to add every feature imaginable at once; instead, he honed in on the app’s main value proposition: helping users understand and reduce their vaping habits.

‍

How to Build Your MVP

‍

Focus on one core feature that addresses your users’ primary problem. For Puff Count, it was tracking vape usage.

‍

Use no-code tools like FlutterFlow to quickly design, prototype, and launch your app. FlutterFlow simplifies the front-end development process, letting you focus on user experience without worrying about coding.

‍

Integrate back-end tools like Firebase for authentication and real-time data storage to streamline user data management.

‍

Prioritize Onboarding

‍

Stephen emphasized that 65% of app subscriptions happen during onboarding. Early versions of Puff Count had a basic onboarding flow, but after researching health-focused apps, he revamped it into a personalized, behavioral-science-backed experience. He even hired a behavioral scientist to design a quit survey that walks users through their vaping habits, primes them to recognize their problem, and customizes their experience.

‍

How to Nail Onboarding

‍

Design onboarding to educate and engage users while subtly guiding them to your app’s core features.

Use a “self-selling onboarding” approach, where users answer questions that help them realize their problem and see the app as the solution.

Tools like Mixpanel can help you track onboarding completion rates and A/B test different flows.

‍

Market Smarter, Not Harder

‍

Stephen cracked the marketing code by starting with organic TikTok content. He gained 120,000 followers and over 50 million views by creating engaging, curiosity-driven videos. His most viral content involved dropping vapes in water and ending with a quick call to action (CTA).

When he transitioned to paid ads, he repurposed his best-performing TikTok videos. By leveraging what had already worked organically, he avoided the high cost and complexity of creating new ad creatives from scratch.

‍

Marketing Tips for Your App

‍

Organic First: Start with free platforms like TikTok to test content ideas and build an audience. Use curiosity and entertainment to engage viewers while adding subtle CTAs.

‍

Repurpose Content: Use your best-performing organic content as ads to reduce costs and improve conversion rates.

‍

Track Performance: Use tools like Appsflyer or Firebase Analytics to monitor where your users come from and optimize your ad spend.

‍

Iterate Based on Data

‍

Stephen didn’t guess what features or messaging would work; he used data. For example, marketing Puff Count as a “habit discovery tool” performed better than promoting it as a “quit vaping app.” He also tracked user behavior through tools like Mixpanel and A/B tested everything, from onboarding flows to paywalls.

‍

How to Iterate Effectively

‍

Analyze user data to understand which features users engage with most.

A/B test everything—onboarding, pricing, CTAs, and even app design elements.

Use tools like Amplitude or Mixpanel to dive deep into user behavior.

‍

Keep It Simple and Focused

‍

Stephen’s app design followed a “fat finger-friendly” philosophy. Buttons were large and easy to tap, the navigation was intuitive, and each page had a clear purpose. Overloading users with too much information or small, hard-to-click elements could have hurt retention.

‍

UI/UX Design Tips

‍

Design for simplicity. Every button, page, and feature should have a clear purpose.

Test your app with real users to ensure it’s intuitive and user-friendly.

‍

Stay Resilient and Build a Long-Term Vision

‍

Puff Count wasn’t an overnight success. It sat dormant for years before Stephen cracked the code with TikTok marketing. His journey demonstrates the importance of persistence and continual iteration.

‍

Key Insights

Apps are like fashion—they’re never finished. There’s always room to improve, add features, and enhance the user experience.

Learn from every failure and let your skills stack. Each project builds your expertise as a founder.

Trust your vision, but always listen to your users and let data guide your decisions.

‍

Building an app like Puff Count is a journey, but by focusing on solving real problems, designing intuitive experiences, and iterating based on data, you can create an impactful product that stands the test of time.

‍

How to Build a Full-Stack No-Code App Using FlutterFlow and Buildship

Building a full-stack application has traditionally been a complex task, requiring expertise in both front-end and back-end development. However, thanks to modern no-code tools like FlutterFlow and Buildship, the process has been revolutionized, enabling entrepreneurs, small businesses, and creatives to bring their ideas to life without writing a single line of code. In this guide, we’ll dive into how FlutterFlow and Buildship work together to streamline the app development process, what roles they play, and how you can leverage them to build a fully functional app.

Why You Should Use FlutterFlow To Build Native Mobile Apps

‍

FlutterFlow is a no-code development platform built on top of Flutter, Google’s popular UI toolkit for building natively compiled apps. It focuses on the front-end, allowing you to design beautiful, responsive, and interactive user interfaces (UIs) with ease. Here’s how FlutterFlow contributes to the app-building process:

1. Drag-and-Drop UI Design

At the heart of FlutterFlow is its intuitive drag-and-drop interface, which empowers users to visually create their app’s layout. Instead of coding the UI from scratch, you can select prebuilt widgets like buttons, text fields, and images, and arrange them on the screen. This approach ensures that even non-technical users can create professional-looking apps.

‍

2. Customization and Flexibility

While FlutterFlow makes the design process simple, it doesn’t compromise on flexibility. Every widget can be customized extensively, from colors and fonts to advanced properties like padding, alignment, and animations. This level of control allows you to bring your unique brand vision to life.

‍

3. State Management Made Easy

One of the most challenging aspects of app development is managing state—how your app responds to user interactions and data changes. FlutterFlow simplifies state management by offering built-in tools for handling both page state (specific to a single screen) and app state (shared across the entire app). For example, you can easily track whether a user is logged in, update lists dynamically, or display error messages—all without writing code.

‍

4. Firebase Integration

FlutterFlow has seamless integration with Firebase, Google’s cloud platform for app development. With just a few clicks, you can connect your app to Firebase to enable essential back-end features like authentication, database storage, and hosting. This is where FlutterFlow starts bridging the gap between front-end and back-end, setting the stage for Buildship’s role.

‍

5. Deployment and Publishing

Once your app is designed, FlutterFlow simplifies the deployment process. You can export the app’s Flutter code and deploy it manually, or use FlutterFlow’s direct publishing options to push your app to the Google Play Store or Apple App Store. This eliminates the need for complex build pipelines and configurations.

‍

The Role of Buildship: Back-End Development and Workflow Automation

While FlutterFlow excels at front-end development, Buildship complements it by focusing on the back-end infrastructure and workflow automation. Buildship acts as the powerhouse behind your app, handling the logic, data processing, and scalability needed to make your app truly functional. Here’s what Buildship brings to the table:

‍

1. API Integration

Many modern apps rely on external APIs to fetch or send data—whether it’s integrating payment gateways, pulling data from third-party services, or accessing custom APIs. Buildship makes it incredibly easy to connect your FlutterFlow app to external APIs without writing code. Through its user-friendly interface, you can configure API endpoints, map data fields, and define how your app interacts with external services.

‍

For instance, if you’re building an e-commerce app, Buildship can handle API calls to a payment processor like Stripe, ensuring transactions are secure and seamless.

‍

2. Database Management

Every full-stack app needs a robust back-end database to store and manage data. While FlutterFlow integrates with Firebase for this purpose, Buildship enhances your back-end capabilities by offering additional database management features. Whether you need complex relational databases, custom queries, or advanced analytics, Buildship has tools to optimize your data workflow.

‍

3. Workflow Automation

One of Buildship’s standout features is its ability to automate workflows, which is essential for creating dynamic and efficient applications. Workflows are sequences of actions triggered by specific events, such as a user signing up, submitting a form, or making a purchase. With Buildship, you can automate tasks like sending confirmation emails, updating databases, or notifying users—all without needing to build complex server-side logic.

‍

For example, imagine you’re developing a fitness app. Buildship can automate a workflow where, after a user logs their workout, the app sends a motivational email, updates their progress in the database, and displays a celebratory animation—all seamlessly coordinated.

‍

4. Serverless Scalability

Buildship operates on a serverless architecture, meaning you don’t need to manage or maintain physical servers. Instead, the platform automatically scales based on your app’s needs. Whether you have ten users or ten thousand, Buildship ensures your app performs efficiently, handling increased loads without manual intervention.

‍

5. Security and Compliance

As apps grow, security becomes a critical concern. Buildship helps you maintain a secure back end by offering features like encrypted data storage, role-based access control, and compliance with industry standards. This ensures your users’ data is protected, building trust and reliability.

‍

How FlutterFlow and Buildship Work Together

‍

The synergy between FlutterFlow and Buildship lies in their ability to bridge the front-end and back-end seamlessly. Here’s how the two platforms complement each other:

‍

• UI Design Meets Data Flow: While FlutterFlow allows you to design the visual components of your app, Buildship handles the underlying data flow. For instance, you can create a user profile screen in FlutterFlow and link it to a database in Buildship where user data is stored.

‍

• Dynamic Interactions: With Buildship’s workflows, you can enable dynamic app interactions that are triggered by user actions in FlutterFlow. For example, when a user submits a form in the app, Buildship can process the data and return a confirmation message to FlutterFlow.

‍

• Rapid Iteration: Both platforms prioritize speed and efficiency. You can quickly make changes to your app’s design in FlutterFlow and update the back-end logic in Buildship without significant downtime or rework.

‍

• Scalability at Every Step: FlutterFlow ensures your app looks great and works well across devices, while Buildship ensures it can handle growth and increasing user demands on the back end.

‍

Step-by-Step Workflow to Build a Full-Stack App

‍

1. Plan Your App - Define your app’s purpose, key features, and user journey.
‍

2. Design the Front-End in FlutterFlow

• Use FlutterFlow’s drag-and-drop tools to create your app’s layout.

• Set up widgets, navigation, and basic state management.
‍

3. Integrate Firebase in FlutterFlow

• Connect Firebase to enable user authentication, database storage, and hosting.
‍

4. Set Up Workflows in Buildship

• Configure external APIs for features like payments or data fetching.

• Automate workflows for tasks like email notifications or user onboarding.
‍

5. Test and Iterate

• Use FlutterFlow’s preview mode to test your app’s design and interactions.

• Fine-tune back-end workflows in Buildship based on user feedback.
‍

6. Publish Your App

• Deploy your app to the Google Play Store or Apple App Store directly from FlutterFlow.

‍

‍

Conclusion

FlutterFlow and Buildship are powerful tools that, when used together, make full-stack no-code app development accessible to everyone. FlutterFlow focuses on creating stunning and interactive front-end designs, while Buildship handles the heavy lifting of back-end infrastructure, workflows, and scalability. Whether you’re building a simple app or a complex platform, these tools provide everything you need to bring your vision to life without writing a single line of code. Now is the time to turn your ideas into reality—start building today!

‍

A Beginner’s Guide to Building Apps with FlutterFlow: Free 3-Hour Course Breakdown

‍

‍

If you’re new to FlutterFlow or looking to take your app-building skills to the next level, this free 3-hour course is your ultimate starting point. It covers everything from programming fundamentals to Firebase integrations, and even culminates in building an authenticated to-do list app. Here’s a detailed breakdown of the course, section by section, with key concepts explained.

‍

Table Of Contents

If you’re ready to dive into FlutterFlow, this free 3-hour course is the perfect starting point. With a focus on both programming basics and practical application, you’ll learn how to build a fully functional authenticated to-do list app by the end. Here’s a section-by-section breakdown of what’s covered.

00:00:00 - Course Introduction

The course begins with an overview of FlutterFlow, a powerful no-code app development tool. It sets the stage by highlighting the platform’s ability to help you create stunning apps without needing to master programming.

• Introduction to FlutterFlow’s drag-and-drop interface.

• Why no-code development is ideal for entrepreneurs and beginners.

• Goals of the course and what you’ll achieve by the end.

‍

00:03:24 - Part 1 | Table of Contents

This section provides a clear roadmap of the course, giving you a preview of everything you’ll learn. It ensures you know what’s coming and how each section builds on the previous one.

• Overview of programming fundamentals and practical applications.

• Firebase integration and API usage.

• Final project: Building an authenticated to-do list app.

‍

00:07:19 - Part 2 | Programming Fundamentals

Programming is the backbone of app development, and FlutterFlow incorporates many core principles. This section introduces these basics to help you think like a developer.

• Learn about variables, data types, and logic flow.

• Understand how these fundamentals translate into FlutterFlow’s no-code environment.

• Practical examples for applying these concepts to your app.

‍

00:25:09 - Part 2a | Expressions, Operators, Conditionals

This part dives deeper into adding logic and interactivity to your app through expressions and conditions.

• Use expressions to create dynamic app behaviors.

• Apply conditionals to control app flow based on user input or data.

• Examples include showing content only if a condition is met (e.g., user authentication).

‍

00:30:13 - Part 2b | Loops

Loops are essential for automating repetitive tasks, and this section shows how to implement looping behaviors in FlutterFlow.

• Learn how to iterate through lists dynamically.

• Create app features like displaying a list of items or repeating components.

• Understand how loops enhance scalability in your app.

00:37:47 - Part 3 | Everything is a Widget

In FlutterFlow, everything you create is a widget. This section introduces the widget-based architecture and its flexibility.

• Widgets as building blocks for your app’s UI.

• Examples of combining widgets to create custom layouts.

• Tips for nesting and customizing widgets effectively.

‍

00:47:03 - Part 3a | Rows & Columns

Rows and columns are essential for structuring your app’s layout. This section focuses on how to organize widgets within these frameworks.

• Learn to align widgets horizontally (rows) or vertically (columns).

• Customize spacing, padding, and alignment for a professional look.

• Best practices for creating responsive designs.

‍

00:58:10 - Part 5 | Actions

Actions bring interactivity to your app, enabling users to navigate, submit data, and more.

• Set up actions like navigating between screens, triggering animations, or sending data to a database.

• Explore common use cases like button clicks and form submissions.

• Understand how actions connect your app’s UI to its logic.

‍

01:07:15 - Part 6 | User Input

Capturing user input is a critical aspect of app development. This section explains how to handle forms and text fields.

• Create input forms to collect user data (e.g., login credentials or search queries).

• Validate user input to ensure data integrity.

• Use the captured data dynamically in your app.

01:14:57 - Part 7 | Page State / App State

State management is what makes your app dynamic and interactive. This section simplifies these concepts within FlutterFlow.

• Page State: Manage data within a single screen.

• App State: Share data across multiple screens in your app.

• Examples of managing user login status or form progress.

‍

01:53:17 - Part 8 | Firebase Basics

Firebase is a key integration for building dynamic apps. This section introduces Firebase and how to connect it to FlutterFlow.

• Set up a Firebase project to enable backend services.

• Explore Firebase features like databases and analytics.

• Learn how FlutterFlow simplifies Firebase integration.

‍

02:09:55 - Part 9 | Authentication

Adding user authentication is essential for secure apps. This section shows you how to implement Firebase Authentication.

• Set up user sign-up, login, and logout functionality.

• Customize authentication flows to match your app’s design.

• Ensure data security for your users.

‍

02:27:30 - Part 10 | Firestore

Firestore, Firebase’s real-time database, powers dynamic, data-driven apps. This section explains how to use it in FlutterFlow.

• Create and structure Firestore collections and documents.

• Retrieve and display real-time data in your app.

• Practical example: Connecting your to-do list app to Firestore.

‍

01:52:12 - Part 11 | Object-Oriented Thinking

This section teaches object-oriented principles to help you build scalable and maintainable apps.

• Understand how reusable components simplify app development.

• Structure your app efficiently using modular thinking.

• Align these concepts with FlutterFlow’s widget-based system.

‍

01:57:06 - Part 12 | API Integrations

Third-party APIs can expand your app’s functionality. Learn how to connect external services to your app.

• Fetch data from APIs and display it dynamically.

• Examples include integrating weather, payment, or map APIs.

• Best practices for handling API requests within FlutterFlow.

‍

02:27:57 - Part 13 | Project | Authenticated To-Do List App

This is where everything comes together. Apply what you’ve learned to build a real-world app.

• Create an authenticated to-do list app with Firebase authentication.

• Use Firestore to manage and display user-specific tasks.

• Learn best practices for tying multiple concepts into one cohesive project.

‍

02:46:32 - Conclusion

The course concludes by recapping the key lessons and encouraging you to continue exploring FlutterFlow.

• Summary of essential skills learned (Firebase, APIs, state management).

• Motivation to start building your own apps.

• Next steps for advancing your FlutterFlow knowledge.

‍

Introduction

FlutterFlow has transformed mobile app development with its no-code platform, but choosing the right backend infrastructure remains crucial for success. This article examines three leading backend solutions, Firebase, Supabase, and Xano,  that integrate seamlessly with FlutterFlow applications. Each platform offers unique advantages in data management, authentication, real-time features, and scalability.Firebase excels in real-time features and automatic scaling; Supabase offers powerful PostgreSQL capabilities with cost-effective scaling; and Xano provides a visual no-code approach ideal for custom business workflows.
Do You Take Equity in My Company?

Fire Base

Introduction to Firebase

Firebase is a comprehensive Backend-as-a-Service (BaaS) platform by Google that provides ready-to-use backend infrastructure and services. It enables developers to build web and mobile applications without managing servers, offering features like authentication, databases, hosting, and analytics in a single integrated platform.

Core features relevant to FlutterFlow

Firebase offers a robust suite of backend services that integrate seamlessly with FlutterFlow applications:

Superbase

Introduction to Supabase

Supabase is an open-source alternative to Firebase that provides a complete backend solution. It offers real-time databases, authentication, edge functions, and storage capabilities through a powerful PostgreSQL foundation. Built for developers, it streamlines backend development with auto-generated APIs and extensive documentation.

Core features relevant to FlutterFlow

Supabase offers a robust suite of features that integrate seamlessly with FlutterFlow applications: