CodingCat.dev

Build a Custom No-Code App in 90 Minutes

Alex Patterson
Dan Hafner

Listening Options

or

This is the place to learn how to bring your software ideas to life at lightning speed—without needing a fancy CS degree or burning the midnight oil on complex code. In this mega-long, ultra-detailed post, we’re diving deep into how no-code tools like Adalo and Bubble are changing the game for creators, hustlers, and even seasoned developers. You’ll even get some sample app builds, code snippets, demo flows, and insider tips you won’t find anywhere else.

Getting Started: Why No-Code?

Not a "technical" developer? That’s totally cool—and actually perfect for what we’re diving into. The whole point of no-code is to help anyone (seriously, anyone) take an idea—from that late-night lightbulb moment to a real, usable product—without needing to touch complicated code.

Here’s the big promise:

"Launch a product without having to code and without having a ton of money. Perfect, sounds like a winner to me." – Dan Hafner

No-code tools let you go faster, try out more versions, and focus on what matters: turning your logic into reality without the drag of traditional development cycles.

Meet Dan: The Journey into No-Code

Before we get hands-on, let's meet Dan Hafner, a builder who’s gone from political science, government gigs, and QA to full-blown no-code entrepreneurship.

A Not-So-Linear Path

Dan didn’t start out in a technical role, and honestly, that’s what makes his insights so valuable. From background investigations in DC to manual software QA for the Army, and eventually into remote business building, he combined a ton of different job skills—sales, QA, advertising—to land where he is today: the no-code world.

"I never planned on this, but it turned out to be something super cool. These tools helped me go from side hustle money to full-time business."

The flexibility of a remote, no-code business means freedom—something Dan needed while moving across the country with his wife, a NICU doctor.

Why No-Code Matters

The rise of tools like Adalo and Bubble is about more than just skipping code—it's about lowering the barriers:

  • Don’t know how to code? No problem.
  • Don’t have a ton of cash for a dev shop? Still no problem.
  • Want to build something, not just dream? You’re in.

No-code levels the playing field for founders, hustlers, and creative thinkers everywhere.

Landing in No-Code Land: A Casual Origin Story

Let’s keep it real: most folks don't start out dreaming of software. Dan went through multiple “left turns”—from Poly Sci in college, a farm kid feeling out of place in D.C., to failing forward at a customer support job (barely keeping up with the tech, almost getting canned), before finally squeezing into a QA gig that opened the doors to software development.

"I almost lost that job, to be honest, because I just could not learn it fast enough. Eventually figured it out, got into quality assurance, and started working with web apps for the Army..."

He picked up Agile, Scrum, Jira, and all the regular software buzzwords, but skipped deep coding. That led him to realize—if you can think logically, you can build great stuff, even without a computer science background.

Adalo vs Bubble: The iPhone vs Android of No-Code

Here's the showdown! If you Google “no-code,” the first tool you’ll see is Bubble. But Dan’s fallen in love with Adalo for its simple UI and easy mobile publishing.

Bubble: Super advanced, tons of flexibility, lots of developer-like features, represents the "Android" side of things.

Adalo: Sleek, visually intuitive, the "Apple" of the no-code world.

Why Adalo Rules for Mobile

Dan notes that Adalo is especially good for folks wanting native mobile apps. You can easily export to Android/iOS; Bubble’s mobile support historically needed tricky wrappers but is improving all the time.

Live Demo: Building an AI MicroSaaS Generator in Adalo

It’s one thing to talk about no-code; it’s another to actually see it built. Dan takes us through building a microSaaS idea generator—the kind of tool that could be sold as a niche MVP, validation platform, or mini business.

Step 1: Get Started in Adalo

  • Sign up
  • Create new app: Go blank, call it: AI MicroSaaS Generator
  • Pick branding, fonts, colors: Instantly applied everywhere

Step 2: Add Login & Signup Features

Adalo comes with pre-built authentication screens for users:

  • Login
  • Signup
  • Homepage (land user after login)

Step 3: Design The Landing Page

Use Adalo’s drag-and-drop UI to add:

  • Headers and welcome message
  • Input field for idea submission
  • “Try it out” button which triggers the AI validation

Step 4: Connect OpenAI for Instant Idea Validation

Adalo’s direct connection to OpenAI means you just need to drop in your API key.

  • Go to Settings > API Keys
  • Paste your OpenAI key

Want Google Gemini? Maps? They’re available, or you can connect any external service using Adalo’s built-in API connector.

Code Snippet: Basic API Call

fetch('https://api.openai.com/v1/completions', {headers: {'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,'Content-Type': 'application/json'},body: JSON.stringify({prompt: "You are a SaaS specialist. Give me a business plan for: {user_idea}",max_tokens: 300})});
"If you can type, click, and drag, you can build with Adalo."

Connecting AI: OpenAI, Google Gemini, and More

One of the real killer features in modern no-code platforms is easy AI integrations. You can literally plug in your API key and run sophisticated prompts directly from your app.

How Prompt Engineering Works

When setting up your microSaaS generator, you just jot out the instructions right in your custom action:

You are a SaaS specialist and world-class product designer. Based on the input below, provide me with a viable and realistic micro SaaS business and feasibility plan. Return:- Idea Decency- Market Feasibility- Projected Startup Costs- Difficulty- Market Saturation- Business Name suggestions

And you'll get back structured, readable feedback, directly from ChatGPT or Gemini.

Flexibility With Data Providers

While Adalo has direct support for OpenAI and Google Maps out of the box, you can hook up any external API—Firebase, Supabase, Xano, or your own backend—using the API connector.

Code Example: Connect External Database via API

// Simple GET request to external db for microSaaS 

ideasfetch('https://yourdataplatform.com/api/ideas?user={user_id}', {headers: {'Authorization': 'Bearer {your_token}'}});

The Component Marketplace: Shortcut City

Why build everything yourself? Adalo (and Bubble) offers component libraries / marketplaces where you can drag-and-drop:

  • Apple/Google Sign In
  • Audio Players
  • Accordions, Tinder Swipe, custom lists
  • Typewriter text (animated responses)
  • Community/premium plugins
"These are community-driven, some are free, some paid. And developers can even make side cash selling components!"

Example: Animated Typewriter Text

Want those cool text reveal animations you see in ChatGPT clones?Just grab the Typewriter Text component from the marketplace, drag it onto your page, and bind the content to your AI response.

<AnimatedTypewriter>{aiResponse}</AnimatedTypewriter>

Handling Databases: Adalo’s Take & External Options

Data is king—so how does Adalo (or Bubble) deal with it?

  • Adalo once capped collections and total records, but now scales (almost) infinitely for simple use cases.
  • If you outgrow the built-in DB, you can hook into Supabase, Firebase, or XANO (HIPAA compliance, for medical apps!).

Example Collection Setup

  • microsaas_ideas (Title, Description, Owner/User)
  • Relationships: One user can have multiple ideas, but each idea belongs to one user.

Dan notes: Don’t worry about crazy joins or schemas if you’re small, but bulk CSV upload/export is super easy.

Code Snippet: Basic Data Model (Pseudocode)

TABLE micro_saas_ideas (id INT PRIMARY KEY,title VARCHAR(255),description TEXT,owner_id INT REFERENCES users(id))

Got tons of records? Use Supabase or Xano as a backend.

Building Out Authentication & User Roles

You want real users, protected routes, even paywalls or invite-only access? No problem.

Authentication Features (in Adalo)

  • Native login/signup screens
  • PIN-protected secondary walls for exclusive content
  • Two-factor authentication (2FA)
  • Role-based access (landlord, tenant, admin, regular user)
  • Social logins: Google, Apple (drop-in components), Facebook/Twitter feeds via widgets

Code Snippet: Role-Based Access

if (user.role === 'landlord') {showLandlordDashboard();} else if (user.role === 'tenant') {showTenantDashboard();} else {showPublicHomepage();}

Routing Logic

Set navigation logic so logged out users are sent to splash pages or onboarding flows; logged in users land on their homepage or dashboard.

Code Snippet: Simple Route Guard

if (!userIsLoggedIn()) {redirectToSplashPage();} else {showUserHomePage();}
"We built onboarding flows: profile pictures, bio info—easy as drag/drop. You can trigger flows based on user role selection at signup."

Publishing Your App: Web, Android, iOS, and Beyond

Here's where Adalo's "Apple approach" shines. When you’re ready to go live:

  • Web Apps: Just toggle LIVE, attach your custom domain (CNAME), and hit "Publish."
  • iOS/Android Apps: Export real native applications—no wrappers! Upload to App Store/Play Store.
"We build in our developer space, then transfer the finished app to the client’s Adalo account, or we offer hosting with hands-on updates and strategy support."

Example: Domain Setup

Just go to Settings → Domains → drop your CNAME, boom. For web apps, beta test instantly. For mobile apps, set up developer accounts (a service Dan charges for), and you’re off to the stores.

Bubble's Approach

Bubble is catching up, now rolling out native builders—but it’s still heavy on the browser/web side for now.

More No-Code Players: FlutterFlow, Supabase, Zapier, and HighLevel

No one tool rules the world—so here's a quick take on some extras.

FlutterFlow

  • More "low-code" than "no-code"
  • Slick UI potential, but you do need to know Firebase (and a bit of code)
  • Great for developers wanting more control

Backend: Supabase & Xano

  • Supabase: Postgres-based, great for advanced user/db needs
  • Xano: HIPAA compliance for health apps, strong Adalo partnership

Glue: Zapier & Make (Integromat)

  • Automate workflows between Adalo/Bubble & almost anything (Gmail, Slack, Stripe, etc.)
  • Adalo has deep Zapier integration; Make is even more advanced for complex automations.

Code Snippet: Zapier Integration (Pseudocode)

// Trigger: New MicroSaaS idea in Adalozapier.trigger('new-record', { type: 'micro_saas_idea' }).then(() => sendWelcomeEmail()).then(() => enrollUserInOnboardingSequence());

Marketing Automation: Go High Level / Launchpad

Dan's team built a white-labeled HighLevel version—"Launchpad"—that plugs straight into Adalo. So, your users sign up, and you can zap their data right into marketing flows or drip campaigns.

Developer Struggles: Can You Really Touch Everything?

"I want access and the capability to change and touch everything." That’s the developer urge.

But no-code tools have gotten so good at opening up APIs and developer hooks that you can usually connect, extend, or integrate deep enough for most needs—without endless config files, webpack plumbing, or month-long sprints.

Traditional Dev vs No-Code Now

Old Way: Code every page, CRUD, auth, testing, deployment. Take forever.New Way: Drag, drop, connect APIs, publish instantly. Iterate fast.

"It’s the gold rush for creativity. APIs and integration mean you can connect almost anything. It’s exciting all over again."

Still want hand-coded pages? You can always mix your no-code app with custom Next.js/React flows, CMSs like Builder.IO, or plug JSON data into your own front-end.

Connecting the Dots: Workflows, Marketing, & Scaling

Launching an app isn’t enough. You need:

  • Automated emails (Zapier)
  • Funnels and landing pages (Go High Level, Launchpad)
  • Payment processors, invoicing, CRM
  • Bulk import/export of your user and app data
"There’s a no-code (or at least low-code) tool for any workflow now. You can go fast and not be boxed in by the old wall of 'I have to code everything myself.'"

Wrapping Up: Ready to Go No-Code?

We’re at a crossroads of no-code tooling and AI integration. Whether you’re a builder, entrepreneur, or classic developer, you can move way faster, explore wilder ideas, and build stuff instead of dreaming about it.

  • The landscape is shifting fast—every week brings new platforms
  • From microSaaS toolkits to full-blown social networks, you actually can go almost 90% of the way (and more)
  • Scale when you need to; start simple, but always be able to add Firebase, Supabase, or raw code as needed
  • AI-powered building lets you prototype, validate, and ship killer apps in days, not months

Big quote time:

"It’s the gold rush right now, man. Unbelievable. With AI and no-code coming into play, everything's fun all over again." – Alex (codingcad.dev podcast)

Get in Touch & Free Stuff!

Ready to go next level with no-code?

  • Check out Dan’s site for resources, free guides, and a chat
  • Dive into the CodingCat.dev library for more tutorials, podcasts, and how-to’s
  • Connect with Dan Hafner on LinkedIn
  • Free stuff, templates, and discount codes coming soon—watch CodingCat.dev for releases and bonus resources!

Sample Links From the Community: