From Idea to AI-Powered Webinar App: What I Built (and What Broke) Along the Way
“You’re going to build what in eight weeks?!?”
That was the voice in my head when I hit Submit on Jelani Abdus-Salaam’s Micro App Accelerator application back in January. I had no idea what kind of app I was going to build—I just knew that something about that original newsletter hit a nerve. AI was changing the game, and I didn’t want to be on the sidelines.
Fast forward a few weeks, and I found myself deep in a rabbit hole of Google Slides permissions, webhook timeouts, and token-consuming loop errors. I wasn’t just learning how to use AI—I was wrangling it, wiring it, and trying to make it play nice with a tool designed to help real people solve real problems.
What came out of it?
A fully-functional Webinar Builder Application designed for coaches, mentors, and small business owners—folks who host webinars but don’t want to waste hours designing slides, crafting speaking points, or figuring out handouts.
But this story isn’t just about what I built.
It’s about what I learned—the problems I didn’t expect, the fixes I had to engineer, and the tools I now trust as part of my micro-app builder toolkit.
In this article, I’ll take you through:
What inspired the project — and why I didn’t start with a clear app idea
The step-by-step build process — from whiteboard sketches to AI-powered content generation
The biggest challenges I ran into — and how I solved each one without throwing my laptop
Lessons learned — what I’d do differently (and the advice I’d give to anyone starting now)
Reflections on the course — and why I’d do it all over again
Whether you’re curious about no-code AI workflows, thinking of joining an accelerator, or just love behind-the-scenes builder stories, this one’s for you.
1. Spark of Inspiration
I didn’t sign up for Jelani’s Micro App Accelerator with a fully-baked app idea.
What I did have was curiosity, a growing obsession with AI tools, and a newsletter in my inbox titled “Why I’ve Been Quiet”. It was raw, honest, and exciting—exactly the kind of message that makes you pause mid-scroll and think, “I need to be part of this.”
That one email became the nudge that moved me from consumer to creator.
Once the course began, we were challenged to conceptualize our own micro app idea using Bolt.new. The course provided the framework and support—but the actual app? That was on us. There were no templates. No hand-holding. Just a room full of builders, Office Hours, and a blank canvas.
At first, I explored a few different directions, but one problem kept popping up in my mind: Webinars.
I’ve seen so many small business owners, coaches, and mentors pour energy into live trainings and educational webinars. The content is gold—but the creation part? A nightmare. Slides, scripts, outlines, handouts... all of it eats time and creativity before the real value even gets delivered.
That’s when the idea clicked:
What if I could build a tool that helped them go from “idea” to “presentation-ready” in minutes instead of hours?
Not just a template or checklist—but an actual app that uses AI to generate the full package: slides, speaking points, and downloadable handouts. One place. One flow. All done faster than brewing a decent cup of coffee.
This wasn’t just a cool build.
It felt useful.
And that’s when I committed to building the Webinar Builder Application.
2. Research & Early Planning
Once I had the idea locked in, the next step was figuring out how to bring it to life.
Not in theory—but in buttons, screens, and logic flows. And like most builders who live at the intersection of caffeine and curiosity, I opened up Excalidraw and started sketching.
This wasn’t about getting pixel-perfect UI mockups. It was about thinking through the user journey:
What would someone see first?
What information would they enter?
When would AI step in?
Where should the final outputs live?
The Excalidraw wireframe became the first visual roadmap of the Webinar Builder.
Once I had the vision in front of me, I moved on to writing a Product Requirements Document (PRD). And here's the fun part—I wrote the entire thing using ChatGPT.
I prompted it with the concept, explained what I wanted the app to do, and asked it to help me organize the user stories, feature list, and technical requirements. The back-and-forth felt like I had a co-pilot asking the right questions, helping me think deeper about user flows, edge cases, and even basic validations.
With that PRD in hand, I jumped over to Perplexity to dig into the tech side.
What APIs were out there for:
Generating Google Slides or PDFs?
Creating dynamic copy using AI?
Embedding brand assets into presentations?
Perplexity became my AI research assistant—sifting through docs, surfacing lesser-known APIs, and helping me figure out which tools were actually viable (and affordable) for the MVP.
All of this happened before I wrote a single line of code.
But it gave me something even more valuable: clarity.
I knew the key features.
I knew which tools could deliver them.
And I knew the first problem I was going to solve for real users.
3. Setting Up the Foundation with Bolt.new
With the idea validated and the blueprint in place, it was time to start building.
I kicked things off in Bolt.new, setting up the very first screen: User Sign-Up.
I didn’t worry about slide generation or AI prompts yet. My only focus was: Can someone create an account and get into the app? Once that worked, I moved on to screen two, then screen three—testing each step, one at a time. (If you want to try Bolt, use this link to get 200k Free Credits - and if you upgrade to Pro get 5M Additional Credits! - https://bolt.new/?rid=2xwnlr)
That mindset came directly from the Micro App Accelerator course.
Jelani didn’t just hand us a toolbox—he walked us through how to use it.
He showed us how to approach app-building in layers, how to think modularly, and how to debug smart. Without that structure, I would’ve been totally lost, trying to wire everything up at once and drowning in broken workflows.
Instead, I built it like a staircase:
One screen. One function. One test.
Repeat.
This step-by-step process helped me stay focused and avoid overwhelm. It also made it easy to spot bugs early and isolate which screen or feature caused them.
Now, Bolt.new gave me a solid base—but when I wanted to elevate the user experience, I turned to 21st.dev.
And let me just say… game changer.
Need a sleek toggle menu?
Animated button?
Responsive layout that feels modern instead of like it came out of a 2011 template graveyard?
21st.dev had it all.
It’s packed with clean, copy-and-paste React components that brought visual polish and UX smoothness I would’ve never thought to add—or known how to code.
It became my secret weapon for turning “functional” into “delightful.”
Between Bolt.new for structure, 21st.dev for flair, and Jelani’s guidance through the course, I had the tools and direction to bring the app to life—one screen at a time.
4. Building the Webinar Workflow
Once the interface was in place, it was time to bring the backend logic to life—the actual workflow that would take a user's webinar idea and transform it into a complete set of presentation materials.
This is where the real magic started happening—and also where the project started to stretch my problem-solving muscles.
The intended user experience was straightforward:
A user enters their webinar topic, description, and optional branding info
The system uses AI to generate speaker notes and handouts
The content is formatted into a Google Slides deck, along with PDFs of the speaking notes and handouts
Downloadable and viewable links are generated for all materials
To power all this, I used n8n as the automation engine—handling workflows that pulled in AI responses, created documents, and saved everything in Supabase.
As each new feature came online, the workflows naturally grew more complex.
One of the biggest enhancements I made was allowing users to upload their logo, which would then appear on every page of their Handouts and Speaking Notes. That small touch added a layer of professionalism to the materials—and the feedback from testers confirmed it was worth the extra effort.
But this stage wasn’t just about building workflows. It was about debugging them.
I leaned heavily on the Console in Bolt.new, using error messages and logs to trace issues and break down what wasn’t working. I took screenshots, fed them into Claude and ChatGPT, and used those AI tools as co-pilots to diagnose and solve the issues I couldn’t figure out alone.
That approach?
Directly inspired by one of Jelani’s lessons.
Each weekly session of the Micro App Accelerator wasn’t just about adding new features—it was about learning how to troubleshoot like a builder. Jelani emphasized using the Console to find answers, isolate the issue, and then hit up AI for a second opinion. That process saved me hours (and probably days) of aimless guessing.
One recurring challenge was timeout issues. Some workflows—especially when AI generation and document formatting were involved—would take too long, causing Bolt to hang or fail. The solution?
I adjusted the logic so that n8n would immediately respond to the webhook, confirming receipt, while Bolt polled Supabase every few seconds to check when the final files were ready. That fix made the app feel faster and more reliable.
Looking ahead, I already have plans to build on this foundation:
Adding brand colors into the Google Slides output
Automatically inserting stock or AI-generated images into the decks
Possibly offering theme customization for users who want their materials to better match their existing brand
This part of the build showed me what’s possible when you start with a clear workflow—and then keep layering in value, one feature at a time.
5. AI Content & PDF Generation
The content generation piece started with a spark of inspiration—and a name.
I originally built the logic around a customGPT I called “Webbie the Webinar Expert.”
Webbie was tasked with turning a webinar topic into an outline, speaker notes, handouts, and even slide content—all in one prompt.
And to be honest… it kind of worked.
But the more I pushed it, the more I realized I was asking Webbie to do too much. The responses started getting vague, inconsistent, and—at times—flat-out incorrect. It wasn’t that the model didn’t understand the task. It just couldn’t focus with that many moving parts in one giant request.
So I split the workload into three specialized AI Agents, each powered by their own within the same n8n workflow:
Slides Agent: Creates the slide-by-slide presentation content based on a generated outline
Handouts Agent: Generates a more in-depth version of the slide content that can be used as attendee materials
Speaking Points Agent: Crafts expanded presenter notes based on the content of the Slides Agent
Each agent could now focus on a specific objective—producing clearer, more structured output with far fewer hallucinations.
That separation of responsibilities made the entire experience feel smarter and more professional.
Breaking the Work Into Batches
Another breakthrough?
Batching the Slides.
Instead of asking the Slides Agent to produce 10–15 slides in a single request (which often led to drop-offs in quality), I broke the task down into chunks of 4 slides at a time, all based on the Outline created earlier in the workflow.
This approach let me generate longer presentations while keeping each set of slides sharp, coherent, and focused.
It also made error handling easier—if something went wrong, I only had to regenerate a specific batch, not the entire presentation.
Precision in PDF Generation
Once the content was in place, I needed to turn it into polished, professional-looking documents. That meant PDFs for Handouts and Speaking Notes—complete with branding and layout consistency.
To make this work:
I used Structured Outputs with JavaScript logic to define how text and logos should appear on the page
I tested various formats to ensure line breaks, headers, and images aligned properly—especially when users uploaded long business names or multi-line titles
I evaluated several PDF APIs and ultimately landed on Docamatic, which gave me the best balance of flexibility and visual fidelity
With Docamatic, I could pass clean HTML + CSS (generated from my structured AI output) and get back a professionally rendered, fully downloadable PDF. No extra formatting needed.
The end result?
A workflow that produces:
A Google Slides presentation
A PDF Handout
A PDF with Speaking Notes
Each branded, consistent, and ready to use—without the user ever having to open PowerPoint or design software.
This part of the project taught me a huge lesson:
AI is powerful, but only when you give it structure.
Divide the work. Feed it clean inputs. Control the output format. That’s when things go from “AI-generated” to actually useful.
6: Testing, Feedback & Lessons Learned
The critical stage arrived with real-world testing by actual users. I invited select beta testers—coaches, mentors, and small business owners who regularly host webinars—to interact with the app and share their experiences candidly.
User Feedback Highlights
1. Slide Deck Permissions
Issue: Beta tester encountered access restrictions, requiring manual permission grants for Google Slides decks.
Solution: Adjusted Google API key settings to automatically grant access, eliminating the need for manual approval. This significantly streamlined the user experience.
2. Customization for Polls/Quizzes
Feedback: Tester appreciated selecting specific handouts but noted no clear option to select/deselect poll or quiz elements independently.
Planned Enhancement: Will add clear toggle features for these elements to improve customization flexibility.
3. Brand Logo Placement & User Flow
Issue: Confusion about adding a brand logo, as it wasn't intuitive from the login screen.
Improvement Implemented: Added a tip/note prompting users at the start of the workflow to ensure they upload brand assets early, avoiding confusion later in the process.
4. Slide Numbering and Handout Clarity
Issue: The first page of speaking notes referred confusingly to "Slide Number: p."
Action Taken: Updated the initial page to clearly indicate introductory content or title page, enhancing readability for presenters.
5. UI/UX Observations
Positive Feedback: User praised proactive "Saved Successfully" messaging and intuitive redirection.
Constructive Feedback: Suggested adding hover labels (e.g., explicitly labeling the exit/logoff button) and ensuring interactive container boxes are fully clickable rather than just hyperlinks.
Adjustments: Modified UI containers for easier navigation and improved mouse-hover labels for clarity.
6. Regeneration of Webinars
Request: Users expressed interest in regenerating past webinars with updated branding without needing to recreate from scratch.
Planned Feature: Adding a simple "Regenerate" option that preloads previous content with new branding settings, significantly streamlining the workflow.
Technical Issues: CORS Errors
Problem: Initial tests revealed browser security measures (CORS) blocking calls from Bolt.new to n8n endpoints.
Solution: Adjusted CORS settings within the n8n Webhook node to ensure allowed origins correctly matched the Bolt.new deployment URL, resolving connectivity issues.
Key Lessons Learned
Immediate Access Matters: Even minor permission issues can significantly disrupt user flow.
User-Friendly UI/UX: Small adjustments like clearer hover states and fully clickable areas vastly enhance user interactions.
Intuitive Branding Integration: Early prompts for brand assets prevent confusion and frustration later in the workflow.
This targeted beta testing not only resolved critical bugs and refined the user interface but also validated core functionality, ensuring a smoother, more intuitive experience for all future users.
7: Launch and Reflection
Launching the Webinar Builder was a pivotal milestone—transforming weeks of development, testing, and iteration into a practical solution available at WebinarBuilder.app. With the app live, initial users receive 100 free credits (allowing creation of four complete webinars). Additional credits are available at an accessible pricing model—$40 for 50 credits—making each professionally-crafted webinar only $20.
The Micro App Accelerator Course was transformative. Jelani’s guidance illuminated areas I'd never previously considered—especially critical security practices, sophisticated integrations, and the nuanced power of AI in application building. His hands-on approach demystified not only Bolt.new but also a suite of AI tools, enabling solutions that once seemed unattainable. I would recommend any course offered by Jelani to anybody that asks.
Key lessons from the Accelerator:
Security & Privacy: Understanding and applying robust security measures, including proper permissions handling and addressing common web vulnerabilities like CORS.
AI Integration: Jelani's insights on structuring AI prompts and workflows turned vague ideas into precise, high-quality outputs that felt genuinely useful and professional.
Iterative Development: Learning how to quickly prototype, gather feedback, and iterate—making rapid progress without getting bogged down by perfectionism.
Problem Solving: Leveraging AI as a diagnostic tool saved countless hours, demonstrating practical ways to troubleshoot and resolve issues efficiently.
These experiences dramatically expanded my technical skill set, reinforcing confidence in leveraging AI tools and platforms like Bolt.new, n8n, Supabase, and Docamatic to achieve professional, scalable, and secure micro applications.
Conclusion
The journey from idea to a functional AI-powered webinar application was rewarding beyond expectation. What began as curiosity evolved into a practical tool—validated by real user needs and rigorous testing.
If you host webinars, trainings, or workshops, I encourage you to experience firsthand how much time and effort you can save with Webinar Builder. Start your journey at WebinarBuilder.app—with your first four webinars free.
Thank you to Jelani and the Micro App Accelerator for guiding me through this incredible journey. The lessons, skills, and confidence gained from this experience are invaluable and set a foundation for endless possibilities ahead.
About the Author
Warren Schuitema is the founder of Matchless Marketing LLC, an AI consulting firm dedicated to helping businesses harness the power of artificial intelligence for growth and innovation. As a Certified AI Consultant trained by industry experts, Warren specializes in AI integration, strategic planning, and tools that deliver measurable results. His expertise bridges the gap between complex AI technologies and practical business applications, making him a trusted advisor for companies navigating the AI revolution.
With a background in demand planning, forecasting, and digital marketing, Warren brings a data-driven approach to every project. His hands-on experience includes designing custom AI solutions that enhance creativity, streamline operations, and improve efficiency. Passionate about empowering businesses, Warren has also developed bespoke AI tools and workflows tailored to meet unique client needs.
Beyond his professional pursuits, Warren is a father and AI enthusiast who believes in the power of technology to enrich both personal and professional lives. Whether helping businesses scale or exploring innovative AI solutions for family life, Warren’s approach combines deep technical knowledge with a commitment to human connection and real-world impact.
