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:

• Crear una cuenta de desarrollador en Unsplash
• Seguir los pasos para crear una app donde te darán el AccessKey necesario para usar la API
• Ir al archivo .env en la raiz del proyecto y cambiar el valor de REACT_APP_API_KEY por la AccessKey obtenida

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