- Angular: framework principal para la construccion de la interfaz y la organizacion por componentes. He usado la prueba para familiariazarme con el framework ya que normalmente uso Vue.
- SASS: preprocesador CSS para estilos mas ordenados, reutilizables y consistentes.
- Separacion de responsabilidades: cada componente encapsula su logica, plantilla y estilos. Se separan los componentes de negocio y los componentes de UI reutilizables (shared). Los componentes grandes se separan en varios componentes más pequeños para mejorar la legibilidad y que queden abiertos a otros casos de uso. Así mismo cada componente recibe desde fuera los datos necesarios para cubrir distintos casos de uso.
- Reutilizacion: uso de componentes compartidos para evitar duplicidad. Solo hay un componente por funcionalidad.
- Escalabilidad: Estructura preparada para crecer sin perder legibilidad. Cada componente se encapsula con su interfaz para poder ser reutilizado en otro contexto sin que se vea afectado por el contexto o ancestros. Para las imágenes se usaría un servicio CDN / loader o se optimizaría formato y tamaño (no implementado)
- Consistencia visual: uso de tokens/variables de estilo para mantener una UI coherente. He seguido la aproximación de las variables de Figma, usando globales, semánticas y por caso de uso de cada componente, de esta forma se evitan conflictos con el sistema de diseño y se mejora la gestión de la actotación de posibles cambios.
- ** BEM **: se usa esta metodología por su facilidad de lectura a nivel de código y su enfoque semántico.
- Accesibilidad: Se incluyen buenas prácticas tratando de ofrecer una buena experiencia de uso y permitiendo recorrer la app de una manera ágil y clara. Usando etiquetas aria, labels y teniendo en cuenta los lectores de pantalla.
Clonar repositorio.
Para desplegar el proyecto en desarrollo, correr en el terminal:
ng serveLa aplicación se sirve en http://localhost:4200/.
Para construir el proyecto:
ng buildSe compila en carpeta /dist