π Angular Example App
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
```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
