3omer / angular-example-app

Angular 13 Example App + Angular CLI + i18n + GraphQL

Angular Example App

Example app with Angular 13 + Angular CLI + i18n + Graphql

👏👏🎉🎉🎉🎉👏👏

Base project made with much ❤️. Contains CRUD, advanced patterns, generated library, and much more!



DEMO HERE

Setup

npm i
npm start

Status

Backend

This project is using a real app deployed in heroku, which you can see here. The server is using NestJS, Prisma, Postgres and GraphQL. Please check it out and feel free also to contribute or give me your thoughts.

What's included

• CRUD: create, update and remove heroes with this project!
• Authentication with JWT tokens and js-cookie
• Internationalization with the official i18n. English and Spanish available.
• Lazy loading modules
• Service Workers enabled!
• More logical directory structure
• Basic example library
• Following the best practices!
• Search bar, to look for heroes
• Custom loading page
• Example of Angular Resolver for Hero Detail
• Lazy loading images with ng-lazyload-image
• Modal and toasts (snakbar)!
• Scroll restoration and anchor examples
• Responsive layout (flex layout module)
• SASS (most common used functions and mixins) and BEM styles
• Animations with ng-animate
• Angular Pipes
• Interceptors and Events
• Auth guard for some routes
• Modernizr (browser features detection)
• Browser filter (Bowser) because of IE ^^
• Sentry! (logs every error in the app)
• Google Tag Manager
• ES6 Promises and Observables
• End-to-end tests with Cypress App Actions. Read this!

i18n

This project is using the official internationalization. You can navigate through every language If you want to translate the messages you can use this awesome tool, Tiny Translator.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Creators

Ismael Ramos

• https://github.com/ismaestro

Thanks

Thanks to all contributors and their support.

If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!

Copyright and license

Code and documentation copyright 2021 the authors. Code released under the MIT License.

Enjoy 🤘