# Extended Tutorial

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

{% embed url="<https://codesandbox.io/p/devbox/bold-cache-cyn542?embed=1>" %}

## 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](https://docs.aurelia.io/getting-started/quick-start-guide)
* Basic TypeScript and HTML

## Steps

### Core (Steps 1–4)

1. [Step 1: Project setup + app shell](https://docs.aurelia.io/getting-started/extended-tutorial/step-1-project-setup)
2. [Step 2: Routing + nested layouts](https://docs.aurelia.io/getting-started/extended-tutorial/step-2-routing-and-layout)
3. [Step 3: Overview page + filters + events](https://docs.aurelia.io/getting-started/extended-tutorial/step-3-projects-overview)
4. [Step 4: Detail route + guards](https://docs.aurelia.io/getting-started/extended-tutorial/step-4-project-detail-and-guards)

### Advanced routing (Steps 5–6)

5. [Step 5: Router events + polish](https://docs.aurelia.io/getting-started/extended-tutorial/step-5-router-events-and-polish)
6. [Step 6: Route data + auth roles](https://docs.aurelia.io/getting-started/extended-tutorial/step-6-route-data-and-roles)

### Aurelia packages (Steps 7–10)

7. [Step 7: Internationalization (i18n)](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/getting-started/extended-tutorial/step-7-internationalization.md)
8. [Step 8: Form validation with i18n](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/getting-started/extended-tutorial/step-8-form-validation.md)
9. [Step 9: Dialogs](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/getting-started/extended-tutorial/step-9-dialogs.md)
10. [Step 10: State management](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/getting-started/extended-tutorial/step-10-state-management.md)

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.