Buscador de imágenes con diseño sencillo y limpio centrado en mantener el foco en las imágenes.
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.
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
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
Sigue estos pasos para correr localmente el proyecto
- Clona este repositorio usando
git cloneo descargando el ZIP. - Ve a la carpeta del proyecto
cd image_bank. - Instala las dependencias con
npm install. - Configura tus variables de entorno en un archivo .env, en este archivo debes colocar el access key que te da Unsplash.
- Corre en ambiente local ejecutando
npm start. - Disfruta de IMG_bank 😊.
Si llegaste hasta aquí por favor trae más ☕ y 🍪.
Sígueme en
