Skip to content
@Es-Tan-Facil

Es-Tan-Facil

Es tan fácil

La "Campaña Es Tan Fácil" es un proyecto conformado por un grupo de amigos, que tiene como objetivo ayudar a los chicos de las escuelas rurales del valle del Bajo de Véliz dándoles la oportunidad de conocer el mar. Este proyecto tiene su sede en San Luis, Argentina y es llevado a cabo de manera autónoma por su fundador, Carlos Castro, junto a otros voluntarios. Se busca constantemente la colaboración de personas y empresas para lograr el éxito de esta iniciativa.

La página web "Es Tan Fácil" nace como un proyecto voluntario y altruista, con el objetivo de dar visibilidad a la campaña y fomentar la colaboración. Cuenta con un diseño llamativo y colorido, donde las diversas secciones se integran dentro de la página principal, a los cuales puedes acceder a través de la barra de navegación. También hay otras dos vistas: la de noticias y la de contacto. El desarrollo de la página fue realizado mediante React, donde se hizo uso de Axios, para facilitar la conexión con el back-end, y de Tailwind, como biblioteca de recursos, y Java Spring Boot y Spring Security, con el objetivo de tener una página web dinámica que nos permitiera gestionar nuestra base de datos, donde almacenamos las donaciones realizadas por los contribuidores y las noticias publicadas por nuestro administrador.

Página principal

homepage

Noticias

news

Contacto

contact

Panel de administrador

admin

Características principales

  • Página principal: dispone de una barra de navegación que permite moverse entre las diversas secciones, una cabecera de diseño propio donde se integran varias imágenes del proyecto Es Tan Fácil, y las propias secciones de: "Colabora con Nostros", donde podemos visualizar cuatro cartas, con un modal, que ofrecen información sobre las formas de colaborar, la sección de "Quiénes somos", donde ofrecemos una breve descripción del proyecto, una sección de "Últimas noticias", donde mostramos, por orden cronológico, las tres últimas noticias publicadas, la sección de "Nuestro viaje", donde ofrecemos una descripción de en qué consiste el viaje, y por último la sección de la animación del autobús, donde, en función de los kilómetros donados, el vehículo avanza. También contamos con un botón que nos permite volver de forma directa a la parte superior de la página web.
  • Página de noticias: dispone una barra de navegación y un encabezado propio. Cuenta con un sistema de paginación donde mostramos las noticias publicadas. Se puede acceder a través de la barra de navegación de la página principal o mediante el botón de ver más que se encuentra en la sección de "Últimas noticias".
  • Página de contacto: también dispone de una barra de navegación y un encabezado propio. En esta vista se muestran las diversas formas de contacto: Facebook, Instagram y WhatsApp.
  • Página de administración para el admin: se trata de un panel de administrador donde el admin podrá incluir nuevas noticias y donaciones mediante formularios. También podrá visualizar los datos de las donaciones realizadas y las noticias publicadas para editarlas o borrarlas.
  • Página web responsiva en cualquier dispositivo: desktop first.

🛠️ Tools

  • Jira
  • Figma
  • Git / GitHub
  • Visual Studio Code
  • Intellij
  • Postman
  • Workbench
  • Lucidchart

💡Technologíes

  • HTML5
  • CSS3
  • React
  • Material Tailwind
  • Axios
  • Spring Boot
  • Spring Boot Security

Instalación

  1. Clona el repositorio de Es Tan Fácil en tu ordenador.
  2. Asegúrate de tener Node.js y un gestor de bases de datos instalado en tu sistema.
  3. Abre una terminal y navega hasta el directorio del proyecto.
  4. Ejecuta el comando npm install para instalar las dependencias del frontend.
  5. Instala Workbench, XAMPP, o algún programa de gestión de base de datos MySQL.
  6. Configura el archivo application.properties del back-end con los datos de la configuración de tu servidor.
  7. Navega hasta el directorio del backend y ejecuta el proyecto desde la clase principal.
  8. En otra terminal, inicia la aplicación front-end ejecutando npm start en el directorio principal del proyecto.
  9. Accede a la aplicación en tu navegador web ingresando la dirección http://localhost:3000.

Mock-Up

Autores

Agradecimientos

Agradecemos a Factoría F5 y a nuestros formadores por darnos las herramientas para poder lograr realizar un proyecto así. También agradecemos a Carlos Castro por confiar en nosotros para poder llevarlo a cabo.

Popular repositories Loading

  1. BackEnd BackEnd Public

    Java 3

  2. FrontEnd FrontEnd Public

    JavaScript 1

  3. .github .github Public

Repositories

Showing 3 of 3 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…