DEV Community: Juan Esteban Bustos Chilatra

De construir robots con Arduino a desarrollar plataformas con IA: mi camino como developer en Colombia

Juan Esteban Bustos Chilatra — Thu, 29 Oct 2026 19:47:34 +0000

Soy Juan Esteban Bustos Chilatra. Tengo 18+ proyectos desplegados en producción, y sigo en los primeros semestres de Ingeniería de Software en la Universidad Surcolombiana.

No vengo de una familia de programadores. No tengo Mac. No vivo en Bogotá ni en Medellín. Soy de Neiva, Huila — y construyo software desde acá.

La línea de tiempo
🔧 2024: Robótica con Arduino
Todo empezó con robots. Mi primer proyecto serio fue un robot de fútbol con Arduino Uno y control Bluetooth:

Motor L298N para tracción diferencial
App móvil como control remoto
Programación en C/C++
Ese año también construí un sistema de asistencia con RFID — tarjeta, lector, reloj RTC y almacenamiento en SD para exportar a Excel. Hardware real resolviendo problemas reales.

Resultado: 🥇 1er puesto en el Intercolegiado de Robótica "Neiva Te Ama" (2025)

💻 2025: El salto al desarrollo web
Con la base de programación de Arduino, el salto a web fue natural:

Sistema de votaciones escolares — elecciones digitales para mi colegio con escrutinio en tiempo real
Revista Escolar — CMS en PHP/MySQL
E-commerce Copycaess — arquitectura MVC, facturas PDF, Google Auth
App móvil para robots ESP32 — control Bluetooth desde Android
Robot Soccer 2025 — evolución con ESP32 y control PWM
🧠 2026: IA, realidad aumentada y plataformas complejas
Este año explotó todo:

BioSmart — agricultura urbana con motor de IA en Go (pipeline de 15 fases), globo 3D, marketplace
VIANova — turismo inteligente con IA predictiva, AR y geolocalización
EcoGuardian — acción climática con gamificación, web + app Android
TeamFlow — gestión de equipos con integración GitHub
AxionReality — realidad aumentada web vía QR
Interfaz con voz y gestos — MediaPipe + Web Speech API + Three.js
Resultado: 🥉 3er puesto en la II Hackathon de la USCO (en primer semestre, contra estudiantes avanzados)

Resultado: 🎤 Conferencista en el II Encuentro de IA + Jóvenes

Mi stack actual
Frontend: React, TypeScript, Tailwind CSS, Three.js, Framer Motion
Backend: Node.js, Express, Go
Mobile: Ionic Capacitor, Android
Database: PostgreSQL (Neon DB), MySQL, Firebase
Hardware: Arduino, ESP32, RFID, sensores IoT
IA: xAI Grok API, MediaPipe, Web Speech API
Deploy: Vercel, Cloudflare Pages
Lo que aprendí

Construir > Estudiar
Los tutoriales te enseñan sintaxis. Los proyectos reales te enseñan a resolver problemas. Mi consejo: elige un problema que te moleste y constrúyele una solución.
El hardware enseña a pensar diferente
Programar un robot que se mueve en el mundo real te obliga a pensar en:

Latencia (un delay de 100ms y el robot choca)
Energía (las baterías se acaban)
Señal (el Bluetooth tiene rango)
Esas restricciones te hacen mejor developer web también.

No necesitas estar en una ciudad grande
Desde Neiva he desplegado apps usadas por personas reales, ganado competencias y presentado conferencias. Internet es el ecualizador.
Diversifica tu stack
Saber React está bien. Saber React + Go + Arduino + Three.js te hace irremplazable. Los problemas interesantes viven en la intersección de tecnologías.

¿Qué sigue?
Terminar Ingeniería de Software en la USCO
Seguir construyendo proyectos que resuelvan problemas reales
Contribuir al ecosistema tech de Neiva y el Huila
Si estás empezando en programación desde una ciudad pequeña de Colombia (o de cualquier parte): se puede. No necesitas permiso. Solo necesitas internet y ganas de construir.

👉 Mi portafolio: juanex.pages.dev 👉 GitHub: @juanitogit 👉 LinkedIn

Construí una web que se controla con voz y gestos — sin mouse ni teclado

Juan Esteban Bustos Chilatra — Thu, 29 Oct 2026 19:46:08 +0000

¿Y si una página web no necesitara mouse ni teclado?

Construí una interfaz web que se controla completamente con la voz y los gestos de las manos, usando solo APIs del navegador y bibliotecas de visión por computadora.

👉 Demo en vivo

Las 3 capas de interacción
🗣️ Capa 1: Control por voz bidireccional
Usando Web Speech API, el usuario habla y el sistema:

Escucha (Speech Recognition) — convierte voz a texto en tiempo real
Entiende — parsea comandos naturales ("muestra el mapa", "gira la tierra")
Responde (Speech Synthesis / TTS) — el sistema contesta con voz propia
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = 'es-CO';

recognition.onresult = (event) => {
const command = event.results[event.resultIndex][0].transcript;
processVoiceCommand(command);
speak(Entendido: ${command});
};
No es un "Ok Google" genérico — es un copiloto de navegación que entiende el contexto de la página.

✋ Capa 2: Navegación gestual con MediaPipe
MediaPipe rastrea las manos del usuario a través de la cámara del dispositivo:

Mano abierta → scroll
Puño cerrado → click
Gesto de pinza → zoom
Swipe → cambiar sección
Todo sin tocar el dispositivo. La latencia es mínima porque MediaPipe corre en WebGL.

🌍 Capa 3: Globo terráqueo 3D
Un globo interactivo construido con Three.js que:

Visualiza datos geolocalizados en tiempo real
Responde a gestos de rotación y zoom
Se puede controlar por voz ("muestra Colombia", "gira a la derecha")
Backend: Firebase + IA conversacional
Firebase Auth — autenticación robusta
Firestore — estados y preferencias del usuario
Motor de IA conversacional — procesa intenciones del usuario y genera respuestas contextuales con voz
El reto técnico más difícil
Sincronizar las 3 capas sin que se pisen:

Voz dice "gira" ──┐
├──▶ Command Router ──▶ Three.js rotation
Gesto dice "swipe" ──┘
Si el usuario habla y gesticula al mismo tiempo, el sistema necesita priorizar y desambiguar. Implementé un router de comandos con cola de prioridad:

Voz directa > Gesto > Voz ambiental
Cooldown entre comandos para evitar spam
¿Para qué sirve?
Accesibilidad: personas con movilidad reducida pueden navegar la web con voz
Presentaciones: controla tu demo sin tocar el computador
Educación: los estudiantes interactúan sin necesidad de mouse
Kioscos interactivos: pantallas públicas sin contacto
Tecnologías
Componente Tecnología
Voz Web Speech API (Recognition + Synthesis)
Gestos MediaPipe Hands
3D Three.js
Auth Firebase
IA Motor conversacional custom
Frontend HTML5, CSS3, JavaScript vanilla
Lo que aprendí
MediaPipe en el browser es viable para producción — la latencia es aceptable en dispositivos modernos
Web Speech API varía mucho entre browsers — Chrome es el rey, Firefox todavía no soporta todo
Three.js + controles custom > OrbitControls cuando necesitas input no convencional
La accesibilidad no es un feature opcional — es una oportunidad de innovación
Soy Juan Esteban Bustos, desarrollador de software en Neiva, Huila, Colombia 🇨🇴

👉 Portafolio: juanex.pages.dev 👉 GitHub: @juanitogit

TeamFlow: La plataforma que construí para organizar a mi equipo de desarrollo (con integración GitHub)

Juan Esteban Bustos Chilatra — Thu, 29 Oct 2026 19:40:36 +0000

Mi equipo de desarrollo no tenía orden. No sabíamos:

Quién estaba trabajando en qué
Si las tareas se entregaban a tiempo
Cuánto código real producía cada persona
Las herramientas existentes (Trello, Notion, Jira) no conectaban las tareas asignadas con la actividad real de código. Quería que si alguien decía "ya terminé", pudiera verificarlo automáticamente con sus commits.

La solución: TeamFlow
👉 Demo en vivo 👉 Código fuente

Funcionalidades clave

Workspaces con roles Cada equipo tiene su workspace con código de invitación. Roles:

Líder: control total, asigna tareas, ve métricas
Co-líder: gestión parcial
Miembro: ve sus tareas y su rendimiento

Integración con GitHub TeamFlow se conecta a la API de GitHub para:

Rastrear commits por miembro
Mapear commits a tareas asignadas
Auditar evidencias de entrega
Login con GitHub Auth
// Ejemplo: mapeo de commits a tareas
const memberCommits = await fetchGitHubCommits(repo, member.githubUsername);
const taskDelivery = correlateCommitsToTask(task, memberCommits);
task.performanceScore = calculateScore(taskDelivery);

Métricas automatizadas El sistema calcula automáticamente:

performanceScore — puntaje de desempeño individual
healthPoints — salud del proyecto
workloadPct — carga laboral por miembro
% de tareas a tiempo vs. retrasadas

Notificaciones automáticas por email Cuando se asigna una tarea → email al miembro Cuando una tarea se retrasa → alerta automática Resumen semanal de rendimiento
Activity Log Registro detallado de toda la actividad del workspace para transparencia total.

Stack técnico
Backend (Monorepo con pnpm)
├── packages/
│ ├── server/ # Express + TypeScript
│ ├── db/ # Drizzle ORM schemas
│ ├── validators/ # Zod validation
│ └── email/ # Servicio de correos
Express.js + TypeScript — API REST tipada
Drizzle ORM — esquemas typesafe
Zod — validación de datos
Pino — logging estructurado
Frontend
React + Vite — SPA rápida
Hooks personalizados para estado de workspace
Componentes dinámicos con métricas en tiempo real
Arquitectura
┌──────────┐ ┌──────────┐ ┌──────────┐
│ React │───▶│ Express │───▶│ Neon DB │
│ + Vite │ │ + TS │ │ Postgres │
└──────────┘ └────┬─────┘ └──────────┘
│
┌─────▼──────┐
│ GitHub API │
│ + Email Svc │
└─────────────┘
Resultado
Pasamos de "no sé quién está haciendo qué" a tener visibilidad total del equipo:

Cada miembro ve su rendimiento vs. el promedio
El líder detecta cuellos de botella antes de que exploten
Las entregas se verifican con commits reales, no con promesas
Lo que aprendí
La mejor app es la que resuelve TU problema — no la que crees que va a impresionar
Monorepos con pnpm son brutales para organizar backend + frontend + shared packages
La API de GitHub es oro — commits, PRs, repos... todo es consultable
Los emails automáticos cambian completamente el engagement del equipo
Soy Juan Esteban Bustos, desarrollador de software en Neiva, Huila 🇨🇴

👉 Portafolio: juanex.pages.dev 👉 GitHub: @juanitogit

BioSmart: Construí un motor de IA en Go con pipeline cognitivo de 15 fases para agricultura urbana

Juan Esteban Bustos Chilatra — Thu, 29 Oct 2026 19:34:31 +0000

BioSmart es una plataforma inteligente para agricultura urbana, trazabilidad de donaciones y e-commerce ecológico. No es un proyecto de clase — está desplegado y funcionando.

👉 Demo en vivo 👉 Código fuente

La arquitectura
┌─────────────┐ ┌──────────────┐ ┌─────────────────┐
│ React 18 │────▶│ Express.js │────▶│ Neon DB │
│ + Vite │ │ (Node.js) │ │ (PostgreSQL) │
│ + Three.js │ │ + Drizzle │ │ │
│ + Tailwind │ │ ORM │ │ │
└─────────────┘ └──────┬───────┘ └─────────────────┘
│
┌──────▼───────┐
│ GopherMind │
│ AI (Go 1.26) │
│ pgx/v5 │
└──────────────┘
🧠 GopherMind AI: el motor en Go
Esta es la parte que más me enorgullece. Construí un pipeline cognitivo de 15 fases en Go puro:

Sanitización CUSUM — detección de cambios en las series temporales de sensores
Filtro Hampel — eliminación de outliers sin perder señal real
Predicción multi-motor — múltiples modelos generan predicciones independientes
Fusión Bayesiana — combina las predicciones con pesos probabilísticos
Detección de drift Page-Hinkley — identifica cuando el modelo se desactualiza
Calibración de confianza — cada insight tiene un score de fiabilidad
¿Por qué Go y no Python?
Goroutines + Channels: análisis simultáneo de múltiples racks hidropónicos sin bloquear
Zero-Copy: el pipeline procesa datos sin copias innecesarias en memoria
Compilado: latencia mínima en las respuestas de la API de IA
HMAC-SHA256: cada insight lleva firma de integridad para auditoría IEEE
// Ejemplo simplificado del pipeline
func (gm *GopherMind) Analyze(rack RackData) Insight {
sanitized := gm.cusumSanitize(rack.Readings)
filtered := gm.hampelFilter(sanitized)
preds := gm.multiPredict(filtered) // goroutines
fused := gm.bayesianFuse(preds)
drift := gm.pageHinkley(fused)
insight := gm.calibrate(fused, drift)
insight.Signature = gm.hmacSign(insight)
return insight
}
🌍 Globo 3D con Three.js
La landing tiene un globo terráqueo interactivo que visualiza las donaciones globales en tiempo real. Implementé una transición fluida de vista 3D (Three.js) a vista 2D satelital (Leaflet.js) según el nivel de zoom.

🛒 Marketplace multivendedor
Google OAuth 2.0 con Passport.js
RBAC (control de acceso por roles): Usuario, Vendedor, Admin
Cloudinary para imágenes optimizadas
Catálogo público responsivo con cálculo en tiempo real
📊 Dashboard IoT
Paneles interactivos con datos meteorológicos, sincronización virtual de sensores Arduino y control simulado de granjas hidropónicas urbanas.

Stack completo
Capa Tecnologías
Frontend React 18, Vite, Tailwind CSS, Framer Motion, Recharts, Three.js, Leaflet.js
Backend Express.js, Node.js, Drizzle ORM, Passport.js, JWT, bcryptjs
IA Go 1.26, pgx/v5, HMAC-SHA256
DB Neon DB (PostgreSQL Serverless)
Storage Cloudinary
Deploy Vercel
Lo que aprendí
Go para IA no es loco — si tu pipeline es determinístico y necesitas concurrencia real, Go aplasta a Python en rendimiento
Three.js + Leaflet.js se pueden combinar con transiciones fluidas si manejas bien los estados de cámara
Drizzle ORM con TypeScript es brutal para esquemas complejos — typesafe de verdad
Soy Juan Esteban Bustos, desarrollador de software en Neiva, Huila, Colombia 🇨🇴

👉 Portafolio completo: juanex.pages.dev 👉 GitHub: @juanitogit

Cómo quedé 3ro en una Hackathon universitaria estando en primer semestre

Juan Esteban Bustos Chilatra — Thu, 29 Oct 2026 19:33:02 +0000

En abril de 2026, la Universidad Surcolombiana (USCO) en Neiva, Huila organizó la II Hackathon de Ingeniería de Software con una temática brutal: "Tecnología para combatir el hambre y la pobreza en zonas urbanas".

17 equipos. Estudiantes de todos los semestres. Y yo, en primer semestre.

Resultado: 3er puesto. 🥉

¿Cómo lo logré?

No subestimes la preparación previa Antes de la universidad ya tenía experiencia real:

Técnico en Programación de Software del SENA
Bachiller Técnico en Desarrollo de Software
Proyectos propios desplegados en producción (e-commerce, sistemas de votación, apps móviles)
Cuando muchos compañeros de semestres avanzados apenas tenían proyectos académicos, yo ya tenía código en producción siendo usado por personas reales.

Stack pragmático No intenté impresionar con tecnologías complejas. Usé lo que domino:

React 18 + TypeScript para el frontend
Node.js + Express para el backend
PostgreSQL (Neon DB serverless) para la base de datos
Vercel para despliegue instantáneo
En una hackathon, la velocidad de ejecución importa más que la arquitectura perfecta.

Enfoque en el problema, no en el código Mientras otros equipos discutían qué framework usar, nosotros ya teníamos:

El modelo de datos definido
Los flujos de usuario mapeados
Un MVP funcional corriendo

Demo > Slides En la presentación, abrí la app en vivo. Sin mockups, sin "imagínense que esto funciona". Funcionaba.

Lo que aprendí
La experiencia real pesa más que los semestres cursados
En una hackathon, enviar es más importante que perfeccionar
Trabajar bajo presión es una habilidad que se entrena, no se estudia
Neiva tiene talento tech que merece más visibilidad
¿Qué sigue?
Sigo construyendo. Actualmente tengo 18+ proyectos en mi portafolio, desde robótica con ESP32 hasta plataformas con IA y realidad aumentada.

👉 Mi portafolio: juanex.pages.dev 👉 GitHub: @juanitogit