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

Angular Example App is a beginner-friendly, production-ready web application built with Angular 19. It serves as a real-world example showcasing core Angular features such as CRUD operations, authentication, i18n (internationalization), lazy loading, and signals.
https://github.com/Ismaestro/angular-example-app

angular angular-best-practices angular19 base-project example-project frontend javascript real-world-app scalable-architecture web-components web-development

Last synced: 9 months ago
JSON representation

Host: GitHub
URL: https://github.com/Ismaestro/angular-example-app
Owner: Ismaestro
Created: 2016-11-22T17:10:18.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2025-04-22T20:37:26.000Z (9 months ago)
Last Synced: 2025-04-22T21:32:37.071Z (9 months ago)
Topics: angular, angular-best-practices, angular19, base-project, example-project, frontend, javascript, real-world-app, scalable-architecture, web-components, web-development
Language: TypeScript
Homepage: https://angular-example-app.netlify.app
Size: 16.7 MB
Stars: 2,249
Watchers: 106
Forks: 1,244
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

awesome-boilerplate - Angular Example App

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

---

## 🚨 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)

---

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

---

## ✨ Features

| | |
|------------------------|-------------------------------------------------|
| ✅ Angular 19 | 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 |
| ✅ Animations | Smooth transitions with Angular Animations |
| ✅ Clean Architecture | Modular folder structure following best practices |
| ✅ SASS & BEM | Maintainable and scalable styling |
| 🧪 Testing | Unit & e2e testing (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](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}
💻