4Geeks logo
4Geeks logo

Courses

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

IngresarEmpezar
← Volver a Proyectos

Blog de Starwars

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

16 hrs

Tecnologías

La fuerza es fuerte en este ejercicio....

Vamos a construir una versión minimalista del Banco de datos de Star Wars con una función React o lista de favoritos.

!Aquí hay un Demo!

Starwars Demo

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react flux boilerplate usando una herramienta de aprovisionamiento 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:

https://github.com/4GeeksAcademy/react-hello-webapp

👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificació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 comandos add, commit y push desde la terminal de git.

📝 Instrucciones

  1. Usa componentes de Bootstrap, no necesitas casi CSS personalizado.
  2. Tómate un tiempo para comprender la API SWAPI.tech, esta será nuestra fuente de información, estaremos consumiendo esta API.
  3. Busca personas, vehículos y planetas SWAPI y muéstralos en tu aplicación.
  4. Declara un array de favoritos en tu tienda central y permite que el usuario agregue o elimine favoritos.

Construyendo la red de personajes y planetas.

  • Crear una aplicación web React que enumera personas, vehiculos y planetas entidades proporcionado por el SWAPI.

Nota: por favor utiliza swapi.tech y no swapi.dev porque la segunda esta dando problemas útimamente.

Construyendo una vista de detalles para el personaje o el planeta

  • Cada entidad debe tener una breve descripción (Tarjeta Bootstrap) y una vista de detalles (Componentes Bootstrap):

Importante: El SWAPI no proporciona las imágenes, puedes usar marcadores de posición o evitar las imágenes por completo. El enfoque de este ejercicio es practicar fetch, router y context; puedes enfocarte en un tema del color 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 entrega la por el SWAPI (verifica los documentos y / o las respuestas de json).

Leer más tarde o la funcionalidad de favoritos

Implementa una funcionalidad de lectura posterior, es decir, un botón que permita al usuario "guardar" el elemento (personaje, vehículo o planeta) en una lista especial. Esta lista se mostrará en la parte inferior de la página de inicio, se asemeja a la lista principal, pero solo muestra los elementos "guardados".

Uso de Context

Para asegurarse de que el usuario pueda "guardar" el elemento, debe implementar una acción a la que se pueda acceder desde cualquier lugar dentro de la aplicación.

😎 ¿Te sientes seguro?

Las siguientes funciones no son necesarias para la solución final, pero puede desarrollarlas si te sientes lo suficientemente seguro:

  • + 1 Evita que el sitio web haga Fetch a la API de Startwars nuevamente si se actualiza (puedes usar el almacenamiento local para guardar la tienda en el navegador local).
  • + 3 Implementa una barra de búsqueda con "autocompletar" para Personajes y Planetas. Cuando haces clic en autocompletar, debería llevarte a la página Personaje o Planeta.

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 Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

16 hrs

Tecnologías