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.
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.
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.
-
Luis Gerez Martinez
-
Cristian ALbornoz
-
Yoshi Debat
-
María Eugenia Costa
Este proyecto fue creado con Create React App, utilizando las siguientes tecnologías:
-
HTML5
-
CSS3
-
JavaScript
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).
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á.
> .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
-
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. -
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.
- Loader para textos, botones, span (skeletonLoader): como skeleton utilizamos el componente
Placeholderde 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.
- Loader para botones (ButtonLoader): como skeleton utilizamos el componente
Placeholderde 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.
- 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.
Al momento tenemos una sola variable de entorno, para la conexión con la API:
REACT_APP_BASE_URL="https://ongapi.alkemy.org/api"
Para loguearse como administrador creamos el siguiente usuario de prueba:
nombre: pedro
email: pedro3@gmail.com
password: 123qwe!
En este proyecto, podés correr:
Para instalarte todos las dependencias que utiliza el proyecto.
Para correr la app en el modo development.
Para poder verlo en el navegador, abrir: http://localhost:3000.