Lista de Contactos usando React & Context

Tecnologías: HTML, CSS, JS, React, React Router y Context.

¡Hola! Es hora de empezar a hacer aplicaciones frontales profesionales. Esta vez Crearemos una pequeña aplicación de gestión de contactos que permitirá a los usuarios: Leer, crear, actualizar y eliminar contactos.

Puedes usar este gif: Compruébalo aquí!

O bien estas imágenes: Imagen 1 y Imagen 2!

🌱 Cómo comenzar este proyecto

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

Recomendamos abrir el react 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.

1. Instala /nodes_modules

$ npm install

1. Ejecuta el servidor webpack development

$ npm run start

Este boilerplate no tiene funcionalidades, pero si tiene el 99.9 % del HTML/CSS que necesitarás en este proyecto, lo que te permitirá enfocarte en las funcionalidades.

Por favor, use el Contexto para este proyecto: La plantilla viene con el Contexto configurado. Verifique la carpeta / store.

Nota: necesitarás codificar todas las funcionalidades.

📝 El proyecto se divide en:

2️⃣ vistas diferentes:

1. Contacto: Contiene la lista de contactos.
2. AddContact: es solo un formulario utilizado para crear o actualizar contactos.

Un componente:

Tarjeta de contacto: muestra solo un contacto.

TO-DO funcionalidades

• Debes agregar el código necesario para que su aplicación maneje los contactos, específicamente:
  • crea,
  • actualiza,
  • y elimina.
• (Opcional) Solicite al usuario una confirmación antes de eliminarla, use el componente modal para eso.

Todas las funcionalidades deben implementarse en el objeto actions (store.js).

Sugerencia: comience con algún contenido ficticio en la tienda (store.js).

Fetch la data desde la API: https://playground.4geeks.com/apis/fake/contact/

Sugerencia: usa Postman para probar los puntos finales de la API antes de codificar.

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.