hub / github.com/Ismaestro/angular-example-app

github.com/Ismaestro/angular-example-app @v21.1.0

repository ↗ · DeepWiki ↗ · release v21.1.0 ↗ · + Follow

274 symbols 716 edges 124 files 1 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

🚀 Angular Example App

Your all-in-one <strong>real-world</strong> Angular starter — built for <strong>learning</strong>, <strong>productivity</strong>, and <strong>scaling</strong>.





Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more.





<a href="https://angular-example-app.netlify.app/" target="_blank"><strong>🔥 Live Demo</strong></a>





<img src="https://res.cloudinary.com/ismaestro/image/upload/angularexampleapp/assets/images/ash-pikachu.png" alt="Demo example" width="150"/>

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

[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, 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.

Core symbols most depended-on inside this repo

setItem

called by 12

src/app/core/providers/local-storage.ts

createErrorAlert

called by 12

src/app/core/services/ui/alert.service.ts

getItem

called by 11

src/app/core/providers/local-storage.ts

navigateWithUserLanguage

called by 6

src/app/core/services/language.service.ts

updateFormState

called by 6

src/app/features/authentication/pages/register/register.component.ts

clear

called by 5

src/app/core/providers/local-storage.ts

cachingInterceptor

called by 5

src/app/core/interceptors/caching.interceptor.ts

removeItem

called by 4

src/app/core/providers/local-storage.ts

Shape

Method 130

Class 94

Function 41

Enum 9

Languages

TypeScript100%

Modules by API surface

vitest-setup.config.ts12 symbols

src/app/features/authentication/authentication.interceptor.ts11 symbols

src/app/features/pokemon/components/pokedex/pokedex.component.ts10 symbols

src/app/features/authentication/pages/register/register.component.ts10 symbols

scripts/lighthouse.mjs10 symbols

src/app/features/pokemon/components/catch-animation/catch-animation.component.ts9 symbols

src/app/features/authentication/services/authentication.service.ts9 symbols

src/app/core/providers/local-storage.ts9 symbols

src/app/core/services/storage/cookie-consent.service.ts8 symbols

src/app/features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component.ts7 symbols

src/app/features/authentication/services/user.service.ts7 symbols

src/app/features/authentication/pages/my-account/my-account.component.ts7 symbols

For agents

$ claude mcp add angular-example-app \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact