platzi / js-challenge

PlatziStore: Tu Comercio en Línea

¡Bienvenido a PlatziStore! Somos una plataforma de comercio en línea con una amplia variedad de productos esperando ser explorados. A medida que nos preparamos para nuestro lanzamiento oficial, hemos identificado varios desafíos en nuestra aplicación que necesitan ser abordados.

Desde pequeños bugs hasta tareas incompletas y nuevos recursos por implementar, estamos en busca de soluciones que garanticen una experiencia fluida para nuestros usuarios.

Configuración Inicial

Instalación

Para comenzar, necesitas instalar las dependencias del proyecto con el siguiente comando:

npm install

Ejecución

Una vez que hayas instalado todo, puedes ejecutar la aplicación con:

npm run start

Depuración

Para acceder a la interfaz de depuración, visita:

http://localhost:8080/public/

Entendiendo la Estructura

Documentación Básica

Aquí hay una breve descripción de algunos de los elementos clave:

• $app: Es la variable donde renderizaremos nuestra aplicación.
• $observe: Representa un elemento del DOM que será observado.
• API: Es una constante que utiliza la FakeAPI de Platzi para obtener datos.

const $app = document.getElementById("app");
const $observe = document.getElementById("observe");
const API = "https://api.escuelajs.co/api/v1/products";

Tenemos una función llamada getData encargada de hacer solicitudes Fetch a una API y de construir un nuevo elemento en el DOM:

const getData = (api) => {
  // ... 
};

Además, contamos con una función loadData que obtiene información de los productos:

const loadData = () => {
  // ...
};

Y, por último, se encuentra la lógica para el Intersection Observer:

const intersectionObserver = new IntersectionObserver(
  (entries) => {
    // ...
  },
  {
    rootMargin: "0px 0px 100% 0px",
  }
);

intersectionObserver.observe($observe);

Desafíos Técnicos

Desafío 1: Integración con la API

• Estudia y analiza la estructura de la API: fakeapi.platzi.com.
• Implementa la API de productos, iniciando desde el producto 5 y obteniendo los siguientes 10 productos.
• Usa el localStorage para guardar la posición inicial ("pagination"). Asegúrate de actualizar esta posición con cada nueva petición para traer los siguientes productos.
• Diseña la lógica para implementar un scroll infinito utilizando el Intersection Observer.

Desafío 2: Presentación de Productos

• Diseña una estructura HTML adecuada para mostrar cada producto.
• Crea un artículo con la clase "Card" que muestre la imagen, título y precio de un producto:

<article class="Card">
  <img src="imagen.png" />
  <h2>
    Producto
    <small>$ Precio</small>
  </h2>
</article>

• Asegúrate de que el archivo index.html tenga los elementos mínimos de SEO (por ejemplo, title = "PlatziStore" y una descripción adecuada).

Desafío 3: Experiencia al Recargar

Al cerrar o recargar la pestaña, es esencial que los usuarios vean los primeros 10 productos:

• Muestra los primeros 10 productos.
• Limpia el localStorage.
• Refactoriza la función loadData() para usar Async/Await.

Desafío 4: Finalización de la Paginación

Dado que la API "fakeAPI" proporciona 200 productos, utilizaremos la paginación tal como se describe en su documentación. Al llegar al final de la lista de productos:

• Muestra el mensaje: "Todos los productos han sido obtenidos".
• Termina la observación del elemento "observe" con el Intersection Observer.

Desafío Bono: Despliegue

¡Pon tu solución en vivo! Despliega la aplicación en uno de los siguientes servicios: GitHub Pages, Netlify o Vercel.

Colabora con Nosotros

Si sientes que puedes aportar o mejorar algún aspecto del proyecto, ¡te animamos a hacerlo! Haz un "Fork" de este proyecto, resuelve los desafíos y envía un "Pull Request" a js-challenge.

Licencia

El proyecto js-challenge está bajo la licencia MIT. ¡Úsalo con confianza!

js-challenge's Issues

Notas sobre los tests de Cypress fallando.

• Los test revisan que haya localStorage, pero en el 3er problema se pide que se elimine.
• Los test buscan una clase "Items", pero ni las instrucciones ni el código base dicen nada al respecto.

Se deben corregir los test o estamos haciendo algo mal en la prueba?

Los tests en Github me fallan y en local me funcionan

Hola quería consultar porque estoy teniendo un problema a la hora de correr los tests, cuando los corro localmente en mi computadora me pasan (adjunto captura), pero cuando los corre Github me falla el cuarto y no entiendo porque.

Desde ya muchas gracias y disculpa las molestias.

¡Un saludo!

Octavio.

No comprendo los test

Estoy tratando de hacer los test pero salen errores, de que funciona funciona por que lo tengo hasta ya en vercel, estoy intentando con códigos de compañeros que fueron aceptados (Localmente) y ni así pasa los tests...

Documentacion?

No sé si sea una cosa sólo para estudiantes de algún curso específico de platzi, pero la descripción dice que usemos la documentación de la fakeAPI, pero no hay ningún link a dicha documentación.

Que elementos hay que renderizar?

En el primer render hay que utilizar los primeros 10 elementos del array. Suponiendo que cada vez que se activa Interaction Observer se renderizen 10 elementos más, habría que renderizar los elementos array.slice(5, 15) o los elementos array.slice(15, 25)