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
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.
npm i
npm startnpm 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| ✅ 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 |
- Component & service testing with Vitest!
- Implement incremental hydration with Angular 21
- Opened issues?
This app connects to a real backend powered by NestJS, PostgreSQL, and Prisma. You can explore the codebase here.
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.
Tom Gamull 🚇 | mansyaprime 💻 | codeimmortal 💻 | tomasfse 💻 | golu 💻 | rancyr 💻 | codingphasedotcom 💻 |
Max 💻 | Karajan 💻 | Carl Chan 💻 | Dyeimys Franco Correa 💻 | Anartz Mugika Ledo 💻 | OrlPep 💻 |
This project is licensed under the MIT License.