Proyectos
Código real, problemas reales, sin relleno.
DeslizaChambaFlow
Postular en OCC y Computrabajo es repetitivo por diseño: buscar, abrir, leer, hacer clic, volver. ChambaFlow elimina ese ciclo con un bot que se adjunta a tu sesión activa del navegador, sin almacenar ni interceptar credenciales, porque el enfoque correcto fue nunca necesitarlas. La apuesta técnica fue el remote debugging: en lugar de gestionar autenticación (frágil y difícil de mantener), el bot hereda tu sesión ya abierta y opera desde ahí. La configuración completa, keywords, plataformas y filtros, vive en un solo archivo YAML.
Pásalo
Pásalo es una plataforma comunitaria diseñada para redistribuir objetos de forma local sin fricción. A diferencia de los modelos tradicionales de clasificados, aquí no existe la compra, la venta ni la negociación: el enfoque está en conectar directamente a personas que tienen algo útil con quienes realmente lo necesitan. El sistema prioriza la inmediatez y la experiencia de usuario: publicar un objeto toma segundos, explorar se adapta a tu ubicación (estado y municipio en México) y la interacción está diseñada para ser clara, rápida y sin ruido. Más que una app de listados, Pásalo busca incentivar una cultura de reutilización, reduciendo desperdicio y fortaleciendo comunidades locales a través de tecnología bien ejecutada.
+10DescífraMX
La mayoría de los mexicanos ha usado su CURP sin saber qué codifica cada carácter. DescífraMX lo desarma visualmente en tiempo real: fecha de nacimiento, estado, sexo, dígito verificador y palabras inconvenientes, campo por campo, con contexto. Con más de 1,000 consultas registradas y una API REST pública documentada con OpenAPI, la decisión más importante fue la privacidad-by-design: ningún dato sale del navegador. Sin backend, sin logs, sin base de datos.
+6
MiInbox
Un cliente de correo es uno de los problemas de estado más exigentes del frontend: mensajes leídos y no leídos, hilos, búsqueda en tiempo real, composición, todo debe sincronizarse sin lag visible y sin re-renders en cascada. MiInbox lo resuelve con Zustand como capa de estado central: un store que mantiene coherencia entre bandejas sin disparar renders innecesarios. El resultado es una interfaz que responde inmediato sin importar cuántos mensajes estén activos en paralelo.
+3GitQuick
La mayoría de los tutoriales de Git enseñan comandos. GitQuick enseña a razonar sobre el historial: qué pasa cuando fusionas dos ramas con conflictos, cuándo un rebase puede destruir el historial compartido y cómo revertir un error sin entrar en pánico. Organizado en bloques lógicos, básicos, ramas, remotos, conflictos, funciona como referencia rápida mientras trabajas, no solo como guía de lectura. Cada comando lleva un ejemplo real, no solo su firma.
+4Pokédex
Más de 1,000 Pokémon con tipos, estadísticas base, habilidades y sprites, todo servido desde PokéAPI v2. El reto no fue consumir la API sino hacerlo sin degradar la experiencia: caché local para evitar peticiones duplicadas, paginación que no bloquea el render y búsqueda en tiempo real sobre el dataset completo. El resultado es una interfaz que se siente fluida incluso filtrando sobre listas de esta magnitud.
+1Tetris
Tetris parece simple hasta que intentas implementarlo: la detección de colisión es un problema matricial, la rotación de piezas debe respetar los límites del tablero y la velocidad tiene que escalar sin que el juego pierda responsividad. Implementado con JavaScript vanilla y Canvas API, sin ningún framework, porque el punto era resolver el problema, no delegarlo. El resultado es un juego completo con sistema de puntuación, progresión por niveles y controles de teclado fluidos.
Aparecen.mx
Aparecen.mx es una herramienta cívica gratuita diseñada para ayudar a familias, colectivos y ciudadanos en México a generar fichas de búsqueda de personas desaparecidas de forma inmediata. La plataforma automatiza el diseño bajo principios de comunicación de emergencia: alto contraste, jerarquía visual clara y optimización para difusión tanto en redes sociales como en impresión física. La decisión clave del proyecto fue la privacidad: toda la información se procesa directamente en el navegador del usuario (client-side), sin bases de datos, sin almacenamiento y sin transmisión a servidores externos.
+8Buscar trabajo en OCC y Computrabajo implica un flujo muy repetitivo por diseño.
Remote debugging: el bot se adjunta a tu sesión ya iniciada en el navegador para automatizar los clics.
Herramienta operable por consola o CLI, que postula automáticamente respetando tu sesión.
- El remote debugging es más resiliente que manejar autenticación directamente.
- Un archivo de configuración YAML puede reemplazar una UI entera.
ZustandLos sistemas de clasificados tradicionales introducen fricción innecesaria (precios, negociación, desconfianza). Se replantea el problema como redistribución directa.
Se construye una experiencia enfocada en velocidad y claridad: publicar rápido, explorar por cercanía y reducir decisiones innecesarias.
Implementación de un sistema completo con gestión de objetos, perfiles, favoritos persistentes y optimización de imágenes en cliente.
Integración de micro-interacciones y animaciones para elevar la percepción del producto y hacerlo más intuitivo.
- Reducir opciones (como eliminar precios) puede mejorar significativamente la adopción.
- La velocidad percibida es tan importante como la velocidad real en productos sociales.
- Un enfoque hiperlocal cambia completamente el comportamiento del usuario.
- El diseño visual y las micro-interacciones influyen directamente en la confianza.
La mayoría de herramientas de CURP/RFC en línea envían datos a servidores externos, un problema grave para información tan sensible como la identidad fiscal.
Experiencia tipo inspector que desarma el CURP/RFC visualmente carácter a carácter, procesando todo en el navegador del usuario sin enviar ningún dato.
Decoder con Next.js y TypeScript: lógica pura de parsing sin backend, API REST pública documentada con OpenAPI, y soporte PWA para instalación offline.
Más de 1,000 consultas registradas con cero incidentes de privacidad, porque toda la información nunca salió del navegador del usuario.
- La privacidad-by-design puede ser un diferenciador clave.
- Un buen diseño visual ayuda en conceptos legales ambiguos.
Los clientes de correo con estado fragmentado disparan re-renders en cascada: actualizar una bandeja rompe otra. El reto era mantener coherencia global sin costo de performance.
Modelado del estado global con Zustand: un store central que sincroniza bandejas, estado de lectura y composición sin disparar renders innecesarios en componentes no relacionados.
Layout de tres columnas (bandejas, lista de mensajes, detalle) con React Router para navegación sin recarga, búsqueda en tiempo real y composición de mensajes en ventana flotante.
Suite de pruebas con Vitest sobre el store de Zustand, garantizando que los flujos de lectura, archivado y búsqueda fueran predecibles bajo condiciones concurrentes.
- Priorizar la claridad de jerarquías en la bandeja de entrada.
- Zustand simplifica radicalmente los props en interfaces abrumadoras.
Los tutoriales de Git enseñan sintaxis. GitQuick nació para enseñar a razonar sobre el historial: qué destruye un rebase, cuándo un force-push es peligroso, cómo revertir sin entrar en pánico.
Organización en bloques lógicos (básicos, ramas, remotos, conflictos) con ejemplos reales para cada comando, no solo la firma, sino el contexto de cuándo y por qué usarlo.
Construido en Vue 3 y Vite para carga inmediata. Vitest para validar que los ejemplos de código son correctos antes de publicar.
- Los ejemplos en Git son más poderosos que la teoría técnica.
- La documentación debe pensarse con su propio CMS mental.
Más de 1,000 entradas en una API pública: el reto no era consumir los datos, sino hacerlo sin penalizar la experiencia, sin bloquear el render, sin peticiones duplicadas y con búsqueda inmediata.
Estrategia de caché local en memoria: las peticiones a PokéAPI se almacenan al vuelo, evitando refetch al volver a un Pokémon ya visitado. Paginación con intersección de scroll, no bloqueante.
Interfaz con filtros combinados por tipo, búsqueda en tiempo real sobre el dataset completo y vista de detalle con estadísticas base, habilidades y sprites, construida en React + TypeScript con Vite.
- El caché local reduce drásticamente las peticiones a APIs públicas.
- Diseñar UI para listas grandes requiere virtualización o paginación desde el inicio.
Tetris parece simple hasta que intentas implementarlo. Se eligió deliberadamente para resolver un problema clásico desde cero, sin delegar la lógica a un motor ni framework.
Detección de colisión matricial: cada pieza es una submatriz sobre el tablero. Rotación con validación de bordes. Limpieza de líneas completas y descenso del tablero en O(n).
Renderizado con Canvas API: control total sobre cada frame. Sistema de puntuación con multiplicador por líneas simultáneas, niveles de velocidad progresiva y gestión de game-over.
- Canvas API da control total del renderizado a cambio de mayor complejidad.
- La lógica de colisión en grillas requiere pensamiento matricial claro.
Identificación de fricciones en la generación de fichas de búsqueda: tiempos de diseño, dependencia de terceros y falta de estandarización visual.
Sistema visual enfocado en impacto inmediato: tipografía legible, alto contraste, jerarquía clara y optimización para feeds sociales.
Implementación 100% client-side para evitar almacenamiento de datos sensibles, garantizando anonimato y seguridad del usuario.
Motor de generación de fichas con exportación dual: PNG optimizado para redes y PDF listo para impresión en tamaño carta.
- La privacidad no es opcional en productos de alto riesgo, debe ser parte del core.
- El diseño visual puede influir directamente en la efectividad de la difusión.
- Reducir fricción en momentos críticos tiene un impacto real en la vida de las personas.
- Las arquitecturas client-side son clave para productos sensibles sin infraestructura compleja.