Landx

Plataforma full-stack que reduce la creación de landing pages de horas a segundos mediante IA generativa con arquitectura multi-LLM (GPT-4 Turbo + Llama3 via Groq), preview interactivo en tiempo real con StackBlitz WebContainers y red social de templates — construida colaborativamente por 10 developers en 1-2 semanas con Next.js 14.

🚀 Impacto y Números

• De 4-8 horas a < 60 segundos para crear una landing page completa lista para producción
• Arquitectura multi-LLM: GPT-4 Turbo + Llama3 (Groq) + modo gratuito = 3 opciones con fallback automático
• 60+ archivos TypeScript integrando 4 servicios externos (OpenAI, Groq, Appwrite, StackBlitz)
• 972 combinaciones posibles de configuración: 12 fuentes × 9 weights × 3 estilos × 3 tech stacks
• 10 developers coordinados en 1-2 semanas con Git workflow, code reviews y metodología ágil real

⚡ Cómo está construido

Arquitectura multi-LLM con fallback inteligente

• Vercel AI SDK como capa de abstracción: el mismo route.ts soporta OpenAI GPT-4 Turbo y Llama3 via Groq sin reescribir lógica — agregar Claude o Gemini es añadir un if block
• Fallback graceful: si el usuario no tiene API key propia, el sistema cae automáticamente en el endpoint gratuito con Llama3 del servidor — sin romper la experiencia
• Prompt engineering con variables dinámicas: sistema de templates que construye prompts optimizados con 10+ variables configurables (industria, tono, colores, fuente, tech stack elegido)

Preview y procesamiento de código generado

• Parser de markdown propio: extrae bloques HTML/CSS/JS de la respuesta del LLM y construye la estructura de archivos antes de pasarla a StackBlitz
• StackBlitz WebContainers SDK: el código generado se ejecuta en el navegador en tiempo real sin backend adicional — el usuario ve la landing funcionando sin salir de la app
• Descarga como ZIP: JSZip + file-saver empaquetan el proyecto completo con estructura de carpetas correcta en un click

Red social con estado global

• Appwrite Realtime: feed de templates públicos con likes actualizados sin polling
• Zustand store tipado: estado global distribuido sin prop drilling, con slices por feature y soporte a TypeScript estricto
• Preview on hover: Framer Motion + carga lazy de contenido en el feed para UX fluida con listas largas

�️ Stack

Core: Next.js 14 (App Router), React 18, TypeScript 5 IA: Vercel AI SDK, OpenAI SDK (GPT-4), Groq (Llama3) Backend: Appwrite (Auth, DB, Storage, Realtime) Libs: Zustand, Framer Motion, Radix UI, JSZip, Zod, StackBlitz SDK Tools: Turbopack, Tailwind CSS 3.4, ESLint, PNPM, Vercel Patterns: Strategy (abstracción LLM), Repository, Observer, Feature Sliced Design

💼 Lo que este proyecto demuestra

Este proyecto demuestra que puedo:

• ✅ Integrar IA generativa en producción con abstracción de proveedores — no una integración superficial de ChatGPT
• ✅ Diseñar arquitecturas escalables donde cambiar de tecnología (proveedor de IA, BaaS) no requiere refactorizar el resto
• ✅ Entregar un producto end-to-end completo: auth + generación + social + preview + descarga
• ✅ Trabajar en equipo real de 10 personas con Git workflow, coordinación y entregas bajo presión de tiempo

Diferenciador clave: El 95% de portfolios no tiene IA generativa funcional. Este proyecto la implementa con abstracción de proveedores, fallback inteligente y preview en tiempo real — pensamiento de arquitectura aplicado, no integración de tutorial.