Estructura inicial del Landing Page

[GianCastle]

El Landing Page surge como una necesidad de crear mas visibilidad a nuestra comunidad y tener una manera más amigable de poder visualizar los próximo eventos que la comunidad pueda tener. Otra necesidad y no la menos importante es la de aprender y mejorar en esta tecnología ensuciandose las manos. 📝

Como bien sabemos, la documentación de React nos recomienda pensar en nuestra aplicación a modo de componentes; partiendo desde el más pequeño al más grande. SIn embargo, esto es util cuando ya se tiene un layout en el cual podamos crear esas cajitas y empezar a darle nombre a los componentes.

Entonces, en este hilo la pregunta a responder es la siguiente... ❓

¿Cómo te imaginas el portal de React Dominicana? partiendo de los siguientes puntos

• Va a ver un gran calendario (Timeline) *

  • Podrás ver los eventos pasados y los siguientes acorde a la linea de tiempo
  • Podrás sugerir un nuevo evento haciendo click en una fecha que no esté ocupada.
    • Esto abrirá un form (o un modal con un Form que permita sugerir nuevos eventos).

• Un mapa con todos lo salones disponibles.

• Mostrará a todos los miembros/colaboradores de la comunidad. (nombre en Github*, foto*, user en Github*, cantidad de estrellas totales) *

¿Cómo responder a este hilo?

• Una imagen (puede ser un dibujo, un pequeño mock o simples cuadros) donde muestres cual seria tu idea de React RD Landing. Sería estupendo que nos des detalles de un stack de tecnologías que usarías para lograrlo.

¿Cómo elegir una buena idea?

• Para votar, tendrás que marcar un pulgar arriba a tu respuesta favorita (👍🏽)

• Puedes dar sugerencias a tu idea respondiendo a un comentario. El creador del hilo tiene el derecho de si seguir esa sugerencia o no.

• El ganador tendrá un premio en nuestro próximo useBirras(🍻)

Los campos y puntos marcados con astericos al lado son requeridos. Los que no, son opcionales

[mecm1993]

React RD - Landing Page

Primera Sección (Hero)

En está el fondo se estaría reproduciendo un video en el fondo con cinematografía de eventos pasados. La decisión de poner el título más la frase de de React RD a la izquierda y abajo es para destacar más el video (esto no necesariamente tiene que ser así).

Debajo del título, se puede percibir un cuadro y este tendría la fecha del próximo evento y un link para hacer RSVP en eventbrite para el mismo. Para hacer está parte dinámica se puede utilizar el API de GitHub (v4) y que este retorne el issue con los tags event y approved, y ademas, la fecha sea la más cercana a hoy (se puede agregar la fecha del evento en el título o en la descripción del issue). Está es solo una idea.

Segunda Sección (About us)

Está sección, como su nombre lo dice, es la sección donde definimos que es React RD, pero admeas, se muestra una parte de los contribuidores de la organización/comunidad. Para conseguir de forma dinámica está data se puede consumir el API de GitHub (v4) y que este retorne, por ejemplo, la lista completa de contribuidores (avatar, username, etc.) y que de forma aleatoria muestre solo diez contribuidores, así no siempre estaran los mismos en la portada.

Tercera Sección (Sponsors)

No comentarios.

Cuarta Sección (Events - Timeline/Calendar)

En está sección, se muestra un calendario a la izquierda y a la derecha un formulario donde se mostrara los detalles de los events pasados y por venir. Sobre el calendario, estos son algunos puntos que me han surgido sobre como manejarlo.

1. La data para popular el calendario debería de hacerse mediante el API de GitHub, con este se podría consumir todos los issues con los tags event y approved, y de ahí dividir los pasados y los que vienen (dependiendo la fecha se puede interpretar si es pasado o no).
2. Si algun usuario desea proponer un evento, este debe de crear un issue en el cual detallara el tema del evento y la fecha (de ser así se debe crear una plantilla para este objetivo).
3. Se puede dar el caso de que varios usuarios propongan varios eventos y que todos decidan poner la misma fecha. En este caso, los admin deben de tomar acción y hacer los ajustes.
4. Deben de distinguirse los eventos. Es decir, debe de colorcarse algun elemento distintivo para cada tipo de evento. Ejemplo, texto rojo para los eventos pasados y verde para los próximos.

Nota: Por defecto, el usuario que proponga un evento, este debe de llevar el tag event, pero los admis son los que definiran si estos son aprobados o no (utilizando el approved tag). De este no ser aprobado, los admins deben dejar una nota en el issue detallando por que no fue aprobado.

Quinta Sección (Aiuda!)

Está sección es dedicada a las diferentes formas de las cuales se puede aportar a la comunidad. Ejemplo, Sponsor, Backer, etc. etc.

Footer

Links a las redes sociales.

Stack

Por el momento, estas son las tecnologías que se podrían utilizar,

• Gatsby
• Yarn
• Material UI o Base Web (abierto a sugerencias)
• Jest
• CircleCI
• Netlify (tiene algunas limitantes, pero como punto de inicio está bien)

Otros puntos

• Paleta de colores: minimalista (abierto a sugerencias)
• Fuente: Segoe UI (abierto a segerencias)
• Modo Luz y Oscuro
• Traducción Español e Ingles

[dionnyprensa]

TLDR;

(Sugerencia a la estructura de @mecm1993)

Evento:
Pudiéramos tener una sección de eventos pasados. Más allá del mapa; sería más un timeline donde se descataran imágenes y/o también se puede usar para ver el detalles los eventos (listado de charlas)

https://bootsnipp.com/fullscreen/xGGpM
https://bootsnipp.com/fullscreen/qAz50
https://bootsnipp.com/fullscreen/a3BjR

[mecm1993]

TLDR;

(Sugerencia a la estructura de @mecm1993)

Evento:
Pudiéramos tener una sección de eventos pasados. Más allá del mapa; sería más un timeline donde se descataran imágenes y/o también se puede usar para ver el detalles los eventos (listado de charlas)

https://bootsnipp.com/fullscreen/xGGpM
https://bootsnipp.com/fullscreen/qAz50
https://bootsnipp.com/fullscreen/a3BjR

Hola @dionnyprensa,

Primero que todo, gracias por la sugerencia. En un inicio tenía pensado utilizar un timeline para exactamente los puntos que planteas. Pero, despues me di cuenta de que con esos puntos no se estaría tomando en consideración la función primordial de un timeline (resaltar una meta) y que se puede volver bastante extenso (si la comunidad se expande y se hacen dos o más eventos por mes), a diferencia de un calendario.

Creo que podemos agregar otra sección (no tiene que estar en el primer release) mostrando el timeline con aquellos eventos significativos, por ejemplo, aniversario, primera charla, primer proyecto que llego a tantas estrellas/forks/etc, y así. En resumen, que este timeline sea por metas en vez de eventos.

Quisiera saber tu opinión respecto a está idea.