Angular 13, clásica plataforma de Movie

Dennys J Marquez
2 min readMay 13, 2022

--

Esta es una clásica plataforma de Movie, elaborado en Angular versión 13.3.4 Bootstrap 5 como CSS, posee un sistema de autentificación con auth0, protección de rutas sensibles con canLoad, canActivate, Implementación de Lazy-loading.

Mi perfil en LinkedIn: 💡Dennys Jose Marquez Reyes 🧠 | LinkedIn 👍

Demo: https://angular-movies.onrender.com/

Código fuente CLI: https://github.com/dennysjmarquez/angularStreaming

Código fuente SER : https://github.com/dennysjmarquez/angularStreamingServer

Cliente:

El usuario tiene la posibilidad de ordenar y filtrar los datos, se pueden ordena las películas por nombre, año, y se pueden filtrar por año, película o serie.

Creación de una directiva para controlar el evento keypress y poder limitar a solo números el input que se usa para filtrar por año.

Use el módulo ReactiveFormsModule para poder validar el resultado del input para el filtrado por fechas haciendo uso del FormControl y sus validaciones, Validators.pattern(‘^[0–9]*$’), Validators.maxLength(4), Validators.min(0), Validators.max(new Date().getFullYear()).

Toda está modularizado, cree un Guard para hacer funcionar la protección en el canLoad, ya que el que proporciona auth0 no manda a identificar al usuario si falla el canLoad, pero el que cree para este proyecto si lo hace y se implantó para evitar que se carguen componentes si el usuario no está debidamente identificado, el mismo es redirigido al login en ese caso.

Implemente Unit test (Pruebas Unitarias) jasmine-core”: “~4.0.0”, y probé los resultados de las funciones para ordenar la data, filtrar la data, probé la Subscription para atraer la data de las películas en el servicio usando de spyOn a callFake.

Servidor:

Creado con Node.js y express, protegí la ruta con un middleware que válida un token de auth0, este servidor solo sirve una data de las películas retornando un archivo JSON.

BackEnd image

--

--

Dennys J Marquez

💡 Web Developer FrontEnd ➤ JavaScript ES6 / Angular / React / React Native / LitElement / Vue.js / HTML5 CSS3 Sass 🔥 https://dennysjmarquez.dev/