n8n Workflow Learning Hub

A beautiful, interactive visualization tool for learning n8n workflow automation patterns through 12 progressive real-world projects.

Features

✨ 12 Production-Grade Workflows covering:

• Mental dump → Auto-organized life inbox
• Work + Study load tracking
• Spanish phrase coach
• Podcast script polisher
• Reflection & sentiment analysis
• Idea organizer
• Health tracking
• Task management
• Knowledge base
• Cat care management (multi-entity)
• YouTube content planner

🎨 Interactive Visual Diagrams

• Node-based workflow visualization
• Bezier curve connections with gradients
• Clickable nodes for detailed information
• Color-coded node types (triggers, transforms, AI, logic, storage, outputs)

📚 Educational Content

• Purpose & setup details for each node
• Learning concepts for every workflow
• Node type legend
• Progressive complexity

Tech Stack

• Vite - Fast build tool
• React 18 - UI framework
• Tailwind CSS - Styling
• Lucide React - Icons

Installation

npm install

Development

npm run dev

Visit http://localhost:5173 in your browser.

Build

npm run build

Project Structure

n8n-workflows/
├── src/
│   ├── App.jsx           # Main component with all workflows
│   ├── main.jsx          # React entry point
│   └── index.css         # Global styles
├── index.html            # HTML template
├── package.json          # Dependencies
├── vite.config.js        # Vite configuration
├── tailwind.config.js    # Tailwind configuration
└── postcss.config.js     # PostCSS configuration

How to Use

1. Click through the project tabs to explore different workflows
2. Click on any node in the diagram to see detailed information
3. Read the "Key Concepts" section to learn workflow patterns
4. Use the "Node Types" legend to understand different node categories

Learning Paths

• Beginner: Start with Projects 1-3 (basic triggers, transforms, AI)
• Intermediate: Projects 4-7 (chaining, branching, multi-step processing)
• Advanced: Projects 8-10 (conditional logic, custom functions, trend analysis)
• Production: Projects 11-12 (multi-entity management, complex pipelines)

License

MIT

---

Built with ❤️ for n8n workflow learning