Buscador de Cómics

⚙️ Consigna

En este proyecto vas a crear una aplicación que permita listar información sobre cualquier tema que te interese, comunicándote con una API pública. Para eso utilizarás una API REST con datos reales, realizarás consultas a la misma pasándole distintos parámetros que permitan personalizar la búsqueda y mostrarás los datos obtenidos como respuesta.

👀 Ejemplo

Puedes ver ejemplos funcionales del proyecto hechos por ex alumnas de Ada:

👍 Criterios de aceptación

Los requisitos mínimos para que el proyecto sea considerado para la entrega son:

  • Debe ser responsive
  • Debe cumplir con las funcionalidades principales listadas en la sección siguiente
  • Debe hacer hacer uso de un preprocesador CSS
  • Debe estar deployado y ser accesible desde una dirección web
  • No se debe trabajar en la rama main. En main sólo van a mergearse las demás ramas, por lo que cada commit de main debería ser el merge de una branch de una funcionalidad terminada
  • Cada funcionalidad que se agregue debe hacerse mediante un PR (Pull Request)

🎛 Funcionalidades principales

  • Si la API lo permite, al entrar a la pagina debemos ver un listado de recursos principales. Los datos deben mostrarse como cards (tarjetas). Por ejemplo: si la API es de pokemones, debemos mostrar una lista de pokemones al azar. Si la API no lo permite, debemos mostrar un solo y una barra de busqueda.
  • Si la API lo permite, se debe permitir realizar una búsqueda de recursos.
    • Si la API lo permite, estos recursos deben ofrecerse ordenados (cambiando el sort desde la API)
    • Si la API ofrece búsquedas pero no sorting, se debe implementar un sorting desde el front (por ejemplo, de la A-Z o Z-A).
    • Si la API brinda la información, se debe mostrar el total de resultados
  • Se debe mostrar la información detallada de un recurso (al clickear sobre el mismo). La busqueda debe desaparecer y solo vemos los detalles del recurso. Con la barra de navegacion (navbar) podemos volver a la busqueda.

En resumen, en tu web el usuario debe poder:

  • listar recursos
  • ver detalles de un recurso
  • buscar un recurso

Si tenes dudas de cómo hacerlo en tu API elegida, consultá con tus docentes!

💪 Desafíos extra (opcionales)

  • Debe contar con un paginado. Si la API no lo incluye, se debe agregar desde el front.
    • Se debe mostrar 20 resultados por página
    • Se debe poder ir a la primera página
    • Se debe poder ir a la última página
    • Se debe poder ir a la página siguiente
    • Se debe poder ir a la página anterior
    • Se deben deshabilitar los botones correspondientes cuando no puedan ser utilizados (por ejemplo, si se está en la última página, no se debe poder utilizar el botón de ir a la última página ni el de avanzar página)
  • Agregar la cantidad de páginas y la p´agina actual en el paginado
  • Agregar la posibilidad de ir a una página específica (mediante un select)
  • Agregar modo oscuro

📝 Criterios de evaluación

  • Menos de 6 (No aprobado)
  • 6 (Aprobado)
    • Respeta la consigna
    • Respeta el diseño dado
    • Respeta el funcionamiento
    • Responsive funciona correctamente
  • 7 (Bueno)
    • HTML semántico
    • Código bien indentado
    • Buenos nombres de clases
    • Buenos nombres de funciones y variables
    • Uso de variables (SASS)
  • 8 (Muy bueno)
    • Buena estructura y separación de archivos (SASS)
    • Correcto uso de estilos anidados (SASS)
    • Nombres de branchs adecuados
  • 9 (Muy bueno)
    • Componentización de estilos (SASS)
    • Funciones pequeñas
    • Lógica clara y simple
    • Separación clara de manejo de datos y visualización
  • 10 (Excelente)
    • Reutilización de lógica / funciones
    • Commits con mensajes adecuados
    • Un PR por funcionalidad, fix o mejora
    • PRs con buenos títulos

🧰 Marvel API

La API de ejemplo para este proyecto es la de Marvel Cómics.

Una vez que nos registramos, tenemos que agregar los dominios desde los que vamos a estar utilizando la API en la sección de Your authorized referrers

  • Para trabajar de forma local, hay que agregar 127.0.0.1* y localhost
  • Una vez que deployamos el proyecto, tenemos que agregar la URL, por ejemplo: adacomics.netlify.com
  • Para hacer pruebas en la documentación interactiva, tenemos que agregar developer.marvel.com (opcional)

Para evitar problemas con CORS, se recomienda correr el proyecto usando la extensión Live Server de VSCode

Edit this page