Este proyecto trata de una SPA (Single Page Application), en la que se utiliza React, Redux, Express, y una API (giphy) para obtener la info en la web principalmente. En la app se pueden hacer consultas a la API, guardar y remover de favoritos.
Durante el proyecto, se usaron las sigs tecnologías:
- Node v12.21.0
- Npm v7.20.3
- Express v4.17.1
- Firefox 93.0
- Brave 1.30.87
Y muchas más dependencias, consultar los package.json de la ruta /api y /client
- Clonar o forkear el repositorio
- Obtener una api-key desde giphy
Crear un archivo .env en la carpeta /api con los sigs parámetros:
API_KEY=api-key
Una vez realizado, ya puede realizar npm install en la carpeta API, para que se instalen todas las dependencias necesarias.
Para poner en línea el servidor, ejecutar npm start .
Para el front no se requieren de configuraciones adicionales. Ejecutar npm install en la carpeta Client y luego npm start para poner en línea el servidor web.
Pantalla principal de la app. Se muestran los 25 gifs que se encuentran en trending en el momento, botones de favoritos y trending, para cambiar entre módulo, barra de búsqueda, y botones con paleta de colores en la esquina izquierda superior.
Funcionalidad de búsqueda. Devuelve 25 resultados por búsqueda de la palabra ingresada. Se pueden agregar a favoritos.
Funcionalidad de favoritos. Se pueden guardar o quitar favoritos, tanto sea de trending como de los resultados de la búsqueda, no hay límite. Los favoritos se mantienen mientras se esté en la web, si se recarga se reinician.
Funcionalidad de colores. Se pueden seleccionar 3 tipos de paleta (Dark, White y Purple). El cambio se aplica a todos los elementos.
La web esta configurada para funcionar responsivamente.