Desde el Barrio website

Desde el Barrio website es un proyecto que nace con el próposito de apoyar a la Corporación Desde el Barrio con la difusión en la web de su trabajo cultural y social realizado con comunidades en Medellín. A partir de esta herramienta se espera que muchas más personas puedan conocer, beneficiarse, participar y contribuir de diferentes formas a la oferta cultural y procesos que lleva a cabo la corporación.

Aspectos destacados del proyecto:

1. Sistema para donaciones de libros, juguetes y contribución monetaria: las personas que deseen contribuir a la corporación ya sea material o monetariamente, pueden hacerlo por medio de la facilidad que les brinda la sección “Apóyanos” de la página web. A la vez que la corporación puede llevar un registro ordenado.

2. Control de acceso: mediante un sistema de login implementado utilizando las credenciales correctas, según el tipo de usuario, administrador o contribuidor se le permite ingresar al sistema y visualizar su información.

3. Filtro en la sección de novedades: este filtro le permitirá al administrador catalogar las novedades en noticias, talleres y eventos. Ello con el fin de facilitar la visibilidad para el usuario.

4. Formulario de voluntariado: este formulario permitirá llevar un registro de las personas interesadas en hacer parte de la organización.

5. Creación de publicación: el sistema permite al usuario administrador crear publicaciones para las distintas secciones creadas, eventos, talleres y noticias.

6. Mensajería directa: mediante un formulario los usuarios pueden enviar mensajes a los usuarios administradores.

7. Diseño responsive: la página se adapta a diferentes resoluciones de pantalla tanto Desktop como para Mobile, debido a que en su desarrollo se implementaron las diferentes vistas.

8. User friendly: el diseño implementado para la aplicación se pensó con la finalidad de que la visualización sea de manera amigable y dinámica para el usuario.

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.
• Vite: Es una herramienta de desarrollo rápido y liviana que se utiliza principalmente en proyectos de desarrollo web front-end, especialmente con tecnologías como React, Vue.js, y Svelte, aunque no se limita a ellas.

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.

Base de datos, Autenticación de Usuarios y Almacenamiento en la Nube:

• Firebase: Es una plataforma de desarrollo de aplicaciones móviles y web desarrollada por Google. Ofrece una amplia gama de servicios y herramientas que simplifican el desarrollo de aplicaciones y permiten a los desarrolladores construir aplicaciones de alta calidad de manera más rápida y eficiente.

Bibliotecas para el diseño:

• Bootstrap: Es un framework que agiliza la creación de sitios web y aplicaciones móviles. Desarrollado por Twitter, ofrece estilos predefinidos, componentes y herramientas para diseñar interfaces atractivas y responsivas.
• Swiper: Es una librería de código abierto que simplifica la creación de carousels y sliders interactivos en sitios web y aplicaciones. Con soporte para gestos táctiles y navegación intuitiva, Swiper permite implementar fácilmente presentaciones de contenido visualmente atractivas en proyectos web y móviles.

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.

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:

• Instalar Node js, para esto puedes correr el siguiente comando en tu terminal:

node js -v

En caso contario, puedes intalarlo con el siguiente comando:

npm install node

Proceso de instalación

1. Clonar el proyecto desdeElBarrio-project-frontend-6

• Asegurate de crear una carpeta en tu directorio antes de correr el siguiente comando en la terminal:

git clone https://github.com/MAKAIABootcamp/desdeElBarrio-project-frontend-6

• Abrir el proyecto instalado:

cd desdeElBarrio-project-frontend-6

2. Instalación de paquetes y dependencias:

npm install

3. Abre el proyecto en tu editor, en caso de estar usando VSC:

code .

4. Iniciar el servidor de desarrollo:

npm run dev

Autores

• Diego Alejandro Suaza : https://github.com/Alejandro-Suaza
• Valentina Gil Antía: https://github.com/ValenGi
• Verónica Tangarife Agudelo: https://github.com/veroa8
• Zamir Florez Córdoba: https://github.com/zaflocoX