Proyecto de Autenticación MERN usando Cursor AI

Introducción

En este tutorial, vamos a construir una aplicación completa de autenticación donde los usuarios podrán:

• Registrarse
• Iniciar sesión
• Cerrar sesión
• Ver su perfil

Utilizaremos el stack MERN:

• MongoDB (Base de datos)
• Express (Framework de backend)
• React (Frontend)
• Node.js (Entorno de ejecución)

Lo más increíble: No escribiremos ni una sola línea de código manualmente. Usaremos Cursor AI para construir todo el proyecto.

---

Parte 1: Creando la API Backend

Paso 1: Configuración inicial

1. Crear la carpeta del proyecto:
   • Crea una carpeta principal llamada main-app
   • Dentro de ella, crea una subcarpeta llamada backend
2. Inicializar el proyecto Node.js: bashcd backend npm init -y

Paso 2: Usando Cursor AI para generar la API

1. Abrir el chat de Cursor AI:
   • Presiona Cmd + L (Mac) o Ctrl + L (Windows/Linux)
2. Escribir el prompt para el AI: Vamos a construir un proyecto de API de autenticación usando Express y Mongoose donde un usuario puede registrarse, iniciar sesión, cerrar sesión y ver su perfil. Usa JWT para autenticación y el patrón de diseño MVC.
3. Ejecutar el prompt: Presiona Enter y deja que Cursor AI genere todo el código.

Paso 3: Instalación de dependencias

Una vez que el AI genere los archivos, instala todas las dependencias:

bashnpm install

Paso 4: Configuración de la base de datos

1. MongoDB local: Si tienes MongoDB instalado localmente, el proyecto funcionará automáticamente.
2. MongoDB Atlas (nube): Si no tienes MongoDB local:
   • Ve a mongodb.com
   • Crea una cuenta
   • Obtén tu string de conexión
   • Actualiza el archivo .env con tu URL de MongoDB

Paso 5: Ejecutar el servidor

bashnpm run dev

Si todo está correcto, verás el mensaje de conexión exitosa a MongoDB.

---

Parte 2: Estructura del Backend Generado

Arquitectura MVC creada por Cursor AI:

📁 Controllers (Controladores):

• register – Registro de usuarios
• login – Inicio de sesión
• logout – Cierre de sesión
• profile – Ver perfil

📁 Middleware:

• Autenticación JWT (JSON Web Tokens)

📁 Models:

• Modelo de Usuario

📁 Routes:

• Rutas de autenticación

---

Parte 3: Probando la API

Opción 1: Usando la extensión Thunder Client

1. Instalar Thunder Client:
   • Ve a Extensiones en VS Code
   • Busca «Thunder Client»
   • Instala la extensión

Opción 2: Obtener todos los endpoints

1. Pregunta al AI por los endpoints: Lista todos los endpoints para este proyecto
2. Endpoints generados:
   • POST /api/auth/register – Registro
   • POST /api/auth/login – Inicio de sesión
   • POST /api/auth/logout – Cierre de sesión
   • GET /api/auth/profile – Ver perfil

Pruebas paso a paso:

1. Registro de usuario

Método: POST
URL: http://localhost:3000/api/auth/register
Body (JSON):
{
  "username": "testuser",
  "email": "test@gmail.com",
  "password": "123456"
}

2. Inicio de sesión

Método: POST  
URL: http://localhost:3000/api/auth/login
Body (JSON):
{
  "email": "test@gmail.com",
  "password": "123456"
}

Respuesta: Recibirás un token JWT

3. Ver perfil (requiere autenticación)

Método: GET
URL: http://localhost:3000/api/auth/profile
Headers:
Authorization: Bearer [tu-token-jwt]

4. Cerrar sesión

Método: POST
URL: http://localhost:3000/api/auth/logout
Headers:
Authorization: Bearer [tu-token-jwt]

---

Parte 4: Visualizar la Base de Datos

Instalar extensión MongoDB para VS Code:

1. Busca «MongoDB» en extensiones
2. Instala la extensión oficial
3. Conecta usando tu string de conexión
4. Visualiza los usuarios registrados en tiempo real

---

Parte 5: Creando el Frontend React

Paso 1: Estructura de carpetas

Asegúrate de tener esta estructura:

main-app/
├── backend/
└── frontend/ (lo crearemos ahora)

Paso 2: Crear aplicación React

bashcd main-app
npm create vite@latest frontend
# Selecciona React y JavaScript
cd frontend
npm install
npm run dev

Paso 3: Generar componentes con Cursor AI

Prompt para Cursor AI:

Tu tarea es consumir todos los endpoints de nuestra API backend (referencia la carpeta backend/) usando esta aplicación React. 

Crea los siguientes componentes:
1. Home (página principal)
2. Register (registro)  
3. Login (inicio de sesión)
4. Profile (perfil - debe ser privado)

Usa React Router DOM para navegación.

Nota: La aplicación React ya ha sido creada en la carpeta frontend/. Enfócate solo en la lógica principal.

Paso 4: Instalación de dependencias adicionales

El AI te indicará qué paquetes instalar:

bashnpm install axios react-router-dom

Paso 5: Configurar CORS en el backend

Si encuentras errores de CORS, agrega esto a tu backend:

bashcd backend
npm install cors

El AI actualizará automáticamente el archivo server.js para incluir CORS.

---

Parte 6: Diseño con Tailwind CSS

Paso 1: Instalar Tailwind CSS

bashcd frontend
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Paso 2: Configurar Tailwind

1. Actualizar tailwind.config.js:

javascriptmodule.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Actualizar src/index.css:

css@tailwind base;
@tailwind components;
@tailwind utilities;

Paso 3: Diseñar componentes con AI

Para cada componente, usa prompts como:

Rediseña la página de inicio y hazla atractiva y profesional usando Tailwind CSS

Rediseña el login y asegúrate de mantener consistencia en el diseño

---

Resultado Final

✅ Lo que habrás logrado:

1. API completa de autenticación con Express y MongoDB
2. Aplicación React que consume la API
3. Autenticación JWT funcional
4. Diseño moderno con Tailwind CSS
5. Navegación con React Router
6. Rutas protegidas para el perfil

⏱️ Tiempo invertido:

• Sin Cursor AI: Horas o días
• Con Cursor AI: 20-30 minutos

---

Consejos Importantes

🎯 Mejores prácticas con Cursor AI:

1. Sé específico en tus prompts: Mientras más detalles des, mejor será el resultado
2. Usa referencias de carpetas: @carpeta/ para que el AI entienda tu estructura
3. Itera gradualmente: Haz cambios pequeños y prueba cada uno
4. Aprovecha el debugging: Si algo falla, copia el error y pídeselo al AI

🔧 Resolución de problemas comunes:

• Error de conexión a MongoDB: Verifica tu string de conexión
• CORS errors: Instala y configura el middleware CORS
• Token no válido: Asegúrate de incluir «Bearer » antes del token
• Estilos no aparecen: Verifica que Tailwind esté configurado correctamente

---

Conclusión

Como has visto, Cursor AI es una herramienta tremendamente poderosa que puede acelerar el desarrollo de aplicaciones completas de manera increíble.

Con algunos prompts bien estructurados y pequeños ajustes, hemos creado una aplicación full-stack funcional que normalmente tomaría días de desarrollo tradicional.

El futuro del desarrollo está aquí, ¡y es increíblemente emocionante!