Construí una app de barranquismo sin escribir código: mi experiencia creando una PWA con IA

---

Introducción

Como muchos amantes de la montaña, quería una página minimalista donde encontrar información de barrancos y consultar los recorridos sin cobertura, sin saltar entre diez webs. Wikiloc me daba los tracks y Descente-Canyon los datos técnicos, pero nada estaba unificado ni respondía bien a lo que necesitaba en mitad de la montaña.

Así que decidí construirla yo mismo. Aquí está el resultado: https://saturdaysai.github.io/barranquismo/

Quería una web sencilla, con filtros, mapas y acceso sin conexión a los datos guardados. Esta vez decidí apoyarme en la IA y no escribir el código a mano. Busqué dos compañeros para hacerlo:

• ChatGPT, como consultor técnico y de UX.
• Codex (integrado en Visual Studio Code), como asistente de programación.

Mi objetivo era comprobar hasta dónde podía llegar una sola persona, con buena planificación, instrucciones precisas y revisión de los resultados, al crear una aplicación desde cero con ayuda de IA.

Fase 1. Planificación y elección del stack

Antes de escribir una línea de código, necesitaba un plan sólido. Mi primera interacción fue con ChatGPT, para definir la arquitectura tecnológica.

Prompt clave a ChatGPT:
“Quiero construir una web para un inventario de barrancos. Los usuarios deben poder filtrar por dificultad y ver mapas. Lo más importante: debe funcionar offline. No quiero usar backend y planeo desplegarla gratis en GitHub Pages. ¿Qué stack tecnológico me recomiendas y cómo debería estructurar el proyecto?”

La IA me recomendó Vite y React para desarrollar la interfaz, junto con un service worker para guardar recursos y servirlos sin conexión. Ya tenía una dirección técnica para el proyecto.

Fase 2. Inicialización del proyecto en Visual Studio Code

Abrí una nueva carpeta (canyoningApp) y lancé Codex en modo agente desde Visual Studio Code. En esta experiencia utilicé GPT-5 Codex Preview. Partí del prompt que me había dado ChatGPT y lo adapté a mis necesidades, con pausas para revisar cada fase y dar feedback antes de continuar.

Fase 3. Diseño de la estructura base

El siguiente paso fue definir la estructura de navegación antes de cargar datos o diseñar la interfaz.

Prompt de ChatGPT a Codex:

• Desarrollaremos una web app estática de tipo PWA con fichas de cada barranco, material necesario y enlaces externos a Wikiloc para la aproximación y el retorno. Quiero que me ayudes paso a paso con este flujo de trabajo:
• Concreta la idea: define el propósito, las funciones clave y las tecnologías que utilizaremos (React y Vite o JavaScript sin framework).
• Planifica la arquitectura: estructura de carpetas y uso de localStorage para las preferencias del usuario, sin base de datos remota ni autenticación. Todo debe ejecutarse en el cliente y poder desplegarse en GitHub Pages.
• Construye el proyecto: crea el código base con documentación en comentarios y guíame fase por fase (estructura, página principal, fichas, mapa, persistencia local, filtros, diseño, PWA).
• Documenta el proceso: cada paso debe incluir explicaciones breves, código comentado, y notas para poder luego redactar un artículo/tutorial.
• Prepara el despliegue: explica cómo configurar Vite y las rutas para GitHub Pages. Condiciones:
• Toda la persistencia debe hacerse con localStorage.
• No usar ningún backend ni login.
• Código modular, limpio y comentado.
• Usa inglés en el código, pero español en las explicaciones.
• Pide validación antes de avanzar a cada fase.
• La app debe ser responsive y ligera. Empieza con la fase 1 (concepto) y espérame antes de pasar a la siguiente fase. Cuando te diga ‘sigue’, pasas a la siguiente.
• Genera la estructura de componentes de React por carpetas y el código para gestionar las cinco pestañas de navegación y la ruta de detalle anidada.

A continuación, Codex me hizo varias preguntas para confirmar lo que había entendido antes de continuar:

Consultaba las respuestas de Codex con ChatGPT como segunda opinión y revisaba el resultado antes de seguir:

El resultado fue un esqueleto modular de componentes con rutas, páginas y una estructura de carpetas profesional. Codex se encargó de crear los archivos iniciales, dependencias y configuración del proyecto automáticamente.

Codex empezó a crear carpetas y archivos. Durante el proceso pidió permiso para ejecutar algunas instrucciones del sistema y de depuración; revisé qué iba a hacer antes de autorizarlas.

Tras unos minutos, Codex generó toda la estructura de carpetas, dependencias y scripts.

Lo mejor fue que el proyecto compiló sin errores. Me pareció increíble, pero todavía tenía que probarlo en el navegador. Como no sabía arrancar el servidor local, le pregunté a Codex:

Se podía ejecutar desde una consola externa o desde la terminal integrada de Visual Studio Code, que fue la opción que utilicé:

Una vez arrancada la aplicación, la abrí en el navegador para comprobar que funcionaba:

La página funcionaba. ¡En menos de 30 min ya tenía una página lista! 

Fase 4. Subir la app a GitHub Pages

Quería alojar la aplicación en GitHub Pages, así que pedí a Codex que me guiara en el proceso:

Si todavía no tienes cuenta en GitHub, puedes crear una y abrir un repositorio. El repositorio no tiene que llamarse igual que la carpeta local. Lo importante para una web de proyecto en GitHub Pages es configurar la ruta base de Vite con el nombre del repositorio, por ejemplo /barranquismo/.

Una vez creado un repositorio vacío en GitHub, ejecuta estos comandos desde la carpeta raíz del proyecto local. Sustituye TU_USUARIO y NOMBRE_REPOSITORIO por tus datos:

Si no tenemos Git habrá que instalarlo, lo puedes descargar aquí. Una vez instalado:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/NOMBRE_REPOSITORIO.git
git push -u origin main

Con esto, el proyecto local quedaba subido a GitHub. Para enviar cambios posteriores, revisaba los archivos modificados, los añadía con git add, creaba un commit descriptivo y ejecutaba git push. Un historial claro facilita entender cada cambio y recuperar versiones anteriores.

Una vez creado el repositorio, pregunté a Codex cómo configurar el despliegue en GitHub Pages:

Seguí las instrucciones:

Y accedí a la aplicación publicada en GitHub Pages:

Como podemos comprobar, la versión inicial es funcional pero faltan los datos en formato JSON y mejorar la estética. 

Fase 5. Recopilar datos e importarlos a JSON

Recopilar los datos de cada barranco a mano era tedioso y podía introducir errores de transcripción. Pregunté a Codex si podía ayudarme a automatizar la tarea: 

Su respuesta fue un script.

Di un paso más: le pedí que generase y ejecutase el script, y guardase los datos en el archivo JSON que hasta entonces contenía barrancos ficticios de ejemplo. 

El mayor desafío era la información: las fuentes utilizaban formatos y descripciones distintos para cada atributo, así que los datos recopilados no eran coherentes entre sí. Necesitaba un proceso de limpieza. Automatizar la extracción no garantizaba que los datos fueran correctos o estuvieran actualizados: tenía que contrastarlos con las fuentes antes de utilizarlos para preparar una salida.

Fase 6. Normalización de datos con IA

Los datos de los barrancos procedían de distintas fuentes (Descente-Canyon, Wikiloc, etc.) y tenían formatos diferentes. Necesitaba un script de Node.js para limpiarlos y unificarlos.

Prompt para Codex:
“Tengo varios JSON con datos de barrancos. Necesito un script que lea todos, normalice los nombres, extraiga coordenadas y unifique los niveles de dificultad. Exporta un único dataset.json final.”

Codex generó un script de limpieza automatizado. El resultado: un archivo dataset.json consolidado, que serviría como base de datos local de la aplicación.

Fase 7. Creación de la interfaz React

Con el dataset listo, era momento de visualizar los datos. En lugar de escribir componentes manualmente, los pedí directamente a Codex.

Prompt 1:
“Crea un componente que importe 'dataset.json'. Debe incluir buscador y filtros dinámicos (por dificultad y zona). Mapea los resultados en tarjetas (‘BarrancoCard’) enlazadas a una vista de detalle.”

Prompt 2:
“Crea un componente ‘FichaDetalle’. Muestra datos del barranco: rápel máximo, tiempos, coordenadas y enlaces.”

Codex generó la estructura React completa y los componentes necesarios. Incluso añadió un mapa interactivo con Leaflet tras otro prompt específico.

Fase 8. Añadir la «memoria» sin conexión

La aplicación necesitaba recordar las valoraciones del usuario y su lista de comprobación.

Prompt para Codex:
“En mi app, los usuarios deben valorar un barranco con estrellas y añadirlo a una ‘Checklist’. Estos datos deben persistir incluso sin conexión. Usa localStorage.”

Codex implementó el guardado y la recuperación de datos locales. Después configuramos el service worker para acceder sin conexión a los recursos almacenados. Así obtuve una PWA instalable, aunque había que cargar previamente el contenido: los enlaces externos y los mapas no guardados seguían necesitando conexión.

Fase 9. Mejora de diseño UX/UI con ChatGPT

La funcionalidad estaba lista, pero la interfaz necesitaba un toque profesional. Volví a ChatGPT, esta vez como diseñador UX especializado en entornos outdoor.

Prompt clave:
“Estoy diseñando esta app para usarla en montaña, bajo sol intenso y con reflejos. Dame recomendaciones de UX/UI y un prompt detallado para Codex como si fuera un diseñador profesional.”

# CONTEXTO DEL PROYECTO

Estoy desarrollando una PWA en React + Vite llamada “Barranquismo”, pensada para usarse en montaña y entornos naturales. 

Los usuarios la consultarán en condiciones reales de campo: con luz solar intensa, reflejos, guantes, y conexión limitada. 

La app muestra fichas de barrancos con dificultad, material, tiempos y enlaces a Wikiloc. 

No tiene backend: todo funciona en el cliente (localStorage, JSON local) y se desplegará en GitHub Pages.

#OBJETIVO

Quiero que actúes como un diseñador profesional de UX/UI especializado en entornos outdoor, accesibilidad y diseño funcional. 

Tu tarea es mejorar el diseño visual y la experiencia de uso de la aplicación para que sea bonita, legible y profesional, sin perder simplicidad ni rendimiento.  

Dame sugerencias detalladas de diseño y, si es posible, fragmentos de código (JSX, CSS o Tailwind) listos para implementar.

# QUÉ QUIERO CONSEGUIR

– Una interfaz bonita y coherente, digna de un producto profesional.

– Alta legibilidad bajo el sol: textos grandes, fuentes claras y contraste fuerte.

– Componentes visualmente atractivos pero sencillos de renderizar en React (sin dependencias pesadas).

– Jerarquía visual clara (colores, tamaños y espacios bien definidos).

– Estilo outdoor, natural y moderno (inspirado en apps como Komoot, AllTrails o Wikiloc).

– Interacción táctil cómoda (botones amplios, feedback visual inmediato).

– Adaptación móvil total (mobile-first con breakpoints a tablet).

– Que respete buenas prácticas de accesibilidad (WCAG 2.1).

– Que proponga una paleta de colores y tipografía profesional, ideal para sol directo y contextos naturales.

# PUNTOS CLAVE QUE DEBES CUBRIR

1. Tipografía

   – Usa fuentes sans-serif legibles (ej. Inter, Poppins, Nunito, Roboto Flex).

   – Tamaños: mínimo 16–18px para texto, 22–28px para títulos.

   – Buen espaciado (`letter-spacing`, `line-height`) para lectura bajo reflejos.

2. Colores y contraste

   – Contraste alto (WCAG AAA) entre fondo y texto.

   – Propón una paleta profesional inspirada en la naturaleza (azules, beige, verdes oscuros, grises cálidos).

   – Incluye un modo alto contraste o “modo exterior”.

3. Componentes y botones

   – Áreas táctiles grandes (mínimo 44x44px).

   – Botones redondeados con sombra suave o borde definido.

   – Feedback visual al pulsar (cambio de color, opacidad o elevación).

   – Mantén consistencia en iconos, sombras y radios.

4. Diseño visual

   – Minimalismo funcional: sin recargar, pero agradable visualmente.

   – Distribución clara: encabezado fijo, lista de barrancos con tarjetas (cards) bien separadas y detalles accesibles.

   – Uso equilibrado de color para jerarquía: títulos, botones primarios, acciones secundarias.

5. Estilo global

   – Inspiración en Material Design y Fluent UI, adaptada al uso al aire libre.

   – Animaciones sutiles (fade, scale) solo si no afectan al rendimiento.

   – Bordes suaves, sombras naturales, espacios amplios.

   – Consistencia entre Home, Detail y Checklist.

6. PWA y rendimiento

   – Carga solo las fuentes necesarias y define una paleta coherente.

   – No uses imágenes pesadas, usa SVG o íconos vectoriales.

   – Optimiza para modo offline (mínimo CSS y assets).

7. Accesibilidad

   – Contraste mínimo de 4,5:1 para el texto normal; busca 7:1 cuando sea posible para facilitar la lectura al aire libre.

   – No dependas solo del color: combínalo con formas o etiquetas.

   – Etiquetas accesibles para los controles y botones HTML nativos; usa ARIA cuando sea necesario.

# FORMATO DE RESPUESTA ESPERADO

– ✅ Lista de recomendaciones de UX/UI ordenadas por prioridad (alta, media, baja).

– 🎨 Propuesta de paleta de colores y tipografía profesional.

– 💻 Ejemplos concretos de CSS o Tailwind para implementar.

– 🧠 Justificación breve de cada sugerencia (por qué mejora la visibilidad, estética o usabilidad).

– 📱 Mockup textual o wireframe (opcional) para la estructura ideal de la pantalla principal.

# TECNOLOGÍAS

– React + Vite

– Tailwind o Módulos CSS

– LocalStorage

– GitHub Pages (PWA estática)

# INSTRUCCIÓN FINAL

Actúa como un diseñador UX/UI profesional.  

No des teoría: dame propuestas listas para aplicar con código o estilos concretos.  

Equilibra belleza, usabilidad y funcionalidad outdoor.  

El resultado debe parecer hecho por un diseñador experto, pero optimizado para React y PWA ligeras.

El resultado fue una guía completa: tipografías legibles como Inter y Poppins, alto contraste, botones grandes, una jerarquía visual clara y un estilo inspirado en Komoot y AllTrails. Codex aplicó las propuestas y la interfaz ganó claridad y coherencia; todavía correspondía comprobar la accesibilidad con pruebas.

Fase 10. Despliegue final y pruebas

Después de pedir estos cambios a Codex, observé cómo modificaba el código en tiempo real. En unos minutos tuve una versión más cercana a lo que buscaba:

Volví a abrir la aplicación ejecutando el comando en la terminal:

Abrí el navegador y…

La página que había creado ya estaba lista y era funcional. Tras verificar los cambios, ejecuté un nuevo git push y esperé a que terminara el despliegue de GitHub Pages. Si el navegador seguía mostrando una versión anterior, comprobaba el despliegue y la caché del service worker. Borrar los datos del sitio puede eliminar también las preferencias y valoraciones guardadas, por lo que no conviene hacerlo sin revisar qué se perderá.

Ya tenía una aplicación funcional y ligera, con código generado por IA y decisiones revisadas por mí.

Conclusiones y aprendizajes

Desarrollar esta aplicación fue mucho más que programar: fue aprender a comunicarme con una IA. En este proyecto, mi trabajo se centró en formular problemas, guiar al sistema y validar resultados.

• Los prompts precisos ayudan. Un buen contexto orienta la generación de código, pero no sustituye las pruebas.
• La validación humana sigue siendo esencial. La IA propone, pero tú decides qué aceptar o ajustar.
• El flujo de trabajo híbrido (ChatGPT + Codex) es tremendamente eficiente para proyectos personales o prototipos.
• GitHub Pages y las PWA encajaron bien en este proyecto sin backend.

Recursos y enlaces

• Repositorio GitHub: https://github.com/SaturdaysAI/barranquismo
• Tecnologías: React + Vite
• IA utilizadas: ChatGPT (asistente técnico y UX) y Codex (generación de código)
• Librerías clave: Leaflet, Workbox, Tailwind CSS
• Despliegue: GitHub Pages (PWA estática)
• Web: https://saturdaysai.github.io/barranquismo/

Sobre el autor

José Ramón García
Estudiante de Ingeniería Informática, apasionado por la tecnología aplicada a la naturaleza. Combina su experiencia profesional en la industria alimentaria con proyectos de software y aplicaciones para actividades al aire libre. En www.saturdays.ai explora cómo utilizar la inteligencia artificial para potenciar la creatividad y la productividad humana en entornos reales.