Mothers of Code

Generador de Tarjetas Digitales => The code cracks ⚔️ !!

=> Código heredado. 👵🏻♻️

EQUIPO 2 AFTERNOON Mothers of Code.

Somos un equipo de 5 compañeras programadoras 💻 de la promo Idelisa de ADALAB, situado en Madrid, aprendiendo con mucha ilusión diferentes tecnologías como lo es: HTML5, CSS3, SASS, JavaScript y React.

=>En este repositorio encontrarás nuestro último proyecto del módulo 3 de React de AdaLab, el cual ha sido creado para implementar esta tecnología (React), consiste en un código heredado (dedicado a crear una web para generar tarjetas de visita virtuales), el próposito en este modulo es, que el código que nos ha sido asignado, sea cambiado de JavaScript a React.

Autoras ✒️

⚔️ 👩🏻‍💻 ⚔️ | Laura García | GitHub | ⚔️ 👩🏻‍💻 ⚔️

🔱 💻 🔱 | Maite Villar | GitHub | 🔱 💻 🔱

👑 💃 👑 | Ana Valdivia | GitHub | 👑 💃 👑

🛡 🔮 🛡 | Liliana Rascón | GitHub | 🛡 🔮 🛡

🏹 🏰 🏹 | Mercy Grace | GitHub | 🏹 🏰 🏹

Contenido

• Autoras
• Objetivos del curso
• Instalación
• Especificaciones
• Metodología
  • Scrum
  • GitHub
• Estructura del proyecto
• Contribuye
• Agradecimientos
• Ecofriendly
• Recursos
• Creado

Objetivos

1. Aprender un nuevo lenguaje de programación React (uso de clases, estructuras de datos, funciones, etc.) 👍

2. Comprender cómo manipular una página a través de componentes. 👍

3. Manejo de estados y uso de datos por medio de props. 👍

4. Realizar peticiones al servidor y almacenar datos en local. 👍

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 👍

Instalación 🔧

Necesitarás instalar 📋 Node.js para trabajar con este repositorio, luego:

1. Descarga o clona el repositorio. ⚙️

$ git clone https://github.com/Adalab/project-promo-i-module-3-team-2-afternoon

2. Abre el proyecto en tu editor de codigo (Visual Sudio Code, Atom, Brackets...)

3. Instala las dependencias locales

$ npm install

4. Arranca el proyecto:

$ npm start

Especificaciones

• Uso avanzado de HTML5

• Maquetación usando SASS, incluyendo flex ✨

• Uso de mediaqueries para que el diseño sea adaptable al dispositivo usando la estrategia mobile first

• Acceso y envío de datos a un servidor ✨

• Almacenamiento en local usando LocalStorage ✨

• Uso de git para el control de versiones del proyecto

• Publicación del resultado en Internet usando GitHub Pages ✨

Metodología de trabajo 🛠️

Scrum

• Para la realización de este proyecto trabajamos en 2 sprints de 7 sesiones cada uno

• Dedicamos el primer día a la planificación del sprint y el resto a trabajar en el desarrollo del proyecto. 👌

• Para este proyecto trabajamos siguiendo el marco de trabajo Scrum, que consta de formar equipos auto-organizados y multifuncionales. Auto-organizados hace referencia a que los equipos elegimos la mejor opción de llevar a cabo el trabajo y no somos dirigidos por personas externas. Al ser multifuncionales, contamos con las competencias necesarias para llevar a cabo el trabajo. Este modelo de equipo está diseñado para optimizar la flexibilidad, la creatividad y la productividad. El objetivo final es entregar productos de forma iterativa e incremental, maximizando el aprendizaje de cada iteración. ✅

• Para cada sprint elegimos una Scrum Master que tenía especial atención en que el equipo siguiera los principios Scrum, agilizar los impedimentos que encontrabamos, facilitar las reuniones y las Daily Meeting

• Al final de cada sprint hicimos una demo para presentar los resultados conseguidos, y una retrospectiva (retro) para evaluar nuestro trabajo en equipo y mejorar en el siguiente sprint.

GitHub

Control de versiones 🔖

• Ramas: A lo largo del proyecto hemos trabajado creando una rama permanente para cada scprint, y multiples ramas puntuales para crear o modificar algunas funcionalidades.

• Pull Request y revisión de código:twisted_rightwards_arrows: : para este proyecto hemos usado la funcionalidad de Pull Request que consiste en que un equipo crea la rama, ejecuta la tarea y la sube a la rama remota, pero no la fusiona todavía, antes crea un Pull Request. De esta forma un equipo o algún miembro del equipo se encarga de revisar el código y dar el visto bueno a la fusión. 👍

Estructura

La estructura de carpetas es la siguiente:

/
`- _public
   |   `favicon.ico
   |   `index.html
   |   `manifest.json
   |   `robots.txt
`- _src
   |- components
   |  |- Form-components
   |  |    `Collapsable.js
   |  |    `DesignForm.js
   |  |    `FillForm.js
   |  |    `GetAvatar.js
   |  |    `GetCameraPhoto.js
   |  |    `ShareFormValidation.js
   |  |    `ShareTwitter.js   
   |  |- PreviewCard-components
   |  |    `IconsRRSS.js
   |  |    `PhotoUser.js
   |  |    `ResetButton.js
   |  |    `UserInfo.js
   |  `App.js
   |  `Footer.js
   |  `FormGeneral.js 
   |  `Header.js
   |  `Landing.js
   |  `Main.js
   |  `PreviewCard.js 
   |  |- images
   |  |- services
   |  |    `CardService.js
   |- stylesheets
   | `|- base 
   |  |      `- _reset
   |  |- components
   |  |      `_forms.scss
   |  |- layouts
   |  |      `- _collapsables.scss
   |  |      `- _footer.scss
   |  |      `- _form-design.scss
   |  |      `- _form-fill.scss
   |  |      `- _form-share.scss
   |  |      `- _form-general.scss
   |  |      `- _header.scss
   |  |      `- _main.scss
   |  |      `- _preview.scss
   |  |- utils
   |  |      `- _button.scss
   |  |      `- _dynamic-styles.scss
   |  |      `- _mixins.scss
   |  |      `- _variables.scss
   |   `- App.scss
   |   `- Landing.scss  
   |  |    |
   |`- index.js
`- .gitignore
`- package-lock.json
`- package.json
`- README.md

 

   

Contribuye 🖇️

1. Haz un Fork (https://github.com/yourname/yourproject/fork)
2. Crea una nueva rama (git checkout -b feature/fooBar)
3. Haz commit con los cambios (git commit -m 'Add some fooBar')
4. Haz push en tu rama (git push origin feature/fooBar)
5. Crea un nuevo Pull Request

Agradecimientos 🏅

• ADALAB 🏫[https://adalab.es/] por brindarnos la oportunidad de pertenecer a esta comunidad y haber aprendido tanto de vuestro esquema de enseñanza.
• A nuestra profe María 👩🏻‍🏫[https://github.com/pixelmary] , que ha tenido la paciencia, las ganas de trasmitir su enseñanza, por su ayuda en resolución de dudas, por atender nuestras llamadas y por simplemente su cariño.
• A Miguel 👨‍🦲 [https://github.com/migueldelmazo], que indirectamente nos ha aportado muchísimo cada día, con sus vídeos (que han sido muy útiles), con su constante información por las redes (que sólo nos suma), por su ayuda en zoom y en todo, a la hora y el día que fuese necesario.
• A todas 👩🏻 👩🏻‍🎓 👩🏻‍💼 👩🏻‍💻 👸🏻 y cada una de las compañeras que conformamos este equipo, por esa entrega y dedicación 💪🏻, por la disponibilidad que se ha tenido a la hora de resolver cualquier conflicto y siempre ha sido satisfactorio, por dedicar tantas horas y cariño 💘 a este proyecto.
• Por todo esto Salud 🍺 🍺 🍺 🍺 🍺.... Que nos lo merecemos!!

Ecofriendly 🌍

• Salvemos el Planeta!! 💚

Recursos

• Adalab
• Modulo React
• MDN
• CodePen
• Git commit emojis

Creado

⌨️ con ❤️ por Mother of CODE 😊