Este proyecto es un E-Commerce desarrollado en Angular que consume datos de una REST API llamada FakeStore (Fake API). Fue creado como una práctica para mejorar habilidades en Angular, comprendiendo el ciclo de vida de los componentes y utilizando diversas funcionalidades y técnicas avanzadas.
A continuación se muestran algunas capturas de pantalla del proyecto:
Este proyecto ha sido una oportunidad para explorar las nuevas funcionalidades, sintaxis y mejores prácticas de Angular 17, proporcionando una experiencia de aprendizaje valiosa y mejorando las habilidades en el desarrollo de aplicaciones web.
Puedes visualizar la aplicación desplegada aquí.
Algunos de los aspectos más destacados que se aprendieron durante el desarrollo de este proyecto incluyen:
- Prop Drilling: Comprendiendo y aplicando la técnica de prop drilling para la comunicación entre componentes.
- Reactividad con Signals en Servicios: Utilizando signals para lograr reactividad en los servicios y mantener la coherencia de los datos.
- Inyección de Dependencias: Entendiendo el concepto de inyección de dependencias en Angular y su importancia en la creación de aplicaciones escalables y mantenibles.
- Optimización de Código: Utilizando importaciones cortas y eficientes con TypeScript para optimizar el rendimiento del código.
- Pipes Avanzados: Aprendiendo y creando nuevos pipes en Angular para manipular y formatear datos de manera efectiva.
- Directivas: Explorando el uso y la implementación de directivas en Angular para mejorar la interactividad y la funcionalidad de los componentes.
- Enrutamiento y Navegación: Mejorando los procesos de enrutamiento y navegación utilizando RouterLink y RouterLinkActive para una experiencia de usuario fluida.
- Vistas Anidadas: Implementando vistas anidadas para organizar y estructurar la aplicación de manera eficiente.
- Lazy Loading y Code Splitting: Aplicando Lazy Loading y Code Splitting para mejorar el rendimiento y la eficiencia de la aplicación.
- URL Params: Utilizando URL Params para mostrar diferentes categorías de productos en el E-Commerce.
- Despliegue en Vercel: El proyecto está desplegado en Vercel y se puede acceder aquí.
This project was generated with Angular CLI version 17.0.5.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.