Extended Tutorial

Multi-step Project Pulse tutorial that introduces routing, component communication, and real-world app patterns.

Build a small but realistic app while learning the Aurelia router, component communication, and real-world navigation patterns.

https://codesandbox.io/p/devbox/bold-cache-cyn542?embed=1codesandbox.io

What you will build

• A Dashboard and a Projects area

• Nested routes for Projects (Overview + Activity)

• A project detail view with route parameters

• Filterable lists with query params you can share

• Router events and active navigation styling

• Multi-locale internationalization (i18n)

• Form validation with localized error messages

• Modal dialogs for confirmations and editing

• Centralized state management

Prerequisites

• Completed the Hello World Tutorial

• Basic TypeScript and HTML

Steps

Core (Steps 1–4)

1. Step 1: Project setup + app shell

2. Step 2: Routing + nested layouts

3. Step 3: Overview page + filters + events

4. Step 4: Detail route + guards

Advanced routing (Steps 5–6)

1. Step 5: Router events + polish

2. Step 6: Route data + auth roles

Aurelia packages (Steps 7–10)

1. Step 7: Internationalization (i18n)

2. Step 8: Form validation with i18n

3. Step 9: Dialogs

4. Step 10: State management

If you are new to Aurelia, start with steps 1–4 to learn routing fundamentals. Steps 5–6 cover advanced routing patterns. Steps 7–10 introduce additional Aurelia packages for building production-ready applications.