🚀 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

🚨 Live Status

🌍 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.

✨ Features


✅ Angular 20	Using the latest version
✅ 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 main 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)
✅ Lighthouse	Verifying web performance with defined thresholds
🧪 Testing	Unit (coming soon!)

🧩 Roadmap

Component & service testing with Angular Testing Library
End-to-End tests with Playwright

🐛 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 💻