https://github.com/ismaestro/angular-example-app

Angular 19 Example App + i18n
https://github.com/ismaestro/angular-example-app

angular base-project example-project

Last synced: 8 days ago
JSON representation

Angular 19 Example App + i18n

Host: GitHub
URL: https://github.com/ismaestro/angular-example-app
Owner: Ismaestro
Created: 2016-11-22T17:10:18.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2025-04-10T09:00:11.000Z (about 1 year ago)
Last Synced: 2025-04-10T10:41:07.687Z (about 1 year ago)
Topics: angular, base-project, example-project
Language: TypeScript
Homepage: https://angular-example-app.netlify.app
Size: 16.7 MB
Stars: 2,239
Watchers: 106
Forks: 1,235
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

README

🚀 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

```bash
npm i
npm start
```

## Verification & Quality

```bash
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](https://api.netlify.com/api/v1/badges/f593abee-25b9-424a-bd54-6bc52aff7230/deploy-status)](https://app.netlify.com/sites/angular-example-app/deploys)

---

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

---

## 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](https://github.com/Ismaestro/nestjs-example-app).

---

## 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](https://github.com/Ismaestro/angular-example-app/issues/new) 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
💻