Your AI powered learning assistant

How to Build a SaaS with InfraNodus and Windsurf AI (Tutorial)

What we’re going to build

00:00:00

The video demonstrates generating business ideas and building prototypes using InfraNodus, a visual AI text analysis tool, and Windsurf AI. The example used is Saassy.Tools—a calculator for Lifetime Customer Value prediction—created in hours to address the lack of precision in existing tools. It explains how this tool provides precise calculations with clear explanations through Windsurf's capabilities. Additionally, it explores validating such ideas further while showcasing real-time development processes.

Step 1: Study the current demand

00:01:26

To validate the idea of developing tools, InfraNodus's market study app is used to analyze demand and user interests. By selecting "informational demand" and importing related search queries from Google, a graph visualizes key terms people associate with SaaS tools. Nodes represent words while connections show co-occurrences; larger nodes indicate higher relevance by linking multiple topics like 'business.' This approach identifies critical areas of interest to refine tool development.

Why graph is better for keyword research?

00:02:45

Using graphs for keyword research provides precise contextual insights by visually clustering related terms. This method eliminates the need to sift through extensive tables, offering a clear understanding of user interests and search behavior. For instance, identifying that searches involving 'SaaS' often include 'business ideas' allows targeted content creation tailored to audience needs.

Step 2: Expand the search range

00:03:25

Expanding Search Phrases for SaaS Tools To refine the search strategy, additional phrases and related queries specific to a SaaS product are explored. Observations reveal that users frequently look for project management tools, business ideas, and company lists within this domain. Insights suggest creating content like pages describing various available tools or integrating with popular analytics platforms such as Mixpanel and Google Analytics to attract relevant audiences.

Identifying User Needs Through Analytical Contexts Analyzing keyword contexts uncovers user interests in dashboards, templates (including Excel), and integrations with existing systems. By examining connections between terms like 'dashboard' or 'analytics,' it becomes evident that providing customizable templates could meet significant demand. This iterative process of exploring keywords helps identify opportunities to enhance tool offerings effectively.

“It really gives you a good idea of what happens in the minds of your customers”

00:06:20

AdWords provides valuable insights into the thought processes of potential customers. By analyzing search behaviors, it reveals what people are looking for when they seek your product or service. This tool helps businesses comprehend informational demand and tailor their strategies accordingly.

Step 3: Generate a business idea based on your research

00:06:40

The process begins with brainstorming ideas, focusing on SaaS tools and analytics. A business concept emerges: developing a platform that integrates project management with analytics tools like Mixpanel and Google, emphasizing dashboard templates in various formats. The idea targets small to medium businesses by offering collaboration features, customizable dashboards, AI-driven insights, automated reporting linked to outcomes—catering especially to industries less familiar with data strategies.

Step 4: Building the product with Windsurf AI

00:08:41

To start building a product using Windsurf AI, open the application and create a new folder for your project. Name it appropriately, such as "SaaS," to organize your work effectively. Then access Cascade within Windsurf to proceed with further development steps.

How to prompt AI coding tools

00:09:00

To effectively use AI coding tools, start by specifying your business ID and clearly stating the desired outcome. For instance, creating a simple landing page is ideal for beginners or initial stages of development to avoid overwhelming complexity. Define the technology stack you want to utilize—such as React and Next.js—and limit features like databases initially to maintain simplicity. Once prompted, these tools generate project structures while providing step-by-step guidance that aids in learning programming fundamentals.

Running into problems and fixing them through the chat

00:10:07

Encountering errors while setting up a project can be an excellent learning opportunity. By addressing issues step-by-step, such as installing Node.js or resolving dependency problems, one gains practical experience in troubleshooting. Tools that automate tasks like creating package.json files, Tailwind configurations, and basic project structures are invaluable for beginners to learn web development or developers seeking quick prototypes. While these tools aren't recommended for production-level projects due to trust concerns with the stack used, they excel at rapid prototyping without requiring extensive technical skills.

Installing dependencies via Terminal (for non-coders)

00:11:57

To install dependencies via Terminal, follow the provided instructions even if you lack coding knowledge. If errors occur, they will be displayed along with guidance to resolve them. For instance, an unsupported engine error can often be fixed by adjusting the Node version or modifying entries in the package.json file as prompted. Once corrected and reattempted using 'npm install,' all necessary dependencies should successfully install.

Step 5: Troubleshooting the errors (bear with me, watch how amazing Windsurf AI is)

00:13:06

When encountering errors during server development, the process involves identifying issues by copying error messages and pasting them into Windsurf AI. The tool analyzes these errors, proposes fixes, and provides commands to resolve them. By following its suggestions—such as clearing cache or reinstalling dependencies—and iterating through solutions for subsequent problems, projects can eventually be built successfully.

Step 6: Fix the bad design (use human language to fix it)

00:14:34

The design initially appears flawed, prompting the need for adjustments. By using human language to communicate desired changes, additional configuration files are added to enhance functionality and aesthetics. This interactive approach simplifies the process of refining designs effectively.

The landing page is ready!

00:15:16

The landing page for an AI-powered analytics website is complete, featuring key calls-to-action like 'Start Free Trial' and 'Watch Demo.' The focus now shifts to iterating the design and functionality. Clicking on options such as "Start Free Trial" initiates specific user actions or workflows that need further refinement.

Step 7: Add a login flow

00:15:36

To enhance user experience, when users click 'Start Free Trial,' they should be directed to a login page. This setup allows integration with various login systems by specifying the desired system and its API description. The process can automatically attach the chosen system seamlessly, streamlining functionality.

Step 8: Add more pages to the app via chat

00:16:35

To enhance the app's functionality, a new page is introduced when users click on the 'Get Started Now' button. This page allows them to connect their Mixpanel account seamlessly. Once connected, they can access and analyze user retention data effectively.

“All the points we had in our original idea are on our landing page”

00:17:05

The original concept has been successfully translated into a functional landing page, showcasing features like AI-powered insights, custom dashboards, and team collaboration. While improvements are possible, this marks an excellent starting point. Additionally, integration with Mixpanel is being developed to enhance functionality by retrieving external data through APIs for retention information or other needs. Despite minor technical issues such as errors requiring manual npm installation and setup adjustments during testing phases, the system now allows users to connect their Mixpanel accounts seamlessly.

The dashboard is ready!

00:19:22

A dashboard is designed to connect with tools like Mixpanel, generating user retention graphs and integrating this data into an LTV calculator. Users can seamlessly link their existing analytical platforms to gain valuable insights alongside additional intuitive dashboard features. The system also allows deeper exploration by identifying specific code areas related to real data usage, enhancing understanding and functionality.

Asking Windsurf’s cascade to find the relevant function

00:20:17

To locate where a specific action occurs within the code, one can examine which function processes an input by selecting it and using Cascade in chat mode. This approach is particularly useful when building integrations like with Mixpanel. Cascade identifies the relevant function in the current file and provides explanations about its purpose, enabling seamless integration even without programming expertise.

Step 10: Creating a connection to an external API service

00:21:03

The process involves creating a connection to the Mixpanel API, aiming to build graphs based on real data. Initial steps include setting up scaffolding for the service structure, which is already in place. Upon encountering an error during execution, adjustments are made by generating new files and installing necessary dependencies using npm as the package manager.

Why it’s a great way to learn how to code!

00:22:14

Using tools like Mixpanel, even a beginner can effectively learn coding by observing how changes are implemented and understanding the underlying processes. This hands-on approach not only accelerates learning but also enhances one's ability to provide precise instructions for future tasks. By experimenting with real data and APIs, learners gain practical experience that bridges theoretical knowledge with actual application.

Step 11: Fix more errors (that’s a part of any development flow, so bear with me :)

00:24:04

Encountered errors while integrating with an API, prompting a review of its documentation to understand the correct request structure. Adjustments included adding 'retention type' and removing unnecessary parameters for event analysis. After implementing these changes, connection issues were resolved but data inaccuracies persisted in retention percentage calculations due to incorrect processing logic. Further refinements involved modifying how data was treated—removing multiplication by 100—and re-testing until results approached accuracy.

Now we have the final result — integrated Mixpanel data dashboard

00:26:50

The integration of Mixpanel data into a dashboard enables the visualization of day-to-day retention through graphs. This data is automatically fed into a custom-built calculator to compute customer lifetime value, projected revenue, and other metrics. The process sets the foundation for gradually incorporating additional tools to enhance analytics capabilities.

A recap — what we’ve learned

00:27:23

The process began by analyzing informational demand with InfraNodus, identifying keywords people use when searching for SaaS tools. A business idea was generated based on these insights, aiming to enhance an existing tool created with Windsurf AI. Iterative improvements were made through simple instructions and error fixes, resulting in a functional tool featuring integration capabilities like Mixpanel for retention data analysis. The final product includes a landing page summarizing the concept developed via InfraNodus.