Frontend Overview

Un repaso general por las piezas fundamentales de la aplicación, conceptos y cómo empezar a contribuir

Mazmo es una aplicación de código abierto. No sólo cualquiera es bienvenide a contribuir y discutir sobre el código, sino que los alentamos a hacerlo.

En su concepción y visión, Mazmo es una herramienta para que cada une desarrolle su sexualidad libremente, y con ese objetivo está pensada cada sección y cada decisión que se toma desde el producto.

Y por ese motivo, para ser fiel a esos conceptos, es que el frontend de Mazmo es 100% abierto. La mejor forma de crear una comunidad libre, es darle la libertad a sus miembros para ser parte de la construcción.

¡Recuerda que si colaboras con el código de Mazmo tendrás un badge especial en tu perfil!

Manos a la obra

Primero, lo fundamental: el link al repositorio del código.

El Stack

La aplicación está construida sobre las siguientes herramientas:

  • React para construir la UI
  • Redux para manejar el estado global de la aplicación
  • Styled components para manejar estilos y visualización de los componentes

Estructura

La aplicación se divide principalmente en tres grandes carpetas.

En la carpeta state se encuentra todo lo relacionado al estado global. Podrás encontrar que está dividido en subcarpetas por cada entidad del sitio. Cada una, conteniendo archivos para el manejo de actions, reducers y selectors.

En components viven todos los componentes que son compartidos a lo largo de la aplicación. Aquí encontrarás botones, formularios, headings, etcétera.

Y por último, en containers están los componentes de las secciones del sitio, con su lógica y sus componentes internos. Fuertemente conectados al estado, y por lo general con un manejo de lógica superior a los que se encuentran en components.

Cómo correr localmente la aplicación

git clone https://gitlab.com/mazmo/webapp.git
cd webapp
npm install
npm start

La versión de node requerida está especificada en el package.json. Al momento de escribir este artículo, era la versión 12.17.0

¡IMPORTANTE!

Cuando tengas funcionando la aplicación localmente, ten en cuenta que si bien puedes modificar y jugar con el código, todas las interacciones con el backend serán contra el servidor de **producción**. Es decir, puedes localmente chatear, comentar y crear contenido en general, y éste se verá reflejado en producción.

Links útiles