Visual Makers Tool Directory

The largest German- speaking no-code tool collection! Here you will find an overview of the current no- and low-code tools on the market.
Client
Visual Makers UG
Timeframe
2 Weeks
Company Size
10 Employees
Industry
No Code Software Agency and Academy
Services
Webflow-Entwicklung, No-Code Tool Research, UI-Design, UX-Design, Technical Implementation
Role
Webflow Developer

Challenge

VisualMakers needed a comprehensive tool directory, built entirely within Webflow, that included over 100 CMS elements. The primary challenges were:

Implementing multiple dynamic filters for main categories such as AI Tools, Automation, and Databases. Adding filters for "Areas," "Use Cases," and specific "Features" of each tool. Creating a real-time text search across all CMS entries with the ability to reset filters individually or collectively.

The project faced several hurdles:

  • Managing numerous CMS custom fields in Webflow with more than four filters, ensuring dynamic content display upon filter selection.
  • Maintaining optimal performance despite having over 100 elements on a single page.
  • Navigating the limitations of nesting more than two CMS collection elements, which Webflow currently doesn't support.
  • Addressing the performance issues with Webflow's native dynamic search, which requires re-indexing after every change.

Given these challenges, we needed a solution that didn't involve custom code but leveraged No-Code tools for dynamic filtering. This required extensive research, trial and error, and careful consideration of available No-Code options.

‍

Solution

Our approach was systematic and collaborative:

Prototyping and Alignment:

We created a rough prototype and click dummy of the filter flow UI and UX in Figma. This was reviewed and refined with input from Adriano Villa Bascón and Lilith Brockhaus.

Component Selection and Customization

We integrated the Relume Filter component into Webflow, customizing it according to the VisualMakers' web style guide.For filter elements, we utilized Accessible Form Filter Components from Finsweet.

Dynamic Filtering and Real-Time Search:

Jetboost was the key to adding dynamic filters and real-time search functionality. We implemented filter tags and search bars with the appropriate CSS classes, placed the Jetboost script in the head code, and the dynamic filter system was ready.

After a brief review and testing phase, we launched the directory from staging to production, and the No-Code tool directory has been live ever since.

‍

Result

The project was a success, showcasing the power and practicality of No-Code solutions for complex web projects. Key outcomes included:

  1. Dynamic Filters and Real-Time Search: Seamlessly integrated, allowing users to filter and search CMS elements in real-time.
  2. Optimized Performance: Maintained despite the large number of elements.
  3. User-Friendly and Scalable Solution: Demonstrating the efficiency and power of No-Code tools.

View the Directory in Action https://www.visualmakers.de/tools