Cat Gallery App 🐱

Una aplicación interactiva construida con React y Vite que consume la API de TheCatAPI para mostrar una galería de fotos de gatos de forma dinámica.

Descripción

Este proyecto es un ejemplo educativo que demuestra el uso de hooks fundamentales de React como useState, useEffect y useRef para:

• Gestionar el estado de la aplicación
• Realizar llamadas a APIs externas
• Manejar estados de carga y errores
• Optimizar renders innecesarios

Características

• 🐈 Carga dinámicas de fotos de gatos desde TheCatAPI
• ⚡ Interfaz rápida y responsiva con Vite
• 🎨 Diseño limpio con CSS modular
• 📱 Galería en grid para visualizar múltiples gatos
• ⚠️ Manejo de estados: carga, error y datos
• 🔍 Logging en consola para entender el flujo de ejecución

Tecnologías

• React 19.2 - Librería de UI
• Vite 7.2 - Herramienta de construcción
• React Router DOM 7.12 - Enrutamiento (preparado para expansión)
• ESLint - Linter para código limpio

Instalación

1. Clona el repositorio
2. Instala las dependencias:

npm install

Scripts Disponibles

• npm run dev - Inicia el servidor de desarrollo con HMR
• npm run build - Construye la aplicación para producción
• npm run preview - Vista previa de la build de producción
• npm run lint - Ejecuta ESLint para verificar el código

Estructura del Proyecto

src/
├── App.jsx           # Componente principal, maneja el estado y API
├── App.css           # Estilos globales
├── main.jsx          # Punto de entrada
├── index.css         # Estilos base
├── components/
│   ├── CatList.jsx   # Componente que muestra la galería de gatos
│   └── CatList.css   # Estilos de la galería
└── assets/           # Recursos estáticos

Cómo Funciona

1. Al cargar la app, el useEffect se ejecuta una sola vez (cuando el componente se monta)
2. Se realiza una petición a la API de gatos para obtener 10 imágenes
3. Durante la carga, se muestra el mensaje "Cargando gatitos..."
4. Si hay error, se muestra un mensaje de error
5. Cuando los datos llegan, se renderiza el componente CatList con las fotos en una galería

Conceptos de React Demostrados

useEffect

• Ejecutar código cuando el componente se monta
• Dependencias y cuándo se re-ejecuta el efecto

useState

• Gestión de estado para datos (info), carga (loading) y errores (error)

useRef

• Referencia mutable para rastrear si se ha ejecutado un log (hasLoggedRef)
• No causa re-render al cambiar su valor

API Utilizada

La aplicación consume:

• Endpoint: https://api.thecatapi.com/v1/images/search
• Parámetro: limit=10 (obtiene 10 imágenes aleatorias)
• Respuesta: Array de objetos con propiedades como id, url, width, height

Notas de Desarrollo

• Los comentarios en el código incluyen ejemplos alternativos de otros hooks
• El código está pensado para propósitos educativos
• Los mensajes en consola ayudan a entender cuándo se renderiza y ejecuta el código