I built a better search engine for n8n workflows (with tutorials & verified templates)

#nextjs #react #supabase #showdev

The Problem: "It looks good, but does it work?"

I am a heavy user of n8n. While the official community is amazing, I often found myself struggling with two things:

Search Experience: Finding a specific use case (e.g., "Notion to DeepSeek with error handling") can be tricky in a forum structure.
The "Black Box" JSON: Downloading a template, importing it, and realizing it requires complex setup or simply doesn't work as expected.

I didn't just want a JSON viewer. I wanted a curated library where templates are practical, verified, and actually come with instructions.

So, I built n8nworkflows.world.

My goal wasn't to compete with n8n's UI (which is excellent), but to create a frictionless search engine where:

Downloads are 100% free.
Workflows include extracted "How-to" tutorials.
You can preview the logic instantly before importing.

Here is how I built it using Next.js 14, Supabase, and React Flow.

The Tech Stack

I chose this stack to prioritize Search Speed and Data richness:

Frontend: Next.js 14 (App Router) - For fast SSR and SEO, ensuring these templates are actually findable on Google.
Database: Supabase (PostgreSQL) - To store not just the JSON, but the enriched metadata (tutorials, step-by-step guides) for 6,000+ workflows.
Visualization: React Flow - To provide a "Quick Preview" of the node graph.
Data Pipeline: Python + Playwright - Used to aggregate, clean, and verify public templates.

The Challenge: Adding Value to Raw JSON

The technical challenge wasn't just storing files, but making them understandable.

1. Visualization as a "Quick Glance"

I used React Flow to parse the n8n JSON structure.

The goal here isn't to replace the n8n editor, but to give users X-Ray vision. You can see: "Oh, this workflow uses a Webhook trigger and connects to OpenAI," without needing to import it first.

I wrote a parser to map n8n's coordinate system ([x, y]) to React Flow's system ({x, y}), and reconstructed the connection logic so edges appear correctly in the browser.

2. Extracting "Tutorials" from Code

Raw JSON is useless without context.

I structured the database to parse the notes and description fields within the n8n JSON. On my site, I present these as structured "How to use" guides right next to the download button.

This means you know exactly what credentials you need (e.g., "Needs a Notion API Key") before you even download.

The Backend: Supabase for Search

Performance is key for a search engine.

I indexed the json_content and metadata columns in Supabase. This allows for granular searching. You aren't just matching titles; you can search for specific nodes.