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
- Crear la carpeta del proyecto:
- Crea una carpeta principal llamada
main-app
- Dentro de ella, crea una subcarpeta llamada
backend
- Crea una carpeta principal llamada
- Inicializar el proyecto Node.js: bash
cd backend npm init -y
Paso 2: Usando Cursor AI para generar la API
- Abrir el chat de Cursor AI:
- Presiona
Cmd + L
(Mac) oCtrl + L
(Windows/Linux)
- Presiona
- 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.
- 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
- MongoDB local: Si tienes MongoDB instalado localmente, el proyecto funcionará automáticamente.
- 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 usuarioslogin
– Inicio de sesiónlogout
– Cierre de sesiónprofile
– 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
- Instalar Thunder Client:
- Ve a Extensiones en VS Code
- Busca «Thunder Client»
- Instala la extensión
Opción 2: Obtener todos los endpoints
- Pregunta al AI por los endpoints:
Lista todos los endpoints para este proyecto
- Endpoints generados:
POST /api/auth/register
– RegistroPOST /api/auth/login
– Inicio de sesiónPOST /api/auth/logout
– Cierre de sesiónGET /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:
- Busca «MongoDB» en extensiones
- Instala la extensión oficial
- Conecta usando tu string de conexión
- 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
- Actualizar
tailwind.config.js
:
javascriptmodule.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
- 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:
- API completa de autenticación con Express y MongoDB
- Aplicación React que consume la API
- Autenticación JWT funcional
- Diseño moderno con Tailwind CSS
- Navegación con React Router
- 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:
- Sé específico en tus prompts: Mientras más detalles des, mejor será el resultado
- Usa referencias de carpetas:
@carpeta/
para que el AI entienda tu estructura - Itera gradualmente: Haz cambios pequeños y prueba cada uno
- 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!