Este proyecto fue creado para llevar el conocimiento de perritos a los usuarios pet lovers. Está consumiento una API de información general sobre razas de perritos descrita de esta manera. Para tener mejor calidad de datos en los valores faltantes de información se asigno un atributo para que no afectará en la visualización de las tarjetas.
dogs: {
bred_for: string,
breed_group: string,
id: number,
image: {
height: number,
id: string,
url: string,
width: number,
},
life_span: string,
name: string,
origin: string,
reference_image_id: string,
temperament: string,
}
Al consumir demasiada información se realiza una paginación sencilla al final de la pagina para navegar por grupo de 10 tarjetas la información. Este componente se realizo con Bootstrap.
El filtro lo realiza por el grupo de raza que se declaro en la API como breed_group y trae la información a pantalla de los perritos que cumplan con el valor filtrado.
Se procura tener buena visualización en dos tipos de pantallas la pantalla movil y la patalla desktop, el proceso de desarrollo se empezó desde la pantalla más pequeña y se modificó para la pantalla más grande.
HTML | CSS | React | Typescript | gh-pages
Abril, 2022