{"id":13704865,"url":"https://github.com/Ismaestro/angular-example-app","last_synced_at":"2025-05-05T12:32:33.693Z","repository":{"id":40698502,"uuid":"74495563","full_name":"Ismaestro/angular-example-app","owner":"Ismaestro","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-22T20:37:26.000Z","size":17508,"stargazers_count":2249,"open_issues_count":0,"forks_count":1244,"subscribers_count":106,"default_branch":"master","last_synced_at":"2025-04-22T21:32:37.071Z","etag":null,"topics":["angular","angular-best-practices","angular19","base-project","example-project","frontend","javascript","real-world-app","scalable-architecture","web-components","web-development"],"latest_commit_sha":null,"homepage":"https://angular-example-app.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ismaestro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-11-22T17:10:18.000Z","updated_at":"2025-04-22T20:37:30.000Z","dependencies_parsed_at":"2023-12-07T11:39:43.518Z","dependency_job_id":"bcd37480-bb07-43a9-937e-0ee95674fddb","html_url":"https://github.com/Ismaestro/angular-example-app","commit_stats":{"total_commits":811,"total_committers":24,"mean_commits":"33.791666666666664","dds":0.345252774352651,"last_synced_commit":"e6cb76f78d7ae394e14ddaa00ce23615fc578301"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismaestro%2Fangular-example-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismaestro%2Fangular-example-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismaestro%2Fangular-example-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismaestro%2Fangular-example-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ismaestro","download_url":"https://codeload.github.com/Ismaestro/angular-example-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252497670,"owners_count":21757657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-best-practices","angular19","base-project","example-project","frontend","javascript","real-world-app","scalable-architecture","web-components","web-development"],"created_at":"2024-08-02T22:00:21.763Z","updated_at":"2025-05-05T12:32:33.684Z","avatar_url":"https://github.com/Ismaestro.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e🚀 Angular Example App\u003c/h1\u003e\n\n  \u003cp\u003e\n    Your all-in-one \u003cstrong\u003ereal-world\u003c/strong\u003e Angular starter — built for \u003cstrong\u003elearning\u003c/strong\u003e, \u003cstrong\u003eproductivity\u003c/strong\u003e, and \u003cstrong\u003escaling\u003c/strong\u003e.\n    \u003cbr\u003e\u003cbr\u003e\n    Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more.\n    \u003cbr\u003e\u003cbr\u003e\n    \u003ca href=\"https://angular-example-app.netlify.app/\" target=\"_blank\"\u003e\u003cstrong\u003e🔥 Live Demo\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr\u003e\u003cbr\u003e\n    \u003cimg src=\"https://res.cloudinary.com/ismaestro/image/upload/angularexampleapp/assets/images/ash-pikachu.png\" alt=\"Demo example\" width=\"150\"/\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## 📦 Why This Project?\n\nWhether you're just starting with Angular or looking for a solid base for your next app, this project has you covered.\n\n- ✅ **Beginner-friendly**: Clean code, best practices, and detailed structure.\n- ✅ **Production-ready**: Real APIs, authentication, modular architecture.\n- ✅ **Feature-rich**: Not just a to-do list! Real-world logic you’ll use in any serious project.\n- ✅ **Made with love**: Built by passionate developers, for the community.\n\n---\n\n## 🛠️ Getting Started\n\n```bash\nnpm i\nnpm start\n```\n\n---\n\n## 🚨 Live Status\n\n[![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)\n\n---\n\n## 🌍 Backend API\n\nThis 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).\n\n---\n\n## ✨ Features\n\n|                        |                                    |\n|------------------------|-------------------------------------------------|\n| ✅ Angular 19           | Using the latest version                        |\n| ✅ Internationalization | i18n with English and Spanish                   |\n| ✅ Authentication       | JWT-based, real login flow                      |\n| ✅ Routing \u0026 Guards     | Functional guards with lazy-loaded routes       |\n| ✅ Responsive Design    | Mobile-first layouts with Flexbox and Grid      |\n| ✅ APIs                 | Example integration with the PokeAPI            |\n| ✅ Shoelace Components  | Accessible and modern UI components             |\n| ✅ NgOptimizedImage     | Fast image loading with Angular's directive     |\n| ✅ Animations           | Smooth transitions with Angular Animations      |\n| ✅ Clean Architecture   | Modular folder structure following best practices |\n| ✅ SASS \u0026 BEM           | Maintainable and scalable styling               |\n| 🧪 Testing             | Unit \u0026 e2e testing (coming soon!)               |\n\n---\n\n## 🧩 Roadmap\n\n- [ ] Component \u0026 service testing with Angular Testing Library\n- [ ] End-to-End tests with Playwright\n\n---\n\n## 🐛 Found a bug? Got an idea?\n\nWe 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.\n\n---\n\n## 🤝 Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://magicalyak.org\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6165889?v=4?s=100\" width=\"100px;\" alt=\"Tom Gamull\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTom Gamull\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-magicalyak\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/mansya\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/33461607?v=4?s=100\" width=\"100px;\" alt=\"mansyaprime\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003emansyaprime\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-mansya\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/codeimmortal\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16804408?v=4?s=100\" width=\"100px;\" alt=\"codeimmortal\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ecodeimmortal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-codeimmortal\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/tomasfse\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22914697?v=4?s=100\" width=\"100px;\" alt=\"tomasfse\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003etomasfse\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-tomasfse\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://golu7679.github.io\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/55990159?v=4?s=100\" width=\"100px;\" alt=\"golu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egolu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-golu7679\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/microsoft/Secure-Supply-Chain/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/90811840?v=4?s=100\" width=\"100px;\" alt=\"rancyr\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erancyr\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-v-rr\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.codingphase.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/26421899?v=4?s=100\" width=\"100px;\" alt=\"codingphasedotcom\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ecodingphasedotcom\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-codingphasedotcom\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/scip92\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/15237896?v=4?s=100\" width=\"100px;\" alt=\"Max\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMax\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-scip92\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/HerbertKarajan\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20851191?v=4?s=100\" width=\"100px;\" alt=\"Karajan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKarajan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-HerbertKarajan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/carlchandev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/34772941?v=4?s=100\" width=\"100px;\" alt=\"Carl Chan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCarl Chan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-carlchandev\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/dyeimys\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4250372?v=4?s=100\" width=\"100px;\" alt=\"Dyeimys Franco Correa\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDyeimys Franco Correa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-dyeimys\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://anartz-mugika.com/qwik-book/es/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5081970?v=4?s=100\" width=\"100px;\" alt=\"Anartz Mugika Ledo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnartz Mugika Ledo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#code-mugan86\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/Ismaestro/angular-example-app/blob/master/LICENSE).\n","funding_links":[],"categories":["Javascript","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIsmaestro%2Fangular-example-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIsmaestro%2Fangular-example-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIsmaestro%2Fangular-example-app/lists"}