eugenia1984/react-sxxi-t1

Proyecto : Somos más

Situación inicial

Somos un equipo de desarrollo y nuestro líder técnico nos comparte el pedido de un cliente nuevo que está buscando nuestra ayuda. El pedido lo hizo Marita, la Directora de la ONG Somos Más, que está buscando desarrollar un sitio web para su organización.

Marita y su equipo buscan que el sitio web funcione como carta de presentación, medio de contacto, y que les permita participar del concurso “Juntos por el Cambio Social”. Dicho concurso es organizado por una reconocida institución universitaria de Córdoba, Argentina, y el premio les permitiría ayudar a 150 familias extra por, al menos, los próximos 12 meses. Sin embargo, es requisito obligatorio para participar del concurso, incluir el link a un sitio web para dar visibilidad a su trabajo.

Tu objetivo

Como parte de un equipo de desarrolladores, deberás desarrollar un sitio web que represente a la organización de Marita y el gran esfuerzo que su equipo realiza para la comunidad.

Requerimientos

El equipo de Marita debe contar con un rol de usuario administrador para gestionar el sitio, sin necesidad de contactar a un técnico. Necesita poder seleccionar y actualizar la información a mostrar de cada sección (novedades, actividades, miembros, entre otras).

Además, el sitio debe tener acceso público para que cualquier persona pueda recorrer las secciones e informarse acerca de la ONG, sin posibilidad de modificar la información disponible.

Por pedido de Marita, les gustaría que el sitio tenga una sección para presentar a los miembros del equipo y las responsabilidades de cada uno. También, una sección donde se informe a la gente acerca de las actividades, últimas novedades, y testimonios de la ONG.

Por último, sería de gran utilidad, que el sitio web les permita ampliar su comunidad, invitando a interesados/as a contactarse con el equipo para participar como voluntarios/as, o bien para ser donantes de dinero y/o materiales.

---

Integrantes del grupo:

• Luis Gerez Martinez

• Cristian ALbornoz

• Yoshi Debat

• María Eugenia Costa

---

Tecnologías

Este proyecto fue creado con Create React App, utilizando las siguientes tecnologías:

• HTML5

• CSS3

• JavaScript

• Bootrstrap y React-Bootstrap

• React

• Styled Components

• Sweet Alert 2

• Formik, Yup y ckeditor en los formularios.

---

Metodología

Utilizamos la metodología scrum durante todo el proceso de creación de la aplicación.

Realizamos cada mañana a las 9.00 la daily (reunión corta donde cada integrante cuenta que esta haciendo y si tiene algún bloqueo). Y una vez a la semana la retro (reunión para hacer un balance de la semana viendo que tenemos de positivo para seguir haciendo, qué hay como problema para poder modificar).

Tablero en Jira donde podíamos ver el backlog, la hoja de ruta y el sprint activo:

---

Template guia

Diseño UX

Ellos enviaron un diseño UI representativo, imágenes y otros contenidos que sugieren que utilicemos para inspirarnos y crear la carta de presentación online de Somos Más (disponible en sección “Diseño UI”). Por supuesto recibirán más que felices otras ideas y funcionalidades que sumen a su causa y los ayude a posicionarse en el concurso.

La UX (User Experience) que el equipo de diseño construyó la encontrarán haciendo click acá.

---

Estructura del proyecto

> .vscode
> node_modules
> public
> src
    - assets
    > Components
        - Campaigns
        - GlobalComponents
        > views
            - About
            - Activities
            - Auth
            - Categories
            - Contact
            - Donations
            - Home
            - Members
            - News
            - Private
            - Projects
            - Users
   - features
   - guard
   - hooks
   - models
   - redux
   - Services
   - styled-cmponents
   - utilities
   App.js
   App.test.js
   index.js
   serviceWorker.js
   setupTest.js
.env
.gitignore
jsconfig.json
package-lock.json
package.json
README.md

Algunos de los componentes globales

1. Spinner (SpinnerLoad): decidimos no utilizar una librería para el mismo, sino crearlo con CSS mediante transformaciones. Nos ayuda a mostrar un feedback al usuario mientras se esté cargando un recurso. Se lo puede ver en: src > Components > GlobalComponents > Loading > SpinnerLoad.

2. Spinner (SpinnerGrow): utilizamos el componente <Spinner> de React-Bootstrap para darle un feed back al administrador mientras se está cargando un recurso. Recibe por props :

Nombre	Valor	Descripción
animation	'border' , 'grow'	para cambiar el estilo de la animación
variant	'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'light' , 'dark'	el color que tendrá el spinner

Se lo puede ver en: src > Components > GlobalComponents > Loading > SpinnerGrow.

3. Loader para textos, botones, span (skeletonLoader): como skeleton utilizamos el componente Placeholder de React-Bootrstrap para hacer un efecto de carga en el texto. Ya tiene las clases d-flex flex-wrap justify-content-center mb-2 para que este centrado. Recibe por props :

Nombre	Valor	Descripción
animation	'glow' , 'wave'	para cambiar el estilo de la animación
size	'xs', 'sm', 'lg'	para modificar el tamaño
as	'p'	para que el span se muestre como otra etiqueta
xs	1, 2,..., 12	la cantidad de columnas que tendra

Por default se setea: size ="lg", as = "p", animation="glow",xs=10

Se lo puede ver en: src > Components > GlobalComponents > Loading > TextLoader.

4. Loader para botones (ButtonLoader): como skeleton utilizamos el componente Placeholder de React-Bootrstrap. Recibe por props :

Nombre	Valor	Descripción
animation	'glow' , 'wave'	para cambiar el estilo de la animación
variant	primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'light' , 'dark'	el color que tendrá el texto
xs	1, 2,..., 12	la cantidad de columnas que tendra
size	'xs' , 'sm' , 'lg'	para el tamaño

Se lo puede ver en: src > Components > GlobalComponents > Loading > ButtonLoader.

5. Alerta : para mostrar alertas de confirmación, error e información, utilizando la librería: sweetAlert2. Se lo puede ver en:

src > utilities > alerts > feedBackUser.util.js

src > utilities > alerts > userConfirm.util.js.

feedbackUser -> recibe 3 parametros:

Parámetro	Valores
position	la posición en que se verá el cartel: top, top-start, top-end, center, center-start, center-end, bottom, bottom-start, bottom-end
icon	el ícono: warning, error, success, info, question
title	el mensaje que mostrará, es un String

userConfirm -> recibe solo un parámetro (*String) que es el mensaje que se muestra.

---

Variables de entorno

Al momento tenemos una sola variable de entorno, para la conexión con la API:

REACT_APP_BASE_URL="https://ongapi.alkemy.org/api"

---

Login

Para loguearse como administrador creamos el siguiente usuario de prueba:

nombre: pedro

email: [email protected]

password: 123qwe!

---

Scripts disponibles

En este proyecto, podés correr:

npm install

Para instalarte todos las dependencias que utiliza el proyecto.

npm start

Para correr la app en el modo development.

Para poder verlo en el navegador, abrir: http://localhost:3000.

---