https://github.com/mavadev/react_gif-expert-app
Aplicación para buscar GIFs usando la API de GIPHY, con visualización de resultados y indicador de carga.
https://github.com/mavadev/react_gif-expert-app
css jest-tests react react-loading
Last synced: 2 months ago
JSON representation
Aplicación para buscar GIFs usando la API de GIPHY, con visualización de resultados y indicador de carga.
- Host: GitHub
- URL: https://github.com/mavadev/react_gif-expert-app
- Owner: mavadev
- Created: 2024-09-03T20:50:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-06T05:20:06.000Z (almost 2 years ago)
- Last Synced: 2025-03-13T15:43:49.179Z (over 1 year ago)
- Topics: css, jest-tests, react, react-loading
- Language: JavaScript
- Homepage: https://git-search-mavadev.netlify.app/
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Búsqueda de GIFs con API de GIPHY
Esta aplicación, desarrollada en React, permite buscar GIFs utilizando la API de GIPHY. Los usuarios pueden realizar búsquedas en tiempo real mediante un buscador interactivo, y visualizar los GIFs coincidentes en una interfaz dinámica y adaptable a diferentes dispositivos.
## :pushpin: Características principales:
- **Buscador de GIFs:** Permite a los usuarios escribir el nombre o palabras clave relacionadas al GIF que desean buscar.
- **Visualización dinámica:** Muestra automáticamente los GIFs que coincidan con la búsqueda en formato de cuadrícula en la parte inferior de la página.
- **Indicador de carga:** Muestra una animación de carga mientras se obtienen los GIFs desde la API, informando al usuario que los resultados están en proceso de carga.
- **Responsive Design:** La interfaz se adapta a diferentes tamaños de pantalla, desde dispositivos móviles hasta escritorio.
- **Interfaz sencilla y amigable:** El diseño minimalista facilita la interacción del usuario, enfocándose en la funcionalidad de búsqueda.
## :dart: Instalación
Para instalar y ejecutar la aplicación, sigue estos pasos:
1. Clona el repositorio usando el comando:
```bash
git clone https://github.com/mavadev/react_gif-expert-app.git
2. Navega al directorio del proyecto:
```bash
cd react_gif-expert-app
3. Instala las dependencias:
```bash
npm install
4. Ejecuta la aplicación:
```bash
npm run dev
La aplicación se iniciará en ```http://localhost:3000``` en tu navegador.
## :art: Interfaz de Usuario
La aplicación está diseñada para ser responsive, adaptándose a diferentes tamaños de pantalla.
A continuación se muestran ejemplos de la interfaz en diferentes dispositivos:
| Vista PC | Vista Móvil |
|:---------:|:------------:|
|  |  |