/moody

Proyecto Ganador Hackathon Practicum 2022

Primary LanguageCSS

logo.png

moody.

Proyecto HackAthon Practicum 2022

Descripción 🔍

En Latinoamérica es muy conocido el que las personas son muy alegres, pero la cruda realidad es que a pesar de toda esa energía y buenas vibras, se esconde un estigma muy fuerte que es el de la salud mental. ¡Para la mayoría es un tabú e incluso algo prohibido!  Hoy somos conscientes que aceptar que uno no es perfecto y tiene un mundo por dentro es el primer paso para un proceso de aceptación y sanación que involucra la salud mental. Moody. nace como una alternativa amigable para todas las personas que quieren dar ese primer paso.

Moody es una plataforma donde los usuarios pueden escuchar podcasts sobre salud mental. El contenido está disponible para aquellos que buscan orientación de profesionales que se especializan en el tratamiento de problemas de salud mental y ademas tiene como objetivo ayudar a aquellos que luchan con problemas de salud mental o buscan informarse sobre estos temas. Nuestras sesiones en vivo y podcasts brindan información, apoyo y orientación de profesionales.

Tecnologias Utilizadas 🛠️

  1. JavaScript
    • EventListeners los implementamos para realizar ciertas acciones en funcion de los eventos.
    • Arrow Functions las utilizamos para añadir lógica en agregar y quitar clases optimizando y manteniendo el código corto y legible.
    • QuerySelector para seleccionar elementos especificos del DOM.
    • classList.add y classList.remove para agregar y quitar clases respectivamente.
  2. Diseño Responsivo
    • El sitio web se ha desarrollado siguiendo el primer enfoque de un dispositivo móvil.
    • El sitio web está diseñado para escalar sin problemas en:
      • 1280px y superior (portátiles estándar y superiores).
      • De 1024px a 1280px (desde una tablet en horizontal hasta un portátil estándar).
      • De 768px a 1024px (de una tablet en vertical a una tablet en horizontal).
      • De 425px a 768px (desde un gran smartphone hasta una tablet en vertical).
      • Hasta 425px (dispositivos móviles).
  3. CCS Grid
  4. CCS Flexbox
  5. BEM - Block, Element, Modifier
  6. Git - Si bien esto es invisible para el usuario, una adición importante a este proyecto fue el uso de una rama de desarrollo con distintas ramas con características implementadas en la construcción de la página inicial. Cuando la página está en vivo, aún se puede hacer y comprometer el trabajo en partes sin perturbar la versión en vivo de la página. El uso de ramas de esta manera es desarrollo del mundo real.

Documento con Especificaciones del Proyecto

Herramientas Extra

Mejoras futuras 💎

  • Guarde la información del usuario en una base de datos para referencia futura después de actualizar la página.
  • Permitir la autenticación de usuario.
  • Permitir al usuario crear tarjetas-tips.
  • Agregar funcionalidad a los botones de ver más ya que interactuan con la clase Sección para agregar más elementos de los objetos JavaScript.
  • Concluir las Cards Colapsables, hacer que se expandan. Agregarlas como clase y crear un objeto que los contenga.
  • Crear una clase podcasts, para poder agregarlas también con JavaScript al marcado y hacer más fácil ingresar o cambiar los podcasts con una función.
  • Lograr que se filtren los podcast según los tags seleccionados por el usuario.

Proyecto en vivo 💻

Créditos