¡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. Este 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 un copiloto de desarrollo.
1. El Stack Tecnológico: La Caja de Herramientas
La elección de herramientas fue clave para la agilidad del proyecto:
- 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: Una configuración moderna y específica: Uniwind (para usar clases de Tailwind en React Native),
tailwind-variantsyheroui-native. - Navegación: Expo Router, que permite una navegación basada en la estructura de archivos.
- Animación:
react-native-reanimated.
2. El Kick-off: Clonar el Monorepo y Preparar la IA
El primer paso fue establecer la base. El monorepo de Solana nos da toda la lógica de conexión de wallets lista para usar.
# 1. Clonar el template
bun x create-seed@latest -t gh:beeman/solana-mobile-monorepo
# 2. Abrir el proyecto en el editor
Lección Clave: Para que la IA (Codex) sea realmente útil, debemos usarla dentro del editor de código. De esta forma, tiene acceso a la estructura de archivos del proyecto, el package.json y el código existente, lo que permite generar respuestas mucho más precisas.
3. Fase 1: Creando el "Community Rolodex"
La idea inicial era mostrar las comunidades en un formato de tarjetas apiladas, como un Rolodex. Para ello, usamos un prompt muy detallado dirigido a la IA.
El Prompt para Crear el Componente
Este prompt se ejecutó en el chat del editor, especificando la ruta exacta (apps/native) y las restricciones para no alterar la lógica de Solana.
"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.tsxTasks:- Create a Component: Create a new file
apps/native/components/CommunityRolodex.tsx.- Component Logic: Define a
COMMUNITIESarray (name, logoUrl, link). Use aFlatListwith a stacked card visual. Ensure it only renders for authenticated users.- Styling: Use the project's existing styling solution (
uniwind).- Interaction: Use
Linking.openURLfor the external links."
El Reto del Estilo: Uniwind vs NativeWind
Pronto descubrimos que el proyecto no usaba NativeWind, sino uniwind. Esto requirió un nuevo prompt enfocado exclusivamente en el estilo, indicándole a la IA que usara className y se basara en los componentes de heroui-native.
4. Fase 2: El Pivote de Diseño hacia el Neo-Brutalismo
El efecto Rolodex se sentía apretado en móvil. En lugar de forzarlo, tomamos una decisión de diseño audaz: adoptar un estilo Neo-Brutalista.
El Neo-Brutalismo en UI se caracteriza por colores de alto contraste, bordes y sombras duras, y una tipografía fuerte. Prioriza la honestidad de los materiales digitales.
Esto implicó unificar toda la UI de la app bajo esta nueva dirección visual, desechando el look & feel inicial del template.
5. Fase 3: Reestructuración de la Navegación y la UI
Con el nuevo estilo definido, la estructura de la app también debía cambiar.
- De Drawer a Tab Bar: Reemplazamos el menú lateral (Drawer) por una barra de navegación inferior (Bottom Tab Bar), un 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 la visualización de activos, pero manteniendo nuestra estética Neo-Brutalista.
- Ajuste de Iconos y Fuentes: Un reto común fue que los iconos y textos del nuevo Tab Bar eran demasiado grandes. Se necesitó un prompt específico para que la IA ajustara los tamaños y los alineara con el nuevo diseño compacto y minimalista.
6. Troubleshooting: Resolviendo Errores del Mundo Real
Ningún proyecto está exento de errores. Aquí los dos más importantes que surgieron:
Error de Build en Android (Gradle Cache)
Al compilar, apareció un error en la carpeta .../android/app/build/intermediates/.... Esto no tenía que ver con el código de React Native, sino con la caché de Gradle.
Solución rápida desde la terminal:
cd android && ./gradlew clean && cd ..
Inconsistencia en el Modo Oscuro/Claro
Al implementar el cambio de tema, bun run check-types arrojó un error de tipos en TypeScript. El sistema no podía asegurar que el systemColorScheme fuera siempre 'light' o 'dark'.
Solución (Mapeo Seguro):
// 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: Un Proceso Orgánico Guiado por la IA
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 un copiloto nos permitió externalizar la generación de código repetitivo y enfocarnos en las 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? ¡Te leo en los comentarios! 🚀
Top comments (0)