Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
La fuerza es fuerte en este ejercicio...
Vamos a construir una versión minimalista del Banco de datos de Star Wars con una funcionalidad de "Read later" o "favoritos".
No clones este repositorio porque vamos a usar una plantilla diferente.
Recomendamos abrir el react flux boilerplate
usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone
.
Este es el repositorio que necesitas abrir o clonar:
1https://github.com/4GeeksAcademy/react-hello-webapp
👉 Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.
💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (
git remote set-url origin <your new url>
) y subiendo el código a tu nuevo repositorio usando los comandosadd
,commit
ypush
desde la terminal de git.
favoritos
en tu central store y permite que el usuario agregue o elimine favoritos.Nota: por favor utiliza swapi.tech y no swapi.dev porque la segunda está dando problemas últimamente.
Importante: La SWAPI no proporciona las imágenes, pero puedes usar https://starwars-visualguide.com para obtener las imágenes. El enfoque de este ejercicio es practicar fetch, router y context. También puedes enfocarte en una paleta de colores y diseño simple para que se vea bien.
Importante 2: no te preocupes si los datos que obtienes de la SWAPI no coinciden con los datos que ves en starwars.com.
Usa toda la información que proporciona la SWAPI (verifica la documentación y/o las respuestas JSON).
Implementa una funcionalidad de "Read later", es decir, un botón que permita al usuario "guardar" el elemento (personaje, vehículo o planeta) en una lista especial. La ubicación de esta lista es a elección, mientras se muestre correctamente (en nuestra demo es un botón en la navbar); esta lista se asemeja a la lista principal, pero solo muestra los elementos "guardados".
Para asegurarse que el usuario pueda "guardar" el elemento, debes implementar una acción a la que se pueda acceder desde cualquier lugar dentro de la aplicación.
Las siguientes funciones no son necesarias para la solución final, pero puedes desarrollarlas si te sientes lo suficientemente seguro:
+1
Evita que el sitio web haga Fetch a la API de Startwars nuevamente si se actualiza la página (puedes usar el almacenamiento local (localStorage
) para guardar la store en el navegador local).+3
Implementa una barra de búsqueda con "autocompletar" para los personajes, planetas y vehículos. Cuando haces clic en autocompletar, debería llevarte a la página detallada del elemento.Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs
Dificultad
intermediate
Duración promedio
16 hrs
Tecnologías
javascript
reactjs