Compara Carreras

• Compara Carreras
  • Requisitos previos
  • Instalación y configuración
  • Desarrollo local
  • Actualización del sistema
  • Conversión de CSV a JSON
  • Despliegue
  • Contribuciones
  • Contacto

Este es el repositorio del proyecto Compara Carreras, desarrollado por IMCO. Este proyecto está construido con Next.js y utiliza GitHub Pages para el despliegue, con soporte de GitHub Actions para la automatización del proceso.

Requisitos previos

Asegúrate de tener instalado:

• Node.js (versión recomendada: 18.x o superior)
• npm
• Acceso al repositorio en GitHub

Instalación y configuración

1. Clona el repositorio:

   git clone https://github.com/IMCO/compara-carreras.git
   cd compara-carreras

2. Instala las dependencias:

   npm install

Desarrollo local

Para correr el proyecto en un entorno local, ejecuta:

npm run dev

Esto levantará un servidor local en http://localhost:3000.

Variables de Entorno (.env.local)

Para que la integración con Google Sheets funcione localmente, crea un archivo .env.local en la raíz con:

GOOGLE_SHEET_ID=tu_id_de_hoja
GOOGLE_SERVICE_ACCOUNT_EMAIL=tu_email_de_servicio
GOOGLE_PRIVATE_KEY="tu_clave_privada"
NEXT_PUBLIC_API_URL=http://localhost:3000

Actualización del sistema

Para realizar actualizaciones al sistema, sigue estos pasos:

1. Crea una rama nueva basada en main:

   git checkout -b feature/nueva-funcionalidad

2. Realiza los cambios necesarios en el código y prueba el proyecto localmente.

3. Confirma y sube los cambios:

   git add .
   git commit -m "Añadida nueva funcionalidad"
   git push origin feature/nueva-funcionalidad

4. Crea un Pull Request (PR) en GitHub desde la rama creada hacia main y espera la revisión.

5. Una vez aprobado el PR, haz merge a main.

Parámetros generales de la edición

El archivo src/parametros_generales.json concentra las cifras que deben actualizarse en cada edición anual (cada llave documenta dónde se muestra y su formato):

Parámetro	Qué es	Dónde se muestra
anio	Año de la edición vigente	Pie de página: "© {anio} ComparaCarreras…" y meta de copyright
salario_promedio_poblacion_ocupada	Salario mensual promedio de la población ocupada en México	Sección "¿Cuánto ganan?" de cada carrera: "Salario promedio mensual de la población ocupada en México es $…"
roi_salario_mensual_preparatoria	Ingreso mensual de quien solo terminó la preparatoria	Calculadora ROI: interviene en el cálculo (no se despliega)
roi_rendimiento_cetes	Rendimiento anual de referencia de los Cetes	Calculadora ROI: tarjeta "Cetes"
roi_rendimiento_oro	Rendimiento anual promedio del oro (última década)	Calculadora ROI: tarjeta "Oro"
roi_rendimiento_sp500	Rendimiento anual promedio del S&P 500 (última década)	Calculadora ROI: tarjeta "S&P 500"
roi_fecha_referencia	Fecha de corte de los rendimientos de referencia	Calculadora ROI: nota "*Referencia a …"

Basta editar el valor en el JSON: los componentes lo leen directamente (se muestra redondeado a pesos con separador de miles).

Conversión de CSV a JSON

Si necesitas convertir archivos CSV a JSON para el proyecto, puedes utilizar la siguiente herramienta en línea:

https://csvjson.com/

Despliegue (Arquitectura Híbrida)

El proyecto utiliza una arquitectura híbrida para soportar funcionalidades de servidor (como la integración con Google Sheets) manteniendo el frontend estático en GitHub Pages.

Componentes

1. Frontend (GitHub Pages): Alojamiento estático. Se construye con output: 'export'.
2. Backend (Vercel): Alojamiento de servidor (Node.js). Provee la API (/api/roi) para manejar peticiones seguras.

Configuración de Entornos

1. Vercel (Backend)

El proyecto debe desplegarse en Vercel para habilitar la API.

• Variables de Entorno requeridas en Vercel:
  • GOOGLE_SHEET_ID: ID de la hoja de cálculo.
  • GOOGLE_SERVICE_ACCOUNT_EMAIL: Email de la cuenta de servicio.
  • GOOGLE_PRIVATE_KEY: Llave privada de la cuenta de servicio.

2. GitHub Pages (Frontend)

El flujo de trabajo de GitHub Actions (.github/workflows/nextjs.yml) se encarga de construir y desplegar el sitio estático.

• Secretos de Repositorio requeridos en GitHub:
  • NEXT_PUBLIC_API_URL: URL del proyecto desplegado en Vercel (ej. https://tu-proyecto.vercel.app). Nota: Sin la barra / al final.

Flujo de Despliegue Automático

1. Al hacer push a main, GitHub Actions inicia el proceso.
2. Elimina la carpeta src/app/api para evitar conflictos con la exportación estática.
3. Construye el proyecto inyectando NEXT_PUBLIC_API_URL.
4. Despliega los archivos estáticos a GitHub Pages.

El sitio estará disponible en:

https://comparacarreras.imco.org.mx/

Contribuciones

Si deseas contribuir, por favor abre un Issue o un Pull Request siguiendo las mejores prácticas de desarrollo.

Sección de Top 10s

El proyecto incluye una sección de rankings "Las 10 más" con distintos indicadores por carrera.

Agregar un nuevo top

1. Crea el archivo JSON con los datos en src/components/las-10-mas/top/.
2. Agrega la tarjeta en src/app/las-10-mas/data.constans.ts.
3. Registra la metadata en src/app/las-10-mas/[slug]/data.constans.ts.

Para más detalles, consulta la guía completa en COMO_AGREGAR_TOPS.md.

---

Sección de Investigaciones

El proyecto incluye una sección automatizada de "Investigaciones" que muestra las últimas publicaciones de Compara Carreras.

Agregar nueva investigación

El proceso de agregar nuevas ediciones está completamente automatizado. El sistema extrae el título, descripción e imagen directamente de la URL proporcionada.

1. Edita el archivo src/app/investigaciones/data.constants.ts.

2. Agrega la nueva configuración:

   {
     id: "cc-2026",
     year: 2026,
     url: "https://imco.org.mx/nueva-investigacion/"
   }

Para más detalles, consulta la guía completa en COMO_AGREGAR_INVESTIGACIONES.md.

Analítica (GA4)

El proyecto utiliza Google Analytics 4 para el seguimiento de usuarios.

• Eventos personalizados: Se rastrean cálculos de ROI (roi_calculation).
• Dimensiones personalizadas: Nivel educativo, carrera, tipo de universidad, etc.
• Métricas personalizadas: Costo total, meses de recuperación, RSI, etc.

Consulta ANALYTICS_DATA_COLLECTION.md para ver la especificación completa de eventos.

Contacto

Para más información, contacta con el equipo de IMCO a través de su página oficial: https://imco.org.mx.