CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar
Tomar examen

Estructura base de un proyecto con Fake Store API

Resumen

Construir una aplicación web que consuma datos reales es uno de los pasos más valiosos para tu portafolio. Aquí aprenderás a montar la estructura base de un proyecto con HTML, CSS y JavaScript que consume la Fake Store API, paginando productos y preparando el terreno para integrarlo después con Parcel.

¿Qué API se usa y cómo se analiza antes de codear?

Antes de escribir una sola línea, conviene revisar la documentación de la Fake Store API (api.escuelajs.co). Esta API devuelve productos con imagen, título y precio, justo lo que necesitas para renderizar tarjetas en una tienda online.

¿Qué es la Fake Store API? Es una API pública pensada para practicar. Devuelve productos, categorías y usuarios falsos para que construyas proyectos sin montar un backend propio.

Tómate el tiempo de leer los endpoints, los parámetros y el formato de respuesta. Ese hábito de leer documentación te diferencia como desarrollador y te permite sacarle ventaja a cualquier servicio que integres después [01:35].

¿Cómo crear la estructura HTML base del proyecto?

En Visual Studio Code basta con escribir html:5 y presionar tabulador para generar el boilerplate completo. Sobre esa base agregas dos piezas clave dentro del <head> y <body> [02:30].

  • Un <link rel="stylesheet" type="text/css" href="styles.css"> para conectar los estilos.
  • Un <main> que contenga un <div id="app" class="main">, donde después inyectarás los productos.
  • Un <script defer type="module" src="index.js"> al final del <body> para cargar la lógica en diferido.

El atributo defer es importante: le indica al navegador que descargue el script en paralelo, pero lo ejecute después de parsear el HTML. Eso evita errores al manipular nodos que aún no existen.

¿Cómo conectar JavaScript con la API usando fetch?

La lógica principal vive en index.js. Aquí cambia el enfoque respecto a proyectos anteriores con Webpack: ya no usas datos locales, ahora pides los productos de forma dinámica a un servidor externo.

El primer paso es obtener la referencia al contenedor del DOM y declarar la URL de la API como constante:

javascript const app = document.getElementById('app'); const API = 'https://api.escuelajs.co/api/v1/products?offset=0&limit=10';

Fíjate en el uso de mayúsculas para API: es una convención que indica que ese valor no debería cambiar durante la ejecución. Es una pista visual para ti y para cualquiera que lea tu código.

¿Para qué sirven offset y limit en la URL?

Los query params offset y limit controlan la paginación. Con offset=0&limit=10 traes los primeros 10 productos. Si necesitas 15, cambias el limit y listo [04:50].

¿Qué hace offset en una API? Indica desde qué posición empezar a traer registros. Con offset=10 saltas los primeros 10 y empiezas desde el siguiente.

Esta paginación es crítica cuando trabajas con catálogos grandes, porque evita que el navegador cargue cientos de productos a la vez y mejora el rendimiento percibido.

¿Por qué usar fetch con async y await?

En este proyecto vas a consumir la API con fetch, la función nativa de JavaScript para hacer peticiones HTTP, combinada con async/await para manejar la asincronía de forma legible.

  • Fetch devuelve una promesa con la respuesta del servidor.
  • Async marca una función como asíncrona, permitiéndote usar await dentro.
  • Await pausa la ejecución hasta que la promesa se resuelva, sin bloquear el hilo principal.

La diferencia con encadenar .then() es de legibilidad: tu código se lee de arriba hacia abajo, casi como si fuera síncrono, lo que facilita depurar y mantener.

¿Cómo organizar los estilos y el portafolio?

Los estilos vienen en un archivo styles.css que puedes copiar desde el repositorio del curso (Git). Pégalos tal cual, pero no te quedes ahí: revisa cada selector, cambia colores, ajusta tipografías y haz tuyo el diseño.

Cada proyecto que construyas es una pieza de tu portafolio. Si lo personalizas con tu criterio visual y agregas pequeñas mejoras, tu trabajo destaca frente a quien solo replica el tutorial al pie de la letra.

Con el HTML montado, los estilos cargados y la constante de la API definida, ya tienes la base para crear la función que manipule el DOM y pinte los productos en pantalla. ¿Qué mejoras pensarías agregarle a este proyecto para diferenciarlo en tu portafolio? Comparte tus ideas en los comentarios.