Gif Finder

Gif Finder es una aplicación web que te permite buscar y visualizar GIFs utilizando la API de Giphy. Este proyecto está construido con React y utiliza Tailwind CSS para el diseño y la estilización.

Características

• Búsqueda de GIFs.
• Visualización de GIFs en una cuadrícula responsiva.
• Indicador de carga mientras se obtienen los GIFs.

Imagenes

Vista en mobile

Vista en dektop

Vista con busquedas

Instalación

Para correr este proyecto localmente, sigue estos pasos:

1. Clona este repositorio

   git clone https://github.com/sergioAff/gif-finder.git](https://github.com/sergioAff/Gift-Finder.git
   

2. Navega al directorio del proyecto

   cd gif-finder
   

3. Instala las dependencias

   npm install
   

4. Corre la aplicación

   npm start
   

La aplicación estará disponible en http://localhost:3000.

Uso

1. Escribe una categoría en el campo de búsqueda.
2. Presiona Enter para buscar GIFs relacionados con la categoría.
3. Los GIFs aparecerán en una cuadrícula debajo del campo de búsqueda.

Tecnologías Utilizadas

• React
• Tailwind CSS
• Giphy API

Estructura del Proyecto

gif-finder/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── AddCategory.js
│   │   ├── GifGrid.js
│   │   ├── GifItem.js
│   │   ├── LoadingSpinner.js
│   │   └── ...
│   ├── hooks/
│   │   └── useFetchGifs.js
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

API Key

Para utilizar la API de Giphy, necesitas una API Key. Puedes obtener una registrándote en Giphy Developers. Una vez que tengas tu API Key, crea un archivo .env en la raíz del proyecto y agrega tu API Key de la siguiente manera:

REACT_APP_GIPHY_API_KEY=tu_api_key

Contribuir

¡Las contribuciones son bienvenidas! Si tienes una idea para mejorar el proyecto, por favor abre un issue o envía un pull request.

1. Haz un fork del proyecto
2. Crea una nueva rama (git checkout -b feature-nueva-caracteristica)
3. Haz tus cambios (git commit -m 'Agregar nueva característica')
4. Haz un push a la rama (git push origin feature-nueva-caracteristica)
5. Abre un pull request

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para obtener más información.

Contacto

Autor: Sergio Fernández (https://github.com/sergioAff/) Email: sergioadrianfernandez02@gmail.com