🎓 n8n Learning Hub — AI-Powered YouTube Educator Directory 📋 Overview This workflow demonstrates how to use n8n Data Tables to create a searchable database of educational YouTube content. Users can search for videos by topic (e.g., "voice", "scraping", "lead gen") and receive formatted recommendations from top n8n educators. What This Workflow Does: Receives search queries via webhook (e.g., topic: "voice agents") Processes keywords using JavaScript to normalize search terms Queries a Data Table to find matching educational videos Returns formatted results with video titles, educators, difficulty levels, and links Populates the database with a one-time setup workflow 🎯 Key Features ✅ Data Tables Introduction - Learn how to store and query structured data ✅ Webhook Integration - Accept external requests and return JSON responses ✅ Keyword Processing - Simple text normalization and keyword matching ✅ Batch Operations - Use Split in Batches to populate tables efficiently ✅ Frontend Ready - Easy to connect with Lovable, Replit, or custom UIs 🛠️ Setup Guide Step 1: Import the Workflow Copy the workflow JSON In n8n, go to Workflows → Import from File or Import from URL Paste the JSON and click Import Step 2: Create the Data Table The workflow uses a Data Table called n8n_Educator_Videos with these columns: Educator (text) - Creator name video_title (text) - Video title Difficulty (text) - Beginner/Intermediate/Advanced YouTubeLink (text) - Full YouTube URL Description (text) - Video summary for search matching To create it: Go to Data Tables in your n8n instance Click + Create Data Table Name it n8n_Educator_Videos Add the 5 columns listed above Step 3: Populate the Database Click on the "When clicking 'Execute workflow'" node (bottom branch) Click Execute Node to run the setup This will insert all 9 educational videos into your Data Table Step 4: Activate the Webhook Click on the Webhook node (top branch) Copy the Production URL (looks like: https://your-n8n.app.n8n.cloud/webhook/1799531d-... ) Click Activate on the workflow Test it with a POST request: curl -X POST https://your-n8n.app.n8n.cloud/webhook/YOUR-WEBHOOK-ID \
-H "Content-Type: application/json" \
-d '{"topic": "voice"}' 🔍 How the Search Works Keyword Processing Logic The JavaScript node normalizes search queries: "voice", "audio", "talk" → Matches voice agent tutorials "lead", "lead gen" → Matches lead generation content "scrape", "data", "scraping" → Matches web scraping tutorials The Data Table query uses LIKE matching on the Description field, so partial matches work great. Example Queries: {"topic": "voice"} // Returns Eleven Labs Voice Agent
{"topic": "scraping"} // Returns 2 scraping tutorials
{"topic": "avatar"} // Returns social media AI avatar videos
{"topic": "advanced"} // Returns all advanced-level content 🎨 Building a Frontend with Lovable or Replit Option 1: Lovable (lovable.dev) Lovable is an AI-powered frontend builder perfect for quick prototypes. Prompt for Lovable: Create a modern search interface for an n8n YouTube learning hub:
- Title: "🎓 n8n Learning Hub"
- Search bar with placeholder "Search for topics: voice, scraping, RAG..."
- Submit button that POSTs to webhook: [YOUR_WEBHOOK_URL]
- Display results as cards showing:
* 🎥 Video Title (bold)
* 👤 Educator name
* 🧩 Difficulty badge (color-coded)
* 🔗 YouTube link button
* 📝 Description
Design: Dark mode, modern glassmorphism style, responsive grid layout Implementation Steps: Go to lovable.dev and start a new project Paste the prompt above Replace [YOUR_WEBHOOK_URL] with your actual webhook Export the code or deploy directly Option 2: Replit ( replit.com ) Use Replit's HTML/CSS/JS template for more control. HTML Structure: <!DOCTYPE html>
<html>
<head>
<title>n8n Learning Hub</title>
<style>
body { font-family: Arial; max-width: 900px; margin: 50px auto; }
#search { padding: 10px; width: 70%; font-size: 16px; }
button { padding: 10px 20px; font-size: 16px; }
.video-card { border: 1px solid #ddd; padding: 20px; margin: 20px 0; }
</style>
</head>
<body>
<h1>🎓 n8n Learning Hub</h1>
<input id="search" placeholder="Search: voice, scraping, RAG..." />
<button onclick="searchVideos()">Search</button>
<div></div>
<script>
async function searchVideos() {
const topic = document.getElementById('search').value;
const response = await fetch('YOUR_WEBHOOK_URL', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({topic})
});
const data = await response.json();
document.getElementById('results').innerHTML = data.Message || 'No results';
}
</script>
</body>
</html> Option 3: Base44 (No-Code Tool) If using Base44 or similar no-code tools: Create a Form with a text input (name: topic ) Add a Submit Action → HTTP Request Set Method: POST, URL: Your webhook Map form data: {"topic": "{{topic}}"} Display response in a Text Block using {{response.Message}} 📊 Understanding Data Tables Why Data Tables? Persistent Storage - Data survives workflow restarts Queryable - Use conditions (equals, like, greater than) to filter Scalable - Handle thousands of records efficiently No External DB - Everything stays within n8n Common Operations: Insert Row - Add new records (used in the setup branch) Get Row(s) - Query with filters (used in the search branch) Update Row - Modify existing records by ID Delete Row - Remove records Best Practices: Use descriptive column names Include a searchable text field (like Description) Keep data normalized (avoid duplicate entries) Use the "Split in Batches" node for bulk operations 🚀 Extending This Workflow Ideas to Try: Add More Educators - Expand the video database Category Filtering - Add a Category column (Automation, AI, Scraping) Difficulty Sorting - Let users filter by skill level Vote System - Add upvote/downvote columns Analytics - Track which topics are searched most Admin Panel - Build a form to add new videos via webhook Advanced Features: AI-Powered Search - Use OpenAI embeddings for semantic search Thumbnail Scraping - Fetch YouTube thumbnails via API Auto-Updates - Periodically check for new videos from educators Personalization - Track user preferences in a separate table 🐛 Troubleshooting Problem: Webhook returns empty results Solution: Check that the Description field contains searchable keywords Problem: Database is empty Solution: Run the "When clicking 'Execute workflow'" branch to populate data Problem: Frontend not connecting Solution: Verify webhook is activated and URL is correct (use Test mode first) Problem: Search too broad/narrow Solution: Adjust the keyword logic in "Load Video DB" node 📚 Learning Resources Want to learn more about the concepts in this workflow? Data Tables: n8n Data Tables Documentation Webhooks: Webhook Node Guide JavaScript in n8n: "Every N8N JavaScript Function Explained" (see database) 🎓 What You Learned By completing this workflow, you now understand: ✅ How to create and populate Data Tables ✅ How to query tables with conditional filters ✅ How to build webhook-based APIs in n8n ✅ How to process and normalize user input ✅ How to format data for frontend consumption ✅ How to connect n8n with external UIs Happy Learning! 🚀 Built with ❤️ using n8n Data Tables
