LazyMasonry

Optimiza la carga de imágenes con técnicas avanzadas y gestión eficiente del estado, integrando bibliotecas populares y configuraciones personalizadas para el consumo de APIs.

Características

• 📷 Carga diferida lazy loading: Mejora el rendimiento cargando solo imágenes en la vista.
• 🏗️ Diseño de masonry layout: Presenta múltiples imágenes de manera atractiva y organizada.
• 🖥️ Diseño responsive: El sitio web funciona correctamente en dispositivos de cualquier tamaño.
• 🔁 Desplazamiento infinito infinite scrolling: Permite cargar más contenido automáticamente.
• 🔄 Manejo del estado global: Usando Zustand, facilita la actualización y acceso a valores de búsqueda.
• 🖇️ Personalización de UI: Con Tailwind CSS, permite ajustes estilísticos específicos.
• 🛠️ Solicitudes HTTP a la API de Unsplash: Configura Axios para buscar imágenes.

Inicio del Proyecto

Requisito previo

• Tener configurado un entorno con Node.js para instalar las dependencias necesarias.

Tip

Bun es una alternativa moderna y eficiente a npm y yarn para la gestión de paquetes en proyectos javascript.

  curl -fsSL https://bun.sh/install | bash

Instalación

• Abre tu terminal o línea de comandos.
• Navega hasta el directorio donde se encuentra el proyecto.
• Ejecuta el siguiente comando para instalar las dependencias.

  bun install

Si estás utilizando herramientas de gestión de paquetes como yarn o npm sustituirlo por bun.

Configuration

package.json.

• Si tu gestor de paquetes es yarn o npm, ajustar la configuración en el archivo package.json.

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

Variable de entorno

• Crear el archivo .env.

    project-root
    ├─ src/
    │   ├─ components/
    │   │   ├─ Header.tsx
    │   │   └─ Spinner.tsx
    │   └─ config/
    │       └─ axios.ts
/*  │
==> ├─ .env
*/  │
    ├─ package.json
    └─ vite.config.js

• Dentro del archivo .env definir las variables de entorno.

  VITE_API_KEY_UNSPLASH=clave-api-key-yyy
  VITE_SERVER_DOMAIN=https://api.dominio.com/

Run

• En el directorio donde se encuentra el proyecto ejecuta el siguiente comando para levantarlo.

• Si tu gestor de paquetes es yarn o npm sustituirlo por bun.

  bun dev

Principales dependencias utilizadas.

• Bun.
• React-Vite.
• TypeScript.
• TailwindCSS.
• Axios.
• Zustand.
• @tanstack/react-query.
• @types/react-lazy-load-image-component.
• react-masonry-css.
• react-infinite-scroll-component.
• react-icons.