Es un proyecto realizado para practicar llamadas HTTP, la idea fue crear una página web que llame a una API externa y nos devuelva hechos curiosos en inglés de manera aleatoria.
La empresa Useless Facts quiere desarrollar la parte front-end de una aplicación que devuelve hechos curiosos que a nadie le importan, la idea es que dentro de la página principal, podamos ver cada hecho curioso que nos devuelve la API https://uselessfacts.jsph.pl/ y si nos gusta un hecho curioso, lo podamos guardar dentro de un espacio favorito en la misma página principal.
A continuación se detallan los pasos para la instalación:
git clone https://github.com/mgblanco10/CuriousFacts
No es necesacio instalar nada para ver esta aplicación, sin embargo se realizarón test y para verlos si requiere instalación, los mismos fueron realizados con Jest
- npm init -y
- npm run test
- npm test -- --coverage
Las consultas de prueba sobre la API fueron realizadas con POSTMAN
En caso de necesitar más información puede referirse a
Funcionalidad 1
: Empezar e información de como funciona.Funcionalidad 2
: Llamar a la api para optener un hecho curioso.Funcionalidad 2a
: Mostrar el hecho curioso llamado y dejar de mostrar el hecho curioso cuando se llame a uno nuevo.Funcionalidad 3
: Tener la funcionalidad de agregar un hecho curioso a una lista de favoritos.Funcionalidad 4
: Poder eliminar el hecho curioso de la lista de favoritos.
Una vez entramos en la aplicacion, brinda la bienvenida al usuario y la funcionalidad de empezar explicando brevemente como funciona.
Cuando empezamos nos brinda un recuadro donde se guardará nuestra lista de hechos curiosos favoritos, al inicio el mismo estrá vacio.
En la parte abajo nos muestra el hecho curioso random que cambia al presionar el botón, el mismo aparece junto con una estrella para poder agregar el hecho a nuestra lista de favoritos de así quererlo.
También nos permite eliminar de la lista el hecho curioso cuando así lo queramos.
Enlace al diseño Atomos en Figma
Enlace al diseño Moleculas en Figma
Enlace al diseño Organismos en Figma
Enlace al diseño Versión Tablet en Figma de la página inicial
Enlace al diseño Versión Tablet en Figma de la página con las funcionalidades
Enlace al diseño Versión Desktop en Figma de la página inicial
Enlace al diseño Versión Desktop en Figma de la página con las funcionalidades