Puedes acceder al repositorio utilizando este link: project-promo-r-module-3-team-2

Layout a bit so it doesn't look ugly.

Maybe I can use bootstrap in this first fake?

• Usar inputs de tipo file para la gestión de la foto de la tarjeta.
• Actualización de la foto en la vista previa de la tarjeta, usando el componente proporcionado
• Implementar la comunicación con el backend, la función de compartir y offline.

• Create button - create new card with user
• Twitter button - share the card link in twitter

• Palettes
• Form review
• onSubmit event -> form

• Hacer componente Palettes

• Local Storage

• Definir quién es la SCRUM master cada sprint y sus funciones: Rebeca
• Definir cómo se toman las decisiones el equipo: consenso durante las daily.
• Definir canales de comunicación: slack.
• Definir horarios de trabajo/coordinación fuera del horario presencial de Adalab: organizarlo cada día y hablarlo.
• Establecer cómo se trabajará en el proyecto: individualmente, por parejas, en equipo...: en función de las necesidades.
• Definir cómo se compartirán los aprendizajes del proyecto entre los miembros del equipo: durante las horas de proyecto, comentarios en visual studio o slack, subir comentarios a git mas específicos.
• Establecer actividades que fortalezcan el teambuilding: tener una sesión de autocuidado.
• Establecer horario daily: al principio de las sesiones.
• Preparar la presentación final del proyecto: (después del segundo sprint)
• Definir la convención de código del proyecto: (Modulo 1+2+3)
• Formateador por defecto: El formateador de VisualStudio Code para HTML y Prettier para CSS y JS. (lo vamos viendo).
• Word-Wrap: 80
• Para strings, usar " en HTML y ' en JS.
• Fin de línea con LF (ver barra inferior en el VisualStudio Code)
• Indentación con 2 espacios (ver barra inferior en el VisualStudio Code)

1. Lidiar con código heredado y ser capaces de refactorizarlo.
2. Saber identificar y generar los componentes de una página, separarlos y crear componentes visualmente similares a partir de estos.
3. Aprender a usar React para crear una aplicación web sencilla.
4. Aprender a buscar información en la documentación de librerías externas.
5. Implementar Scrum como marco de referencia para el desarrollo del producto, basándonos siempre en los valores de Agile como puntos clave del trabajo en equipo y la mejora continua.
6. Mejorar la comunicación entre los miembros del equipo.
7. Mejorar vuestras habilidades de comunicación en público al exponer el proyecto en la sesión final.

crear las rutas

En vez de hacer npm run docs tenemos que escribir: npm run githubpages

URL of our published page.

• Create a web application with Create React App.

fix arrow rotate css

Enlace al GitBook dónde encontraremos las especificaciones del proyecto: Proyecto 3. Un caso de código heredado

• Create a fake server and add a .json file with fake information and fetch it from the web application with fetch.

• Hacer componente Reset

1. Análisis del proyecto

• Crear un repositorio con el proyecto de React que incluya una carpeta con el proyecto heredado.
• Analizar y probar el código heredado y entender su estructura para poder adaptarla a nuestras necesidades y conocimientos.
• Solucionar errores detectados en el código.

2. Maquetación con React de la página de la herramienta

• Definir la estructura del proyecto de React.
• Crear el componente App de la aplicación con todos los elementos de la página.
• Realizar la interactividad, usando el estado y los eventos de React.

3. Estructura de componentes React

• Definir una estructura de componentes React de la aplicación.
• Generar los componentes del proyecto y comunicar información mediante props y lifting.

4. Versión completa con React

• Usar inputs de tipo file para la gestión de la foto de la tarjeta.
• Actualización de la foto en la vista previa de la tarjeta, usando el componente proporcionado
• Implementar la comunicación con el backend, la función de compartir y offline.

5. Mejoras finales

• Crear la página de landing.
• Implementar las rutas con React router.
• Revisión del código y pruebas.
• Podrán implementarse otras mejoras visuales si todo ya está terminado y acordado con el PO.

• Componentes para Comparte

• Creamos componente para el landing y para la card.

• Componentes para Diseña

• Hacer funcional la tarjeta: al clicar sobre los iconos de las redes sociales debe llevarnos a la página en cuestión.

Structure the data of the application in order to know how I should handle it:

• Weeks

• Couples

• Definir una estructura de componentes React de la aplicación.
• Generar los componentes del proyecto y comunicar información mediante props y lifting.

Once the pairs have been generated, the pairs must be painted on the screen, in a list <ul /> or in a table <table />.

• Generate pairs randomly taking care not to produce an infinite loop.
• Once the straws have been generated, they must be painted on the console.

• Componentes para Preview Card (tarjeta)

• Fetch
• Falta clase hidden para enseñar el url

• Crear un repositorio con el proyecto de React que incluya una carpeta con el proyecto heredado.
• Analizar y probar el código heredado y entender su estructura para poder adaptarla a nuestras necesidades y conocimientos.
• Solucionar errores detectados en el código.

Se partirá de un proyecto funcional (el generador de tarjetas interactivas), solo debemos heredar todo el Sass del proyecto, mantenerlo, evolucionarlo y refactorizarlo. Refactorizar código consiste en modificar un código para mejorar su estructura pero sin añadir nuevas funcionalidades.

De cara a la refactorización, el proyecto debe utilizar estas tecnologías:

• Uso de Sass para los estilos.
• Uso de mediaqueries para que el diseño sea adaptable al dispositivo.
• Desarrollo usando la estrategia mobile first.
• Uso de git para el control de versiones del proyecto, con ramas y pull-requests para revisar los cambios de las compañeras.
• Publicación del resultado en Internet usando GitHub Pages.

La webapp deberá tener las siguientes nuevas características:

• Uso de React para la estructuración del JS de la aplicación.
• Deberá usar transiciones y/o animaciones para mejorar interacciones con la aplicación.
• Debe implementarse con una navegación entre distintas páginas de la aplicación usando React router.

• Create header component.

• Definir quién es la SCRUM master cada sprint y sus funciones: Celia-Rebeca-Elena V.
• Definir cómo se toman las decisiones el equipo: consenso durante las daily.
• Definir canales de comunicación: slack.
• Definir horarios de trabajo/coordinación fuera del horario presencial de Adalab: organizarlo cada día y hablarlo.
• Establecer cómo se trabajará en el proyecto: individualmente, por parejas, en equipo...: en función de las necesidades.
• Definir cómo se compartirán los aprendizajes del proyecto entre los miembros del equipo: durante las horas de proyecto, comentarios en visual studio o slack, subir comentarios a git mas específicos.
• Establecer actividades que fortalezcan el teambuilding: tener una sesión de autocuidado.
• Establecer horario daily: al principio de las sesiones.
• Preparar la presentación final del proyecto: (después del segundo sprint)
• Definir la convención de código del proyecto: (Modulo 1+2+3)
• Formateador por defecto: El formateador de VisualStudio Code para HTML y Prettier para CSS y JS. (lo vamos viendo).
• Word-Wrap: 80
• Para strings, usar " en HTML y ' en JS.
• Fin de línea con LF (ver barra inferior en el VisualStudio Code)
• Indentación con 2 espacios (ver barra inferior en el VisualStudio Code)

• Crear la página de landing.
• Implementar las rutas con React router.
• Revisión del código y pruebas.
• Podrán implementarse otras mejoras visuales si todo ya está terminado y acordado con el PO.

Form - Card

• JavaScript events
• Use state function
• fill the gaps

• Add function palettes.

• Imagen

• collapsables
• arrow rotate

• Componentes para Rellena

• Componentes para Footer

• Form validation.
• Links form.

• Definir la estructura del proyecto de React.
• Crear el componente App de la aplicación con todos los elementos de la página.
• Realizar la interactividad, usando el estado y los eventos de React.