CorpoAyapel

CorpoAyapel LadingPage es un proyecto de software diseñado para crear una experiencia de usuario intuitiva, dirigido tanto a organizaciones como a individuos comprometidos con hacer una diferencia a través de donaciones y contribuciones benéficas.

Aspectos Destacados del Proyecto

1. Experiencia Intuitiva de Donación: CorpoAyapel ofrece una plataforma fácil de usar que permite a los usuarios donar sin esfuerzo, ya sea mediante una contribución única o una suscripción periódica. El proceso es sencillo, lo que permite a las personas apoyar sus causas elegidas sin complicaciones.

2. Gestión Eficiente del Sitio: Con CorpoAyapel, las organizaciones tienen control total sobre el contenido de su sitio web. Pueden actualizar información, compartir noticias, subir imágenes, videos y gestionar consultas de los usuarios de manera efectiva. Esta característica agiliza la administración del sitio, asegurando que la información esté siempre actualizada.

3. Interacción Directa: CorpoAyapel fomenta la comunicación directa entre las organizaciones y sus interesados. Los usuarios, voluntarios y empresas que desean hacer donaciones pueden interactuar uno a uno con la organización, fomentando la transparencia y estableciendo conexiones significativas.

4. Diseño Moderno y Minimalista: El proyecto presenta un diseño moderno y minimalista del sitio web, ofreciendo una experiencia de navegación sin complicaciones para los usuarios. Este enfoque garantiza que la información se presente de manera clara y concisa, facilitando la navegación por todo el sitio.

Para CorpoAyapel (Administradores y Personal)

• Fácil administración del sitio, incluida la edición de contenido y las actualizaciones de noticias.
• Comunicación directa con usuarios, voluntarios y posibles donantes.
• Modernización del aspecto y funcionalidad del sitio web.
• Compartir noticias y actualizaciones en plataformas de redes sociales.

Para los Usuarios

• Navegación rápida, sencilla y sin complicaciones.
• Contacto directo uno a uno con CorpoAyapel para interacciones personalizadas.
• Opciones flexibles de donación, permitiendo contribuciones únicas o periódicas.
• Compartir noticias y actualizaciones en diversas redes sociales.
• Notificaciones instantáneas de validación al interactuar con el Chat, el Formulario de Contacto o el Formulario de Programas.

Caracteristicas/Funcionalidades

• Actualizar, Editar, Agregar contenido
• Subscripciones mensuales, o pago unico
• Live Chat
• Formularios de Contacto, Programas Voluntariado/Empresas

Tech Stack

Desarrollo Front-end

• SASS: Un popular preprocesador de CSS que mejora las capacidades de estilizado de CSS al proporcionar variables, anidamiento y más.
• Webpack y Babel: Webpack es un potente empaquetador de módulos, y Babel es un compilador de JavaScript. Juntos, permiten utilizar características modernas de JavaScript y empaquetar los activos del proyecto de manera eficiente.

Gestión del Estado:

• Redux: Un contenedor de estado predecible para aplicaciones JavaScript, ampliamente utilizado con React para gestionar el estado de la aplicación.

Framework de Desarrollo Front-end:

• React: Una popular biblioteca de JavaScript para construir interfaces de usuario, que ofrece un desarrollo basado en componentes y una eficiente renderización del DOM.

Sistema de Gestión de Contenidos (CMS):

• Sanity: Un CMS headless que te permite crear, gestionar y entregar contenido a varias plataformas de manera fluida.

Marketing y Gestión de Relaciones con el Cliente (CRM):

• HubSpot: Una plataforma versátil para el marketing entrante, ventas y servicio al cliente que te ayuda a hacer crecer tu negocio y gestionar las relaciones con los clientes de manera efectiva.

Gestión de Medios:

• Cloudinary: Una plataforma de gestión de medios basada en la nube que te permite almacenar, gestionar y entregar imágenes y videos para tu aplicación.

Instalación

Requisitos previos:

-Asegurarse de tener instalado Node js, puede correr el comando en su terminal

node js -v

En caso de no tener node instalado puede instalarlo con el comando:

npm install node

Proceso de instalación

1. Clonar el proyecto corpoAyapelPage-project-front-4

   -Asegurarse de crear una carpeta en su directorio antes de correr el siguiente comando

   git clone https://github.com/MAKAIABootcamp/corpoAyapelPage-project-front-4.git

   -Abrir el proyecto instalado

   cd corpoAyapelPage-project-front-4

2. Instalación de paquetes y dependencias

   npm install

3. Abrir el proyecto en su editor, en caso de estar usando VSC

   code .

4. Iniciar el servidor de desarrollo

   npm start

Documentacion

Documentacion

Samples

Despliegue

Requisitos previos:

-Asegurarse de contar con las credenciales de la cuenta en Cpanel de CorpoAyapel

Proceso de despliegue

1. Iniciar el deploy en la terminal

   npm run build

2. Abrir la carpeta en el directorio del proyecto y seleccionar el archivo build

• Comprimir el archivo build

3. Acceder a la interfaz de Cpanel

-Ingresar con el usuario y contraseña proporcionados:

Login Cpanel

4. Realizar la carga de archivos

   • En el dashboard de Cpanel, seleccionar la opción en el menú > Archivos > Administrador de archivos
   • Ingresar al directorio > public_html
   • Eliminar los archivos exceptuando: backup.zip | .htaccess | google34549c30e72072c7.html
   • Dar click en cargar y adjuntar el archivo comprimido build.zip
   • Al finalizar la carga dar click en volver a /home/corpoaya/public_html
   • Seleccionar el archivo buil.zip y con click derecho extraer
   • Cuando la carpeta este descomprimida, seleccionar todos los archivos y dar click en mover indicando la ruta /public_html/

5. Verificar que el proyecto esté corriendo perfectamente

   CorpoAyapel

Autores

Equipo de Desarrollo

Juan Esteban Ciro Lider de Proyecto Front-End Developer

Maria Antonieta Pereira Desarrolladora FullStack Developer

Valentina Jiménez Salazar Desarrolladora Front-End Developer

Alexis Tamayo Desarrollador Front-End Developer

Usado por

Este proyecto es usado por:

• https://corpoayapel.com