GitHub - Ismaestro/angular-example-app: Angular Example App is a beginner-friendly, production-ready web application built with Angular 21. It serves as a real-world example showcasing core Angular features such as CRUD operations, authentication, i18n, lazy loading, and signals.

Your all-in-one real-world Angular starter — built for learning, productivity, and scaling.

Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more.

🔥 Live Demo

Why This Project?

Whether you're just starting with Angular or looking for a solid base for your next app, this project has you covered.

✅ Beginner-friendly: Clean code, best practices, and detailed structure.
✅ Production-ready: Real APIs, authentication, modular architecture.
✅ Feature-rich: Not just a to-do list! Real-world logic you’ll use in any serious project.
✅ Made with love: Built by passionate developers, for the community.

Getting Started

Verification & Quality

npm run verify:all      # Run lint, stylelint, tests, build, e2e, and lighthouse
npm run lint           # Run ESLint
npm run stylelint:fix  # Fix SCSS styles
npm run knip           # Run Knip (Unused files and dependencies)
npm run prettier:write # Format all code
npm run test           # Run Unit Tests (Vitest)
npm run test:coverage  # Run Tests with coverage

Live Status

Features


✅ Angular 21	Using latest features (Zoneless, Signals, OnPush)
✅ Internationalization	i18n with English and Spanish
✅ Authentication	JWT-based, real login flow
✅ Routing & Guards	Functional guards with lazy-loaded routes
✅ Responsive Design	Mobile-first layouts with Flexbox and Grid
✅ APIs	Example integration with the PokeAPI
✅ Shoelace Components	Accessible and modern UI components
✅ NgOptimizedImage	Fast image loading with Angular's directive
✅ SSG & Prerendering	Static Site Generation for index and Pokémon pages
✅ Animations	Smooth transitions with Angular Animations
✅ Clean Architecture	Modular folder structure following best practices
✅ SASS & BEM	Maintainable and scalable styling
✅ Tests E2E	Using Playwright (POM, Visual, Accessibility)
✅ Unit Tests	Using Vitest with high coverage (>95%)
✅ Lighthouse	Verifying web performance with defined thresholds
✅ Modern Quality	ESLint, Prettier, Stylelint, Husky, Knip, Release

Roadmap

Component & service testing with Vitest!
Implement incremental hydration with Angular 21
Opened issues?

Backend API

This app connects to a real backend powered by NestJS, PostgreSQL, and Prisma, deployed on Fly.io. You can explore the codebase here.

Found a bug? Got an idea?

We love feedback! If something doesn't work or you think of a cool new feature, open an issue or contribute directly with a PR.

Contributors

_{Tom Gamull} 🚇	_mansyaprime 💻	_codeimmortal 💻	_tomasfse 💻	_golu 💻	_rancyr 💻	_{codingphasedotcom} 💻
_Max 💻	_Karajan 💻	_{Carl Chan} 💻	_{Dyeimys Franco Correa} 💻	_{Anartz Mugika Ledo} 💻	_OrlPep 💻

License

This project is licensed under the MIT License.