✏️ DrawTool

Herramienta interactiva de dibujo con selección de herramientas, color, grosor, historial de acciones y exportación de imagen.

🌐 Demo

DrawTool Demo

🛠️ Tecnologías

• React
• TypeScript
• SCSS Modules
• Vite
• Canvas API
• Lucide React
• Micazoyolli Foundation para SEO/build y reduced motion

🧱 Requisitos

• Node 24.18.1 (engines.node: >=24.18.1 <25)
• Yarn 1.22.22

📦 Instalación

yarn install

🚀 Scripts

yarn dev
yarn lint
yarn typecheck
yarn build
yarn preview
yarn deploy

Abre http://localhost:5173/ para probar la herramienta en local.

🗂️ Estructura del proyecto

public/
scripts/
src/
├── assets/
├── components/
├── styles/
├── types/
├── App.tsx
└── main.tsx

🚢 Despliegue en GitHub Pages

Este proyecto se publica en GitHub Pages desde la rama gh-pages. El comando yarn deploy compila la aplicación, limpia archivos .DS_Store del build y publica dist/ usando el CLI de Micazoyolli Foundation sin crear commits de despliegue en main.

La aplicación utiliza la raíz / como base porque se publica en un dominio propio.

🧠 Funcionalidad

• Herramientas de trazo libre, línea, rectángulo y círculo.
• Selector de color y grosor.
• Acciones para deshacer, rehacer, limpiar y guardar.
• Interfaz responsive para desktop y mobile.

🧩 Construido con Micazoyolli Foundation

Este proyecto utiliza Micazoyolli Foundation como infraestructura compartida. Las mejoras de tooling, estructura y despliegue deben realizarse en Foundation para beneficiar a todos los proyectos que la consumen.

👩‍💻 Autora

Una creación de <micazoyolli />✨