¡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.

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

npm install

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

npm run start

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

http://localhost:8080/public/

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);

• 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.

• 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).

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.

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.

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

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.

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