chore: refactor frontend and backend connection in order to accept Vercel URL

Author: EngSteven

backend/src/main.ts

@@ -5,19 +5,26 @@ import { ValidationPipe } from '@nestjs/common';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
+  // Configuramos CORS para que acepte localhost (desarrollo) y URL de Vercel (producción)
+  const allowedOrigins = [
+    'http://localhost:5173',
+    process.env.FRONTEND_URL, 
+  ].filter(Boolean); // Filtramos nulos por si acaso
+
   app.enableCors({
-    origin: 'http://localhost:5173', // Solo aceptamos peticiones de este origen
+    origin: allowedOrigins,
     credentials: true,
   });
 
   app.useGlobalPipes(
     new ValidationPipe({
-      whitelist: true, // Filtra las propiedades que no estén definidas en el DTO
-      forbidNonWhitelisted: true, // Lanza error si envían propiedades extra (seguridad extra)
-      transform: true, // Transforma automáticamente los tipos de datos (ej. string a number)
+      whitelist: true,
+      forbidNonWhitelisted: true,
+      transform: true,
     }),
   );
 
-  await app.listen(process.env.PORT ?? 3000);
+  // Render asigna dinámicamente el PORT, en tu PC usará el 3000
+  await app.listen(process.env.PORT || 3000);
 }
-bootstrap();
+bootstrap();

frontend/src/shared/lib/api.ts

@@ -1,28 +1,23 @@
 import axios from 'axios';
 
-// Creamos una instancia base de Axios
+// 1. Extraemos la URL de las variables de entorno de Vite
+// Si no existe (en local), usamos el fallback de siempre
+const BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
 export const api = axios.create({
-  baseURL: 'http://localhost:3000', // Apunta a nuestro backend de NestJS
+  baseURL: BASE_URL, 
   headers: {
     'Content-Type': 'application/json',
   },
 });
 
-// EL INTERCEPTOR: Se ejecuta antes de cada petición
 api.interceptors.request.use(
   (config) => {
-    // Buscamos el token en la bóveda del navegador
     const token = localStorage.getItem('devtrack_token');
-    
-    // Si existe, lo inyectamos en los Headers
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
-    
     return config;
   },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-
+  (error) => Promise.reject(error)
+);