cortesana/project-promo-i-module-3-team-3-afternoon

Code refactorisation into ReactJS SPA of a paperless contact card generator @ AdaLab 🌍♻

Las Arrayadas 🙊🙉🙈

Generador de Tarjetas de Visita Digitales Personalizables => Be Ecofriendly 🌱!!

Integrantes

Eli Alkorta || https://github.com/eli-alkorta
Ana Cortés || https://github.com/cortesana
Ana Belén Ferreira || https://github.com/anablen07
Celia Gutiérrez || https://github.com/celiagmar
Gádor Villanueva || https://github.com/gavimar

Objetivos 🎯

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 nuestras habilidades de comunicación en público al exponer el proyecto. 🤭

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-3-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. ♟️
• En el primer sprint hemos contado con Gádor como Scrum Master y con Eli en el segundo sprint. Ambas se han ocupado de organizar las dailys, convocar reuniones extraordinarias y se han preocupado de que todo fuese bien. 🧘🏻‍♀️
• Hemos realizado dailys para estar todo el equipo actualizado y para determinar el siguiente paso a seguir. Hemos mantenido una comunicación constante a través de diferentes herramientas. 🌇
• 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. 👩‍🏫

Estructura

La estructura de carpetas es la siguiente:

/
`- _src
   |- components
   |  `App.js
   |  `CardMaker.js
   |  `CollapseItem.js
   |  `CollapseList.js
   |  `DefaultImage.js
   |  `Design.js
   |  `Footer.js   
   |  `FormFill.js
   |  `FormInput.js
   |  `GetAvatar.js
   |  `Header.js
   |  `LandingMain.js 
   |  `Preview.js
   |  `Share.js
   |- images
   |- services
   |  `CardFetch.js
   |- stylesheets
   | `|- base 
   |  |     `- _reset.scss
   |  |- layouts
   |  |      `- _arrow.scss
   |  |      `- _footer.scss
   |  |      `- _formValidation.scss
   |  |      `- _headerCards.scss
   |  |      `- _main.scss
   |  |      `- _mainCards.scss
   |  |      `- _header.scss
   |  |      `- _mainCardsDesign.scss
   |  |      `- _palettes.scss
   |  |      `- _socialsicons.scss
   |  |      `- _structure.scss
   |  |      `- _styleShareCard.scss     
   |  |- utils
   |  |      `- _mixins.scss
   |  |      `- _variables.scss
   |   `- App.scss
   |`- index.js
`- .gitignore
`- package-lock.json
`- package.json
`- README.md
 

Agradecimientos 📢

ADALAB https://adalab.es/

Creado

⌨️ con ❤️ por Las Arrayadas 🙊🙉🙈