Skip to content
This repository has been archived by the owner on Sep 26, 2023. It is now read-only.

Prueba de concepto creada para la charla sobre Diseño Atómico en la WebConf 2022

License

Notifications You must be signed in to change notification settings

NicolasOmar/atomic-conf-poc

Repository files navigation

Diseño Atómico | WebConf LATAM 2022

Este repositorio contiene el código usado para la presentación de la charla sobre Diseño Atómico en la WebConf LATAM 2022

Qué necesito tener instalado antes?

Antes de clonar este repo, te recomiendo instalar el siguiente software:

  • Node v16.13.2 o superior para instalar las dependencias

Instalación por primera vez

Despues de clonar el repositorio, instalar los paquetes npm en la raiz del proyecto.

git clone https://github.com/NicolasOmar/atomic-conf-poc.git
cd atomic-conf-poc
npm install

En caso que quieras iniciar la aplicación de React, deberás:

Como iniciarlo

Para la version en React

npm start

Para la version de Storybook (usada en la demo)

npm run storybook

Estructura de archivos

Una vez clonado el repo, aparecerán las siguientes carpetas:

  • .storybook: Dedicado a la configuración de Storybook.
  • .env: Archivo con las variables de ambiente/entorno.
  • public: Carpeta donde la App iniciará apuntando al componente <App /> una vez iniciado. Contiene estilos, lógica, logotipo y otros archivos necesarios.
  • src:
    • components: Contenedor de los componentes necesarios siguiendo la estructura jerarquíca de Diseño Atómico
      • atoms / átomos
      • molecules / moléculas
      • organisms / organismos
      • templates / plantillas
      • pages / páginas
    • constants: Archivos en formato JSON usados para contener constantes como rutas y clases de estilo usadas de Bulma.

Quiero saber más

Presentación Demos de Diseño Atómico
Presentación de la charla usando Google slides Demostraciones del concepto en 2 páginas para componentes y el sitio funcional

Licencia

MIT