API_AUTO_DETECTION.md

✨ API Auto-Detection System

Cómo Funciona

El frontend detecta automáticamente dónde está alojado y conecta al backend correcto:

┌─────────────────────────────────────────────────────────────┐
│                   FRONTEND ALOJADO EN                       │
└─────────────────────────────────────────────────────────────┘
                              │
                ┌─────────────┼─────────────┐
                │             │             │
                ▼             ▼             ▼
         LOCALHOST      HUGGING FACE    VERCEL/GITHUB
        (Desarrollo)      SPACES       (Producción)
              │             │             │
              ▼             ▼             ▼
        localhost:8000   Auto-detect    Configurable

📋 Matriz de Configuración

Plataforma	Frontend URL	Backend URL	Auto-Detect	Config
Local Dev	localhost:3000	localhost:8000	✅ Automático	.env.local
HF Spaces	username-andesai-frontend.hf.space	username-andesai-backend.hf.space	✅ Automático	Sin config
Vercel	andesai.vercel.app	andesai-api.vercel.app	✅ Automático	Sin config
GitHub Pages	username.github.io/andesai	URL externa (Fly.io)	⚙️ Manual	.env.production

🔍 Cómo se Detecta (Orden de Prioridad)

1. NEXT_PUBLIC_API_BASE env var explícita
   ↓ (Si no existe)
2. ¿Estoy en huggingface.co?
   → Auto-generar: https://{spaceName}-backend.hf.space
   ↓ (Si no)
3. ¿Estoy en vercel.app?
   → Auto-generar: https://{hostname-reemplazar-andesai-api}
   ↓ (Si no)
4. ¿Estoy en github.io o github.dev?
   → Usar env var REACT_APP_API_BASE o fallback a fly.dev
   ↓ (Si no)
5. ¿Estoy en localhost?
   → http://localhost:8000

🚀 Para tu Hackathon

✅ Opción 1: Hugging Face Spaces (SIN CONFIG)

1. Creas 2 spaces: andesai-frontend, andesai-backend
2. Subes Dockerfiles
3. Agargas variables de entorno en backend
4. ¡LISTO! Frontend auto-detecta backend
5. URLs finales compartidas con jurado

NO NECESITAS configurar URLs manualmente.

⚙️ Opción 2: GitHub + Fly.io (CON CONFIG)

1. Deploy backend a Fly.io → https://andesai-backend.fly.dev
2. Configuras .env.production:
   NEXT_PUBLIC_API_BASE=https://andesai-backend.fly.dev
3. Deploy frontend a GitHub Pages
4. ¡LISTO!

NECESITAS configurar la URL del backend.

📝 Archivos de Configuración

frontend/
├── .env.local          ← DEV: http://localhost:8000
├── .env.production     ← PROD: vacío (auto-detect) o URL explícita
├── .env.huggingface    ← HF: vacío (auto-detect)
└── lib/api.ts          ← Contiene la lógica de auto-detect

🎯 Mi Recomendación para Hackathon

Usa Hugging Face Spaces:

1. Menos configuración
2. Todo funciona automáticamente
3. Muy fácil de compartir
4. URL profesional
5. Free tier generoso

Pasos:

1. git push al repo (tu GitHub)
2. Creas 2 Spaces en HF
3. Conectas repo → HF Space (webhook)
4. Ambos deployan automáticamente
5. ¡Listo! Funciona sin tocar nada

🔗 Resultado Final

GitHub Repo
└── Conectado a HF via Webhooks
    ├── andesai-frontend space → https://user-andesai-frontend.hf.space
    └── andesai-backend space → https://user-andesai-backend.hf.space
        
Frontend auto-detecta:
"Estoy en huggingface.co" → Conecta a backend en HF ✨

---

⚡ TL;DR

Lo que cambié:

• ❌ Antes: hardcoded localhost:8000
• ✅ Ahora: auto-detecta según plataforma

Para ti:

• ✅ Local: No cambies nada, usa http://localhost:8000
• ✅ HF Spaces: No configures nada, funciona automático
• ✅ Otra plataforma: Configura NEXT_PUBLIC_API_BASE si es necesario

No te afecta la hackathon, solo mejora la portabilidad.