IMG_bank

Buscador de imágenes con diseño sencillo y limpio centrado en mantener el foco en las imágenes.

🔥 Motivación

Este proyecto se hace con el fin de practicar el consumo de una API REST, en este caso la JSON API de Unsplash, se realiza un scroll infinito, se extrae dinámicamente la paleta de colores de las imágenes y permite copiar el código HEX a portapapeles.

DEMO IMG_bank

Tecnologías

El proyecto es creado con:

• Node: 16.6.2
• react: 17.0.2
• react-helmet: 6.1.0
• react-masonry-css: 1.0.16
• use-image-color: 0.0.9
• vercel: 24.0.0
• wouter: 2.8.0-alpha.2
• Unsplash JSON API
• HTML, CSS y JavaScript

Estado del proyecto

El proyecto se encuentra en una versión inicial de lo que se espera como producto final. A continuación se en lista las funcionalidades que posee:

• Listado por temas
• Listado por colecciones
• Búsqueda por palabra clave
• Paleta de color
• Copiar a portapapeles
• Adaptar el diseño para mostrar imágenes de cualquier orientación
• Agregar filtros
• Agregar animaciones
• Más interacción con la API

Instalación

Sigue estos pasos para correr localmente el proyecto

1. Clona este repositorio usando git clone o descargando el ZIP.
2. Ve a la carpeta del proyecto cd image_bank.
3. Instala las dependencias con npm install.
4. Configura tus variables de entorno en un archivo .env, en este archivo debes colocar el access key que te da Unsplash.
5. Corre en ambiente local ejecutando npm start.
6. Disfruta de IMG_bank 😊.

Mensaje de la desarrolladora

Si llegaste hasta aquí por favor trae más ☕ y 🍪.

Sígueme en