Skip to content

adri-suarez/PI-Dogs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Objetivos y funcionalidades de la App

  • Construcción de una App utlizando React, Redux, Node y Sequelize.
  • Afirmar y conectar conceptos.
  • Aprender mejores prácticas.
  • Practicar el workflow de GIT.

Preview actual:

image image image image

Versiones de dependencias:

  • Node: 12.18.3 o mayor
  • NPM: 6.14.16 o mayor
  • react: 17.0.1
  • react-dom: 17.0.1
  • react-router-dom: 5.2.0
  • redux: 4.0.5
  • react-redux: 7.2.3

La idea general es crear una aplicación en la cual se puedan ver distintas razas de perro junto con información relevante de las mismas utilizando la api externa the dog api y a partir de ella poder, entre otras cosas:

  • Buscar perros
  • Filtrarlos / Ordenarlos (sin uso de endpoints de la API sino propios de la App)
  • Agregar nuevos perros

Tecnologías

  • React
  • Redux
  • Express
  • Sequelize - Postgres

Frontend

Desarrollo de una aplicación de React/Redux que contiene las siguientes pantallas/rutas.

Pagina inicial: Landing page con

  • Una imagen de fondo representativa al proyecto
  • Botón para ingresar al home (Ruta principal)

Ruta principal: Contiene

  • Input de búsqueda para encontrar razas de perros por nombre
  • Área donde se verá el listado de razas de perros en forma de "Cards". Mostrando:
    • Imagen
    • Nombre
    • Temperamento
    • Peso
  • Botones/Opciones para filtrar por:
    • Temperamento
    • Raza existente (es decir las que vienen de la API) o agregada por nosotros (creadas mediante el form)
  • Botones/Opciones para ordenar tanto ascendentemente como descendentemente las razas de perro por:
    • Orden alfabético
    • Peso
  • Paginado para ir buscando y mostrando las siguientes razas, mostrando 8 razas por página.

IMPORTANTE: Dentro de la Ruta Principal se muestran tanto las razas de perros traidas desde la API como así también las de la base de datos, pero NO se almacena en la base de datos las razas de perros de la API sino que solamente se pueden guardar aquellas creadas desde el form.

Ruta de detalle de raza de perro: contiene

  • Los campos mostrados en la ruta principal para cada raza (imagen, nombre y temperamento)
  • Altura
  • Peso
  • Años de vida

Ruta de creación de raza de perro: contiene

  • Un formulario controlado con JavaScript con los siguientes campos:
    • Nombre
    • Altura (mínima y máxima)
    • Peso (mínimo y máximo)
    • Años de vida
  • Posibilidad de seleccionar/agregar uno o más temperamentos
  • Botón/Opción para crear una nueva raza de perro

Base de datos

  • Razas:
    • ID *
    • Nombre *
    • Altura *
    • Peso *
    • Años de vida
  • Temperamentos:
    • ID
    • Nombre

La relación entre ambas entidades es de muchos a muchos ya que una raza de perro puede tener varios "temperamentos" en simultaneo y, a su vez, un "temperamento" puede corresponder a múltiples razas de perro distintas.

Backend

Servidor en Node/Express con las siguientes rutas:

IMPORTANTE: No está permitido utilizar los filtrados, ordenamientos y paginados brindados por la API externa, todas estas funcionalidades estan implementadas por mi.

  • GET /dogs:
    • Obtener un listado de las razas de perro
    • Debe devolver solo los datos necesarios para la ruta principal
  • GET /dogs?name="...":
    • Obtener un listado de las razas de perro que contengan la palabra ingresada como query parameter
    • Si no existe ninguna raza de perro mostrar un mensaje adecuado
  • GET /dogs/{idRaza}:
    • Obtener el detalle de una raza de perro en particular
    • Debe traer solo los datos pedidos en la ruta de detalle de raza de perro
    • Incluir los temperamentos asociados
  • POST /dogs:
    • Recibe los datos recolectados desde el formulario controlado de la ruta de creación de raza de perro por body
    • Crea una raza de perro en la base de datos relacionada con sus temperamentos
  • GET /temperaments:
    • Obtener todos los temperamentos posibles
    • En una primera instancia deberán obtenerlos desde la API externa y guardarlos en su propia base de datos y luego ya utilizarlos desde allí

About

{ Individual Project: "Dogs", isFullStack: True }

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published