angular-example-app
<div align="center"> <h1>🚀 Angular Example App</h1> <p> Your all-in-one <strong>real-world</strong> Angular starter — built for <strong>learning</strong>, <strong>productivity</strong>, and <strong>scaling</strong>. <br><br> Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more. <br><br> <a href="https://angular-example-app.ismaestro.com/" target="_blank"><strong>🔥 Live Demo</strong></a> <br><br> <img src="https://res.cloudinary.com/ismaestro/image/upload/angularexampleapp/assets/images/ash-pikachu.png" alt="Demo example" width="150"/> </p> </div> --- ## 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 start ``` ## Verification & 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 coverage ``` --- ## Live Status [](https://app.netlify.com/sites/angular-example-app/deploys) --- ## 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 - [x] Component & service testing with Vitest! - [x] 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](https://github.com/Ismaestro/nestjs-example-app). --- ## 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](https://github.com/Ismaestro/angular-example-app/issues/new) or contribute directly with a PR. --- ## Contributors <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://magicalyak.org"><img src="https://avatars.githubusercontent.com/u/6165889?v=4?s=100" width="100px;" alt="Tom Gamull"/><br /><sub><b>Tom Gamull</b></sub></a><br /><a href="#infra-magicalyak" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/mansya"><img src="https://avatars.githubusercontent.com/u/33461607?v=4?s=100" width="100px;" alt="mansyaprime"/><br /><sub><b>mansyaprime</b></sub></a><br /><a href="#code-mansya" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/codeimmortal"><img src="https://avatars.githubusercontent.com/u/16804408?v=4?s=100" width="100px;" alt="codeimmortal"/><br /><sub><b>codeimmortal</b></sub></a><br /><a href="#code-codeimmortal" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/tomasfse"><img src="https://avatars.githubusercontent.com/u/22914697?v=4?s=100" width="100px;" alt="tomasfse"/><br /><sub><b>tomasfse</b></sub></a><br /><a href="#code-tomasfse" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://golu7679.github.io"><img src="https://avatars.githubusercontent.com/u/55990159?v=4?s=100" width="100px;" alt="golu"/><br /><sub><b>golu</b></sub></a><br /><a href="#code-golu7679" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/microsoft/Secure-Supply-Chain/"><img src="https://avatars.githubusercontent.com/u/90811840?v=4?s=100" width="100px;" alt="rancyr"/><br /><sub><b>rancyr</b></sub></a><br /><a href="#code-v-rr" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="http://www.codingphase.com"><img src="https://avatars.githubusercontent.com/u/26421899?v=4?s=100" width="100px;" alt="codingphasedotcom"/><br /><sub><b>codingphasedotcom</b></sub></a><br /><a href="#code-codingphasedotcom" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/scip92"><img src="https://avatars.githubusercontent.com/u/15237896?v=4?s=100" width="100px;" alt="Max"/><br /><sub><b>Max</b></sub></a><br /><a href="#code-scip92" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/HerbertKarajan"><img src="https://avatars.githubusercontent.com/u/20851191?v=4?s=100" width="100px;" alt="Karajan"/><br /><sub><b>Karajan</b></sub></a><br /><a href="#code-HerbertKarajan" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/carlchandev"><img src="https://avatars.githubusercontent.com/u/34772941?v=4?s=100" width="100px;" alt="Carl Chan"/><br /><sub><b>Carl Chan</b></sub></a><br /><a href="#code-carlchandev" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/dyeimys"><img src="https://avatars.githubusercontent.com/u/4250372?v=4?s=100" width="100px;" alt="Dyeimys Franco Correa"/><br /><sub><b>Dyeimys Franco Correa</b></sub></a><br /><a href="#code-dyeimys" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://anartz-mugika.com/qwik-book/es/"><img src="https://avatars.githubusercontent.com/u/5081970?v=4?s=100" width="100px;" alt="Anartz Mugika Ledo"/><br /><sub><b>Anartz Mugika Ledo</b></sub></a><br /><a href="#code-mugan86" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/OrlPep"><img src="https://avatars.githubusercontent.com/u/171474908?v=4?s=100" width="100px;" alt="OrlPep"/><br /><sub><b>OrlPep</b></sub></a><br /><a href="#orlpep" title="Code">💻</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --> --- ## License This project is licensed under the [MIT License](https://github.com/Ismaestro/angular-example-app/blob/master/LICENSE).