Cómo usé IA (GitHub Copilot) para construir Workiando Web de inicio a fin

Cuando empecé Workiando Web, no tenía mucha experiencia haciendo proyectos web, solo mobile y quería tener un proyecto con las últimas tendencias como NextJs, TailWind, etc para el lado administrativo de mi Aplicación.

Por lo tanto, compré una licencia de GitHub Copilot y la agregué en Visual Studio Code Quería probar hasta qué punto podía llevar la productividad usando inteligencia artificial dando Prompt cortos de servicios, estructuras y ejemplos de imágenes.

No se trataba solo de “autocompletar código”.
Mi objetivo era usar la IA como si fuera un arquitecto técnico, frontend dev y backend support al mismo tiempo.

El enfoque: pensar en prompts, no en código

Uno de los cambios más importantes fue dejar de pensar en “cómo codear esto” y empezar a pensar:

" ¿Cómo le pido a la IA que lo construya bien desde el inicio?"

Cada feature importante del proyecto empezó con un prompt bien definido.

Por ejemplo, el inicio fue literalmente:

“Crea un proyecto Next.js con TypeScript, TailwindCSS y configuración para Firebase Hosting.”

Y eso ya me dio:

• estructura base del proyecto

• configuración de Tailwind

• archivos de build

• base lista para deploy

No partí desde cero. Partí desde algo funcional.

Construyendo la base: arquitectura y orden

Después entendí algo clave:
Si no defines bien la estructura desde el inicio, la IA solo va a generar desorden más rápido.

Así que el siguiente paso fue:

“Organiza el proyecto en carpetas para componentes, hooks, servicios, contextos y tipos.”

Esto fue un antes y un después.

Porque ya no estaba generando código suelto, sino un sistema:

• /components para UI

• /services para lógica de API

• /hooks para estado

• /context para global state

A partir de ahí, todo lo que generaba Copilot ya tenía dónde vivir correctamente.

Diseño consistente sin esfuerzo

Otra cosa que normalmente toma tiempo es definir estilos.

Pero aquí usé IA para acelerar eso:

“Configura Tailwind con una paleta personalizada para el branding de Workiando.”

Y con eso:

• definí colores globales (theme)

• tipografías

• botones

• inputs

• tamaños

Esto hizo que cada componente que generaba después ya saliera consistente automáticamente.

Componentes: de repetitivo a reutilizable

En vez de crear UI pieza por pieza, empecé a pensar en bloques reutilizables:

• Sidebar

• Header

• Tables

• StatsCards

• Modales

La diferencia fue brutal: la IA no solo generaba código, generaba patrones reutilizables.

El punto crítico: Google Maps y Autocomplete

Aquí fue donde la IA realmente marcó diferencia.

Quería algo simple al inicio:

• buscador de ubicación

• mapa

• selección

Pero terminó siendo una de las partes más complejas del proyecto.

El prompt fue:

“Implementa un selector de ubicación con modal, buscador autocomplete (debounce), mapa y confirmación.”

Primero implementé el Autocomplete clásico…
pero rápidamente me di cuenta de un problema:

• demasiadas llamadas a la API
• costos innecesarios

Ahí fue donde iteré con la IA y cambié completamente el enfoque a:

• AutocompleteService

• debounce controlado

• cache de resultados

Eso me permitió:

• reducir llamadas

• mejorar performance

• tener control total del comportamiento

• construir mi propio dropdown (no el default de Google)

Separar lógica de UI (clave para escalar)

Otro cambio importante fue dejar de mezclar todo.

Usé prompts como:

“Crea servicios para anuncios, membresías, usuarios y categorías usando Axios con un interceptor global que para el manejo de token global y el refresh token”

Y luego:

“Crea hooks personalizados para manejar estado y lógica de datos.”

Resultado:

• UI limpia

• lógica reutilizable

• código mantenible

Autenticación y estado global

Para manejar usuarios:

“Implementa un AuthContext para manejar el estado de usuario y sesión.”

Esto me permitió:

• centralizar autenticación

• manejar sesión fácilmente

• evitar props drilling

Deep Linking: conectar web con móvil

Una de las features más interesantes fue:

“Crea una página dinámica /links/[id] que redirija a la app móvil o tienda según el dispositivo.”

Esto permitió:

• detectar dispositivo

• redirigir a app o store

• conectar el ecosistema completo

Deploy sin fricción (Firebase)

Otra parte donde la IA ayudó bastante:

“Configura firebase.json para soportar SPA, rutas dinámicas y assets públicos.”

Esto resolvió problemas típicos como:

• rutas rotas en producción

• navegación en SPA

• soporte para Next export

Integración con Backend (la parte más estratégica)

Aquí fue donde empecé a usar la IA de una forma mucho más poderosa.

En lugar de escribir servicios manualmente, cambié el enfoque a:

• Darle a Copilot ejemplos reales de CURL del backend

Prompt clave

“A partir de este CURL, crea un servicio en Axios tipado en TypeScript y un hook para consumirlo.”

Ejemplo real

curl -X GET "https://api.workiando.com/ads" \

-H "Authorization: Bearer TOKEN"

Resultado generado con IA

• servicio (ads.service.ts)

• tipado

• manejo de headers

• estructura reusable

Luego lo escalé a múltiples entidades

Repetí el patrón con:

• ads

• memberships

• users

• categories

Interceptor: la pieza clave

Después vino una de las mejores decisiones:

“Crea un interceptor global en Axios para manejar tokens, errores y refresh automático.”

Qué resolvía

• inyectar token automáticamente

• manejar errores 401

• centralizar headers

• evitar repetir lógica en cada servicio

Cómo lo integré

1. Definí un cliente base (apiClient)

2. Agregué interceptores:

• request → agrega token

• response → maneja errores

Resultado

Antes:

• cada servicio manejaba headers

• duplicación de código

Después:

• todo centralizado

• servicios limpios

• integración backend consistente

Calidad de código

Finalmente:

“Configura ESLint y TypeScript para mantener calidad y consistencia.”

Esto me ayudó a:

• detectar errores antes

• mantener tipado fuerte

• evitar deuda técnica

Lo que realmente aprendí

Después de todo esto, la mayor conclusión no es técnica.

Es esta:

• La IA no reemplaza al desarrollador
• Pero multiplica su capacidad si sabes usarla bien
• Para dar prompts más estructurados se necesita tener conocimiento amplio de las herramientas que se debe usar y como se debe usar así la IA tiene el concepto más claro de como deseas, ya que si describes algo genérico no siempre te va dar el resultado que esperas.

Las claves reales fueron:

• pensar en prompts claros

• iterar (no esperar que salga perfecto a la primera)

• estructurar antes de generar

• optimizar después

Conclusión

Usar IA en proyectos, mi recomendación es simple:

• Empieza escribiendo mejores prompts
• Prompts cortos y especificos
• Dar contextos y ejemplos.
• Tener conocimiento técnico y claro de todas las herramientas a usar dentro del proyecto
• Recordar siempre que tome la estructura del proyecto y reutilice los componentes de ser necesario
• Siempre tener el control, conocimiento y pasos de como llegar a la meta deseada.
• Tener el control de los cambios de que genera en el proyecto por cada tarea que se cumple y revisar que si hay cambios en componentes que ya quedaron revisar a detalle,

La idea de usar IA es entender el código que te genera, solo así podrás saber que está bien tanto en lo estructural y funcional.

FAQS de GitHub Copilot

1. ¿Cómo usar GitHub Copilot para programar con prompts efectivos?

Para usar GitHub Copilot de forma efectiva, es clave escribir prompts claros y específicos que incluyan el objetivo, las tecnologías (como Next.js o Firebase) y la estructura esperada, ya que esto permite generar código más preciso desde el inicio y mejorar significativamente la productividad al evitar iteraciones innecesarias.

2. ¿Cómo estructurar un proyecto web con Next.js, Tailwind y Firebase?

Para estructurar un proyecto con Next.js, Tailwind y Firebase, se recomienda organizar el código en carpetas como components, services, hooks y context, lo que facilita la escalabilidad, mejora el mantenimiento y permite integrar de forma ordenada tanto la lógica como la interfaz.

3. ¿Cómo crear componentes reutilizables con GitHub Copilot?

Para crear componentes reutilizables con GitHub Copilot, es importante pedir bloques de UI completos como headers, sidebars o modales en lugar de código aislado, lo que ayuda a reducir la duplicación, mantener consistencia en el diseño y acelerar el desarrollo del proyecto.

4. ¿Cómo usar GitHub Copilot para manejar autenticación y estado global?

GitHub Copilot puede utilizarse para implementar autenticación y estado global creando soluciones como un AuthContext para gestionar la sesión del usuario y configurando interceptores en Axios para manejar tokens y errores, lo que centraliza la lógica y mejora la mantenibilidad del código.

5. ¿Cuáles son las ventajas y desventajas de programar con inteligencia artificial?

Las ventajas de programar con inteligencia artificial incluyen mayor velocidad, automatización de tareas y generación de código estructurado, mientras que sus desventajas son la dependencia de buenos prompts, la necesidad de revisar el código generado y el riesgo de desorden si no se define una arquitectura clara desde el inicio.