Angular Example App

screenshot of Angular Example App
angular
bootstrap

Angular Example App

Angular 17 Example App + Standalone Components + i18n + EsBuild

Overview:

This project is a real app deployed in fly.io, using NestJS, Prisma, Postgres, and GraphQL. It includes various features such as standalone components, functional guards, CRUD operations for heroes, authentication with JWT tokens, internationalization, lazy loading modules, reactive functionalities with elf, and more. The project follows best practices and has a responsive layout with Bootstrap 5.

Features:

  • Standalone components
  • Functional guards
  • CRUD: create, update, and remove heroes
  • Authentication with JWT tokens
  • Internationalization with English and Spanish available
  • Lazy loading modules
  • Reactive functionalities with elf
  • More logical directory structure
  • Following the best practices
  • Responsive layout with Bootstrap 5
  • Use of NgOptimizedImage
  • SASS with BEM styles
  • Example tests for components, services, interceptors, directives, and guards
  • End-to-end tests configuration with Cypress and Cucumber, and Playwright
  • Very strict ESLint rules
angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

apollo
Apollo

Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.