La Aventura de construir Kungu con Solana y IA

Source: Dev.to

Introducción

¡Hola, comunidad! Hoy les traigo un caso de estudio completo sobre la creación de Kungu, una app de directorios de comunidades hispanas sobre Solana. No es un tutorial lineal; es una crónica de un proceso de desarrollo real, lleno de prompts de IA, pivotes de diseño y soluciones a errores inesperados. El objetivo es mostrar cómo, partiendo de un template, se puede llegar a una aplicación con una identidad visual única, usando la IA como copiloto de desarrollo.

Herramientas

• Base: Solana Mobile Monorepo de Beeman, instalado con bun.
• Generación de UI: Prototipado inicial con Magic Patterns.
• Asistente de Código: Codex (o un asistente similar) integrado en el editor (WebStorm).
• Styling: Configuración moderna y específica: Uniwind (para usar clases de Tailwind en React Native), tailwind-variants y heroui-native.
• Navegación: Expo Router, que permite una navegación basada en la estructura de archivos.
• Animación: react-native-reanimated.

Paso 1: Clonar el template

bun x create-seed@latest -t gh:beeman/solana-mobile-monorepo

Paso 2: Abrir el proyecto en el editor

Abre la carpeta generada en tu editor favorito (por ejemplo, WebStorm) para que la IA tenga acceso a la estructura del proyecto, al package.json y al código existente.

Prompt para el componente “Rolodex”

Act as a React Native expert. I want to implement a 'Rolodex' style community directory in this specific project.
Project Context:
Location: apps/native

Routing: Expo Router (file-based)
Target File: apps/native/app/(drawer)/(tabs)/index.tsx
Tasks:

 Create a Component: Create a new file apps/native/components/CommunityRolodex.tsx.
 Component Logic: Define a COMMUNITIES array (name, logoUrl, link). Use a FlatList with a stacked card visual. Ensure it only renders for authenticated users.
 Styling: Use the project's existing styling solution (uniwind).
 Interaction: Use Linking.openURL for the external links.

Al ejecutar el prompt descubrimos que el proyecto usaba Uniwind, no NativeWind, por lo que fue necesario un nuevo prompt enfocado exclusivamente en el estilo, indicando a la IA que utilizara className y los componentes de heroui-native.

Cambio de estilo a Neo‑Brutalismo

El efecto Rolodex se sentía apretado en móvil. En lugar de forzarlo, adoptamos un estilo Neo‑Brutalista: colores de alto contraste, bordes y sombras duras, tipografía fuerte. Esto implicó unificar toda la UI bajo esta nueva dirección visual, desechando el look & feel inicial del template.

Rediseño de navegación y pantalla de inicio

• De Drawer a Tab Bar: Reemplazamos el menú lateral (Drawer) por una barra de navegación inferior (Bottom Tab Bar), estándar de oro en UX móvil.
• Home como Wallet: Nos inspiramos en la distribución de la interfaz de Jupiter (jup.ag) para rediseñar la pantalla de inicio, enfocándonos en la utilidad y visualización de activos, manteniendo la estética Neo‑Brutalista.
• Ajuste de iconos y fuentes: Un prompt específico hizo que la IA redujera tamaños y alineara los elementos con el nuevo diseño compacto y minimalista.

Errores comunes y soluciones

Error de Gradle al compilar

Al compilar apareció un error en la carpeta .../android/app/build/intermediates/.... No estaba relacionado con el código de React Native, sino con la caché de Gradle.

cd android && ./gradlew clean && cd ..

Error de tipos en TypeScript al cambiar de tema

bun run check-types arrojó un error porque TypeScript no podía asegurar que systemColorScheme fuera siempre 'light' o 'dark'.

// Mapeo seguro para que TypeScript no se queje
const themeToSet = (systemColorScheme === 'light' || systemColorScheme === 'dark')
  ? systemColorScheme
  : 'dark'; // Default a 'dark' si el valor es inesperado

Conclusión

Kungu evolucionó de una simple idea de “tarjetas Rolodex” a una aplicación Web3 con una identidad visual fuerte y una estructura profesional. La lección más importante fue no tener miedo a pivotar: el diseño inicial no funcionó, pero nos llevó a una solución mucho más interesante y única. Usar la IA como copiloto nos permitió externalizar la generación de código repetitivo y enfocarnos en decisiones estratégicas de UX y diseño.

¡Espero que esta crónica detallada te sirva de inspiración para tus propios proyectos! ¿Te animas a probar el Neo‑Brutalismo en tus apps? 🚀