🦸 Welcome to the AI Workshop

Today we’re building on top of Quarkus Super Heroes — a ready-to-run superhero battle arena — and gradually adding AI superpowers to it.

There are two tracks — pick the one that matches your skills and interests:

Track	Stack	What you’ll do
☕ Java Backend	Quarkus + Java	Extend existing microservices: entities, REST endpoints, database queries, LLM integration
🌐 Frontend	Node.js + Express + React + TypeScript	Build a new encyclopedia service and UI from scratch, add AI chat with streaming

Both tracks integrate with the same Super Heroes ecosystem and culminate in AI-powered features. Each story is self-contained, so you can work at your own pace and pick the level that suits you.

😌 Not familiar with the tech stack? No problem.

This workshop is designed so you can learn as you go. You don’t need prior experience with Quarkus, Java, React, or TypeScript to get started.

The code follows familiar patterns: REST endpoints, entities, services, components. If you’ve built anything with Spring, Rails, Django, FastAPI, Express, Angular, or Vue, it will feel recognisable.
Every story comes with clear acceptance criteria and optional hints — including working code examples you can adapt directly.
Your AI coding assistant is your pair partner. Don’t worry if React or TypeScript are new to you — the assistant will guide you through component patterns, type annotations, and API calls.
The Quarkus tooling has hot reload; Vite has instant HMR. Both give you fast feedback loops.
Your facilitator is here to help. Ask questions early and often.

The struggle is part of the learning. Give yourself at least 20 minutes on a story before reaching for the hints — and then absolutely use them.

What you’ll build

The Quarkus Super Heroes app is a collection of microservices:

Service	What it does
`rest-heroes`	CRUD for heroes (PostgreSQL)
`rest-villains`	CRUD for villains (PostgreSQL)
`rest-fights`	Orchestrates battles, stores fight history (MongoDB)
`rest-narration`	AI-powered narration of each fight (calls an LLM)

☕ Java Backend Track

Extend these existing services: add fields, endpoints, validation, cross-service calls, and AI integration using LangChain4j. Stories are ordered from easy to hard:

Level	Colour	What’s involved
🟢 Warm-up	Green	Entity fields, migrations, simple REST endpoints
🟡 Feature	Yellow	Validation, filtering, cross-service calls, new entities
🔴 AI	Red	LLM integration, prompt engineering, structured output

🌐 Frontend Track

Build a new Hero Encyclopedia from scratch — a Node.js/Express backend and React frontend that integrate with the existing Super Heroes APIs:

Level	Colour	What’s involved
🟢 Warm-up	Green	Project scaffolding, REST clients, TypeScript types, React components
🟡 Feature	Yellow	Search/sort/pagination, routing, detail views, fight history
🔴 AI	Red	OpenAI SDK, streaming SSE, chat UI, AI Relay integration

Stories in each track are numbered:

Java: STORY-01 through STORY-11
Frontend: TS-01 through TS-07

How to use this site

Use the sidebar to navigate:

Stories — pick a story from the Java Backend or Frontend track
Hints — step-by-step guidance with code examples, open when you need them
Setup — everything you need to get the app running
Facilitator Guide — for the people running the session

Ready? Head to Setup to get the app running, then pick your first story. 🚀