Technical Documentation: Ismaestro/angular-example-app
ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference
Overview (`README.md`)
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
bash
npm i
npm startVerification & Quality
bash
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 coverageLive 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. 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.
--- METRICS ---
- Files Extracted: 1
- Estimated Token Budget: ~1950 tokens
- Canonical Reference: https://codewiki.google/github.com/Ismaestro/angular-example-app