Systems · 02
Automation Engineer Playground (AEP)
A hands-on system for learning automation engineering. Learners work through ten labs and a capstone, building each automation in their own n8n, and AEP sends a real test request to what they built and shows expected against actual. An AI teacher called Kaz can read their actual workflow and its last run before answering, giving a nudge first and more help only if they keep struggling.
- Built with
- Next.js
- TypeScript
- Supabase
- n8n
- Google Gemini
- Vercel
01 / 08
Image 1 of 8: AEP learner home with the capstone complete and all ten labs checked off
Captured from the running system; lesson data is fictional. The live site is invite-only.
Overview
The problem. Most automation tutorials teach the happy path, and nothing checks whether a learner's workflow survives bad input, a duplicate delivery or a failing API. When something breaks, a general chatbot can't see the workflow or the run that failed, so its advice stays generic.
What I built. AEP is a web app for learning automation engineering by building real automations. A learner works through ten labs and a final capstone one step at a time: understand the business problem, build it in their own n8n, predict what will happen, test it, break it on purpose and fix it. Each lab opens only when the previous one is genuinely finished.
When a lab says “test it”, AEP sends a real request to the learner's workflow and shows the expected result next to the actual one, and progress counts only when the test really passes. Kaz, the built-in AI teacher, can look at the learner's own workflow and its latest run, while a help ladder decides how much of the answer she may give; on challenges she won't hand it over. Behind Kaz, a dedicated n8n workflow gathers and cleans that context before the AI answers.
Why it helps. Learners find out whether their automation really works, get help grounded in their own failing run without being handed the answer, and someone new to automation can work through the whole course alone.
System architecture
- Browser. Works through lessons, runs tests, asks Kaz and keeps notes. Next: AEP web app.
- Next.js App Router · server-rendered. Serves each lesson one step at a time; locked content never reaches the browser. Next: Server Actions.
- Next.js Server Actions. The only privileged layer: who the learner is, what's unlocked, whether a test passed and how much Kaz may see. Next: Sign-in, Database, Learner's n8n, Kaz Gateway.
- Supabase Auth · email code. Invite-only, passwordless six-digit codes, with student and admin roles. End of flow.Supabase Postgres · RLS. Progress, notes, saved webhooks, Kaz threads and encrypted n8n keys; every table owner-only. End of flow.Their own workflows. AEP posts the lab's test payload to the saved webhook and judges the reply; a connected key only lets it read. End of flow.n8n workflow. Resolves the learner's workflow, reads its latest run, strips secrets, builds the prompt and returns one answer. Next: Google Gemini.
- Called only from the Gateway. Writes Kaz's answer; no model key exists in the website or the browser. End of flow.
Key features
- Ten progressive labs and a capstone, each built around a real business problem
- One step on screen at a time, with labs unlocking in order
- Live tests against the learner's own n8n workflow, expected versus actual
- Progress recorded only when the required tests really pass
- Deliberate failure, debugging and no-instruction challenges in every lab
- Kaz, an AI teacher with a four-level help ladder and no spoilers on challenges
- Kaz reads the learner's actual workflow and latest run before answering
- Read-only connection to the learner's own n8n, with the API key encrypted
- Invite-only passwordless sign-in, with an admin screen for invites
- A per-lab notebook, light and dark themes, keyboard and reduced-motion support
Integrations
- n8n (learner workflows and the Kaz Gateway)
- Google Gemini
- Supabase