New Vision Sports
Web bilingüe de una agencia de becas deportivas: migrada de un prototipo en React a Astro, con más de 100 páginas estáticas, blog y herramientas interactivas para captar atletas.
- Año
- 2026
- Rol
- Desarrollador principal — Guarapo Media
- Stack
- Astro, React, TypeScript, Tailwind CSS, Framer Motion, PHP, Vitest
- Enlaces
- Ver sitio online ↗︎
El proyecto
New Vision Sports ayuda a atletas de Latinoamérica y otros países a conseguir becas deportivas NCAA y NAIA en universidades de EE. UU. El sitio nació como un prototipo en Vite + React generado con Lovable. Lo migré a Astro con generación estática y desde entonces lo hago crecer cada mes: versión en español e inglés, blog, páginas por país y por deporte, formularios de captación y herramientas interactivas, con el SEO como prioridad.
Qué hice
- 01Migración de Vite + React (SPA) a Astro SSG: más de 100 páginas HTML estáticas, con React solo en las partes interactivas
- 02Sitio bilingüe ES/EN con rutas por idioma, hreflang y traducciones tipadas a partir del español
- 03Blog en Markdown con más de 30 artículos y páginas de becas por país y por deporte
- 04«La Batidora»: cuestionario gamificado de varios pasos que calcula las estadísticas del atleta, le muestra su carta y lo empareja con un atleta real de la agencia
- 05Mapa interactivo de universidades de EE. UU. con datos por estado
- 06Backend de formularios en PHP en el mismo hosting (PHPMailer + SMTP de Google Workspace) y despliegue por FTP
- 07Preparación para buscadores con IA (llms.txt, datos estructurados) y tests unitarios de rutas e i18n con Vitest
Resultados
- clics semanales desde Google en 3 meses (86 → 187)
- +117%
- clics semanales desde Google en 3 meses (86 → 187)
- posición media en Google para «becas deportivas en Estados Unidos para panameños»
- 1,8
- posición media en Google para «becas deportivas en Estados Unidos para panameños»
- visitantes nuevos por día (de 28 a 56)
- 2×
- visitantes nuevos por día (de 28 a 56)
Decisiones técnicas
Las decisiones que más pesaron en la arquitectura, y lo que costó cada una.
- 01
De SPA a sitio estático
El prototipo era una SPA en React: Google veía poco contenido y cada página cargaba todo el JavaScript. Con Astro cada ruta es HTML real y React solo hidrata los componentes interactivos.
Trade-off
Hubo que reescribir el enrutado y separar cada página en partes estáticas e interactivas, a cambio de un sitio indexable y mucho más ligero.
- Astro SSG
- React islands
- SEO
- 02
Traducciones tipadas
El español es la fuente de verdad y el inglés se tipa contra su estructura, así que una clave que falta en un idioma rompe la compilación en lugar de llegar a producción.
- TypeScript
- i18n
- hreflang
- 03
Formularios en el propio hosting
Los formularios se envían a un endpoint PHP en el mismo servidor compartido, con plantillas de email por tipo de formulario, sin depender de un servicio externo de formularios.
Trade-off
Las credenciales de SMTP se despliegan a mano fuera del repositorio, un paso manual a cambio de no añadir otro proveedor.
- PHP
- PHPMailer
- Google Workspace
Siguiente proyecto · 03
Moodflix →
