4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

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.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Volver a Proyectos

Clone de Meetup.com utilizando react.js

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

Video de solución

No disponible

Duración promedio

36 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast

Tecnologias: HTML, CSS, JS, React, React Router and React Context API.

Meetup.com Clone

👆Este ejemplo esta optimizado para grupos de dos o máximo tres estudiantes.

¡Hola! Es hora de empezar a hacer aplicaciones frontales profesionales. Esta vez Crearemos una pequeña aplicación de Meetup.com que permita a los usuarios navegar y confirmar eventos, muy similar a cómo funciona Meetup.com.

📹Video completo de como debe funcionar la aplicacion aqui.

  • Event's son la entidad central en el sistema, la vista principal (Home) tendrá una lista de Event's organizado por fechas.
  • Cada Event esta vinculado a single Meetup.
  • Un Meetup puede ser vinculado uno a muchos Events (one to many).

Este proyecto está destinado a realizarse en dos fases.

  1. Primero queremos enfocarnos en las imágenes, asegurarnos de que el front HTML/CSS y los componentes estén funcionando correctamente.
  2. En segundo lugar, debemos implementar las llamadas fetch al backend y volver "dinámica" la aplicación con data real obtenida de la base de datos.

Fase 1: Crea las vistas, luego vincúlalas con React Router en su componente de diseño.

Cada grupo debe crear las vistas:

  • Home (Lista de Eventos)
  • Detalle del Event
  • Detalle del Meetup

Usa contenido/data ficticia inicialmente, lo importante es que se vea bien.

En Meetup.com, Meetups son los grupos u organizaciones anfitrionas de los eventos.

Cada Meetup debe tener:
  • Titulo
  • Descripción

En contraste, los eventos son los eventos específicos que el grupo está organizando durante el mes.

Cada Evento debe tener:
  • Titulo
  • Descripción
  • Fecha
  • Hora
  • Meetup

Nota: Piensa en DRY (Don't repeat yourself) y declara solo un componente y usa props para manejar una estructura similar pero contenido diferente.

RECUERDA: Las etiquetas <a> provocarán un redireccionamiento, que no deseas en React. En lugar de etiquetas <a> Asegúrate de usar el componente <Link> de React Router para implementar la navegación entre vistas.

1 2<Link to="/event"> 3 Title of event 4</Link>

Fase 2: dinamizar la aplicación implementando React Context.

***Utiliza el store para rellenar el contenido ficticio *** dentro de las vistas/componentes. Se puede acceder a el store utilizando el Context.Consumer

Referencia: Usando el Context

The store structure (/store/store.js):

Algunos contenidos ficticios.

1store = { 2 events:[ 3 { 4 ID: 36, 5 post_content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero consectetur risus vehicula interdum eu at elit. Proin a commodo erat, eu molestie ipsum. Aliquam tristique nunc a est tristique, et convallis risus ullamcorper. Fusce nec massa ac enim pellentesque ornare. Pellentesque non sapien varius, pellentesque tellus sit amet, facilisis justo. Duis rhoncus nunc id elementum dapibus. Sed dictum lacinia vestibulum.", 6 post_title: "Lorem Event", 7 meta_keys: { 8 day: "20180428", 9 time: "07:00:00", 10 _meetup: "9", 11 _rsvpNo: [ 12 "robert", 13 "jjtime", 14 "username2" 15 ], 16 _rsvpYes: { 17 "cheeselover", 18 "neweradude", 19 "james1996" 20 } 21 } 22 }, 23 ... 24 ], 25 meetups:[ 26 { 27 ID: 9, 28 post_content: "The nicest Meetup ever", 29 post_title: "Tech Enthusiasts", 30 }, 31 ... 32 ], 33 session:{ 34 ID: 2, 35 username: "theUser", 36 password: "1234", 37 token: "qwerty12345asdfgzxcv" 38 } 39 ] 40};

Para tener acceso a los datos globales, debe importar el contexto:

1// importa el contexto en el mismo fichero de tu vista 2import { Context } from '/path/to/store/appContext.jsx'; 3 4const MyView = () => { 5 // utiliza el hook useContext 6 const { actions, store } = useContext(Context); 7 //Luego puedes utilizar actions y store donde prefieras en el codigo de tu vista 8 return (<span> hello, {store.events[0].post_title} </span>); 9} 10

Todo tu Fetch/AJAX estará en la sección useEffect() del archivo appContext.jsx.

🌱 Cómo iniciar este proyecto

  1. No clones este repositorio. El primer paso para comenzar a codificar es clonar el react flux boilerplate en tu compjutador local o con Gitpod.

a) Si usas Gitpod (recomendada) puedes clonar el boilerplate clic aquí.

b) Si trabajas localmente, escribe el siguiente comando en tu terminal:

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

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

  1. Instala las dependencias del projecto con $ npm install

  2. Ejecuta el servidor de desarrollo de webpack con $ npm run start

  3. ¡Listo! Empieza a trabajar.

"El momento más espantoso es siempre antes de empezar." -Stephen King

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

Video de solución

No disponible

Duración promedio

36 hrs

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast