README.md

April 10, 2026 Β· View on GitHub

πŸš€ 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

Demo example


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

Netlify Status


Features

βœ… Angular 21Using latest features (Zoneless, Signals, OnPush)
βœ… Internationalizationi18n with English and Spanish
βœ… AuthenticationJWT-based, real login flow
βœ… Routing & GuardsFunctional guards with lazy-loaded routes
βœ… Responsive DesignMobile-first layouts with Flexbox and Grid
βœ… APIsExample integration with the PokeAPI
βœ… Shoelace ComponentsAccessible and modern UI components
βœ… NgOptimizedImageFast image loading with Angular's directive
βœ… SSG & PrerenderingStatic Site Generation for index and PokΓ©mon pages
βœ… AnimationsSmooth transitions with Angular Animations
βœ… Clean ArchitectureModular folder structure following best practices
βœ… SASS & BEMMaintainable and scalable styling
βœ… Tests E2EUsing Playwright (POM, Visual, Accessibility)
βœ… Unit TestsUsing Vitest with high coverage (>95%)
βœ… LighthouseVerifying web performance with defined thresholds
βœ… Modern QualityESLint, Prettier, Stylelint, Husky, Knip, Release

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
Tom Gamull

πŸš‡
mansyaprime
mansyaprime

πŸ’»
codeimmortal
codeimmortal

πŸ’»
tomasfse
tomasfse

πŸ’»
golu
golu

πŸ’»
rancyr
rancyr

πŸ’»
codingphasedotcom
codingphasedotcom

πŸ’»
Max
Max

πŸ’»
Karajan
Karajan

πŸ’»
Carl Chan
Carl Chan

πŸ’»
Dyeimys Franco Correa
Dyeimys Franco Correa

πŸ’»
Anartz Mugika Ledo
Anartz Mugika Ledo

πŸ’»
OrlPep
OrlPep

πŸ’»

License

This project is licensed under the MIT License.