🚀 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

npm i
npm start

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 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 and also with best practices (POM)
✅ Unit Tests	Using Vitest with high coverage (>95%)
✅ Lighthouse	Verifying web performance with defined thresholds
✅ Modern Quality	ESLint, Prettier, Stylelint and Husky

---

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.