Ver todos los proyectos
Caso / 04Frontend Developer

Pixel Art

Contexto

Aplicación para crear pixel art usando canvas, shortcuts de teclado y modo oscuro.

Pixel Art

Reto

Dibujar píxel a píxel debe sentirse inmediato: convertir eventos de puntero y teclado en cambios sobre un canvas, con una interfaz clara tanto en escritorio como en un teléfono, donde la pantalla es pequeña y el dedo es el puntero.

Enfoque

El lienzo es canvas nativo, sin librerías de dibujo: el estado del dibujo y el estado de la UI (herramienta, color, cuadrícula) viven por separado en Zustand, de modo que cada trazo actualiza los datos y el repintado queda controlado. La paleta, la barra de herramientas y las acciones de teclado son componentes propios que apuntan a las mismas acciones —una sola fuente de verdad— y un hook use-mobile adapta la interfaz al dispositivo.

Resultado

Una experiencia creativa ligera que funciona sin dependencias externas de edición: canvas, estado y atajos bastan para producir dibujos completos, con tema claro/oscuro incluido.

Responsabilidades

  • - Editor de pixel art en canvas nativo (pixel-canvas) con cuadrícula y pintado píxel a píxel
  • - Paleta de colores y barra de herramientas en componentes propios (palette, toolbar) sobre estado de Zustand
  • - Atajos de teclado agrupados en un módulo de acciones, alineados con los botones de la interfaz
  • - Estado separado de herramienta, color y cuadrícula para que cada trazo repinte de forma controlada
  • - Adaptación mobile con hook propio use-mobile y tema claro/oscuro con next-themes

Tecnologías

NextJS
TypeScript
Tailwind
Zustand