De Idea a Aplicación Web: Creando ExamGenius con Vibe Coding y Claude

En el dinámico mundo del desarrollo de software, encontrar formas más eficientes de materializar ideas ha sido siempre una búsqueda constante. Recientemente, completé un proyecto que transformó radicalmente mi perspectiva sobre el desarrollo de aplicaciones web: ExamGenius, una aplicación que permite generar exámenes de práctica a partir de documentos subidos por estudiantes, utilizando IA generativa. Lo que hace a este proyecto especial no es solo su funcionalidad, sino cómo se construyó: utilizando un enfoque de "Vibe Coding" con Claude de Anthropic como mi copiloto de desarrollo. En este artículo, compartiré esta experiencia de desarrollo, los desafíos que enfrentamos, y cómo la IA generativa está cambiando el panorama del desarrollo de software. ¿Qué es "Vibe Coding"? Antes de sumergirme en los detalles técnicos, permítanme explicar lo que entiendo por "Vibe Coding". Es un enfoque de programación colaborativa donde un humano y una IA trabajan juntos, el humano proporcionando la dirección estratégica, requisitos y ajustes, mientras la IA maneja gran parte de la generación de código y la implementación de patrones de diseño. Es diferente de simplemente usar un asistente de codificación. Con Vibe Coding, estás construyendo un sistema completo en colaboración con la IA, discutiendo arquitectura, tomando decisiones de diseño y revisando código juntos, casi como pair programming con un compañero digital extremadamente competente. ExamGenius: El Proyecto ExamGenius es una aplicación web que permite a los estudiantes cargar uno o varios documentos PDF o fotografías de libros de texto o apuntes. La aplicación utiliza IA para extraer el texto y generar un examen de práctica personalizado que puede descargarse en formato PDF. Los requisitos clave incluían: Una arquitectura de microservicios serverless en AWS Cumplimiento con los principios de 12-factor app Frontend moderno desarrollado con Next.js Backend basado en Lambda, S3, Step Functions y Bedrock Arquitectura Técnica La solución que construimos consta de dos componentes principales: Backend Serverless Construimos una sólida arquitectura de microservicios utilizando AWS Lambda con los siguientes componentes: Upload Service: Recibe documentos y los almacena en S3, iniciando un flujo en Step Functions. Extract Service: Utiliza AWS Textract para extraer texto de documentos PDF e imágenes. Generate Service: Emplea AWS Bedrock (Claude) para generar exámenes basados en el contenido extraído. PDF Service: Convierte el examen generado a formato PDF descargable. Status Service: Proporciona actualización en tiempo real del progreso. Toda la infraestructura se definió como código utilizando Terraform, siguiendo las mejores prácticas de IaC. Frontend con Next.js El frontend utiliza Next.js 14 con App Router y sigue un diseño moderno con: Tailwind CSS para el estilizado React Query para manejo de estado y sincronización Radix UI para componentes accesibles React Hook Form para manejo de formularios Implementamos un diseño atractivo y responsive que guía al usuario a través del proceso de generación de exámenes y muestra actualizaciones de progreso en tiempo real. El Proceso de Vibe Coding con Claude Ahora, veamos cómo fue el proceso real de construir ExamGenius. A diferencia del desarrollo tradicional, donde habría comenzado escribiendo documentación detallada, configurando repositorios y creando manualmente cada componente, con Claude adoptamos un enfoque más fluido y exploratorio. 1. Definición Inicial Comencé con una definición simple: Quiero crear una aplicación web basada en GenAI, la aplicación se llama "ExamGenius", esta app permite a los estudiantes cargar uno o varios documentos PDF o fotografías de libros de texto o de su cuaderno y basado en esta información crea un examen de práctica que pueda ser descargado en formato PDF. Claude inmediatamente propuso una arquitectura de microservicios serverless en AWS, con componentes clave como AWS Bedrock, Textract, S3, Lambda y Step Functions. A partir de ahí, comenzamos a iterar. 2. Definición de Arquitectura y Flujo En pocos minutos, Claude produjo diagramas detallados utilizando Mermaid para visualizar tanto la arquitectura de microservicios como el flujo de trabajo de la aplicación: 3. Desarrollo del Backend Con la arquitectura acordada, procedimos a construir cada servicio Lambda. Claude generó código completo y bien estructurado para cada componente, incluyendo: Manejo adecuado de errores Configuración de Step Functions Código Terraform para la infraestructura Scripts de empaquetado Lo interesante fue que Claude podía mantener un contexto extraordinariamente coherente a lo largo de múltiples servicios, asegurando que todo se integrara correctamente. 4. Desarrollo del Frontend En paralelo, desarrollamos un frontend moderno utilizando Next.js. Claude me sorp

Apr 1, 2025 - 03:51

De Idea a Aplicación Web: Creando ExamGenius con Vibe Coding y Claude

En el dinámico mundo del desarrollo de software, encontrar formas más eficientes de materializar ideas ha sido siempre una búsqueda constante. Recientemente, completé un proyecto que transformó radicalmente mi perspectiva sobre el desarrollo de aplicaciones web: ExamGenius, una aplicación que permite generar exámenes de práctica a partir de documentos subidos por estudiantes, utilizando IA generativa.

Lo que hace a este proyecto especial no es solo su funcionalidad, sino cómo se construyó: utilizando un enfoque de "Vibe Coding" con Claude de Anthropic como mi copiloto de desarrollo. En este artículo, compartiré esta experiencia de desarrollo, los desafíos que enfrentamos, y cómo la IA generativa está cambiando el panorama del desarrollo de software.

¿Qué es "Vibe Coding"?

Antes de sumergirme en los detalles técnicos, permítanme explicar lo que entiendo por "Vibe Coding". Es un enfoque de programación colaborativa donde un humano y una IA trabajan juntos, el humano proporcionando la dirección estratégica, requisitos y ajustes, mientras la IA maneja gran parte de la generación de código y la implementación de patrones de diseño.

Es diferente de simplemente usar un asistente de codificación. Con Vibe Coding, estás construyendo un sistema completo en colaboración con la IA, discutiendo arquitectura, tomando decisiones de diseño y revisando código juntos, casi como pair programming con un compañero digital extremadamente competente.

ExamGenius: El Proyecto

ExamGenius es una aplicación web que permite a los estudiantes cargar uno o varios documentos PDF o fotografías de libros de texto o apuntes. La aplicación utiliza IA para extraer el texto y generar un examen de práctica personalizado que puede descargarse en formato PDF.

Los requisitos clave incluían:

Una arquitectura de microservicios serverless en AWS
Cumplimiento con los principios de 12-factor app
Frontend moderno desarrollado con Next.js
Backend basado en Lambda, S3, Step Functions y Bedrock

Arquitectura Técnica

La solución que construimos consta de dos componentes principales:

Backend Serverless

Construimos una sólida arquitectura de microservicios utilizando AWS Lambda con los siguientes componentes:

Upload Service: Recibe documentos y los almacena en S3, iniciando un flujo en Step Functions.
Extract Service: Utiliza AWS Textract para extraer texto de documentos PDF e imágenes.
Generate Service: Emplea AWS Bedrock (Claude) para generar exámenes basados en el contenido extraído.
PDF Service: Convierte el examen generado a formato PDF descargable.
Status Service: Proporciona actualización en tiempo real del progreso.

Toda la infraestructura se definió como código utilizando Terraform, siguiendo las mejores prácticas de IaC.

Frontend con Next.js

El frontend utiliza Next.js 14 con App Router y sigue un diseño moderno con:

Tailwind CSS para el estilizado
React Query para manejo de estado y sincronización
Radix UI para componentes accesibles
React Hook Form para manejo de formularios

Implementamos un diseño atractivo y responsive que guía al usuario a través del proceso de generación de exámenes y muestra actualizaciones de progreso en tiempo real.

El Proceso de Vibe Coding con Claude

Ahora, veamos cómo fue el proceso real de construir ExamGenius. A diferencia del desarrollo tradicional, donde habría comenzado escribiendo documentación detallada, configurando repositorios y creando manualmente cada componente, con Claude adoptamos un enfoque más fluido y exploratorio.

1. Definición Inicial

Comencé con una definición simple:

Quiero crear una aplicación web basada en GenAI, la aplicación se llama "ExamGenius", 
esta app permite a los estudiantes cargar uno o varios documentos PDF o fotografías 
de libros de texto o de su cuaderno y basado en esta información crea un examen de 
práctica que pueda ser descargado en formato PDF.

Claude inmediatamente propuso una arquitectura de microservicios serverless en AWS, con componentes clave como AWS Bedrock, Textract, S3, Lambda y Step Functions. A partir de ahí, comenzamos a iterar.

2. Definición de Arquitectura y Flujo

En pocos minutos, Claude produjo diagramas detallados utilizando Mermaid para visualizar tanto la arquitectura de microservicios como el flujo de trabajo de la aplicación:

3. Desarrollo del Backend

Con la arquitectura acordada, procedimos a construir cada servicio Lambda. Claude generó código completo y bien estructurado para cada componente, incluyendo:

Manejo adecuado de errores
Configuración de Step Functions
Código Terraform para la infraestructura
Scripts de empaquetado

Lo interesante fue que Claude podía mantener un contexto extraordinariamente coherente a lo largo de múltiples servicios, asegurando que todo se integrara correctamente.

4. Desarrollo del Frontend

En paralelo, desarrollamos un frontend moderno utilizando Next.js. Claude me sorprendió con su capacidad para seguir las mejores prácticas actuales:

App Router basado en componentes React
Hooks personalizados para lógica de negocio
Patrón de carga asíncrona con estados de carga/éxito/error
Feedback visual en tiempo real del progreso

Aquí hay un ejemplo de un componente de carga que Claude generó:

'use client';

import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { FileUp, X, AlertCircle, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { validateFile } from '@/utils/validation';
import { formatFileSize } from '@/utils/format';
import { useUpload } from '@/hooks/use-upload';

export function UploadForm({ onSuccess, className }) {
  const [files, setFiles] = useState([]);
  const { uploadFiles, isUploading, error, result } = useUpload();

  const onDrop = useCallback((acceptedFiles) => {
    const validFiles = acceptedFiles.filter(file => validateFile(file).valid);
    setFiles(prevFiles => [...prevFiles, ...validFiles]);
  }, []);

  // Implementación restante...
}

Y acá vemos unas imágenes del diseño final generado

5. Iteración y Refinamiento

Uno de los aspectos más valiosos del enfoque de Vibe Coding fue la capacidad de iterar rápidamente. Cuando nos dimos cuenta de que faltaba el endpoint jobs/status para consultar el estado de los trabajos, por ejemplo, simplemente mencioné el problema y Claude generó una implementación completa, incluyendo manejo de permisos IAM adecuados.

Desafíos y Aprendizajes

Este enfoque no estuvo exento de desafíos:

1. Problemas de CORS

Enfrentamos problemas de CORS típicos al desarrollar localmente. Claude no solo identificó correctamente el problema, sino que propuso múltiples soluciones:

Configurar CORS en API Gateway
Configurar CORS en las respuestas Lambda
Implementar un proxy temporal en Next.js

2. Permisos IAM

Un desafío frecuente en aplicaciones AWS es la configuración correcta de permisos. Cuando la Lambda de status no podía listar ejecuciones de Step Functions, Claude identificó que necesitábamos una política IAM más específica:

{
  Effect = "Allow"
  Action = [
    "states:ListExecutions"
  ]
  Resource = [
    aws_sfn_state_machine.exam_generation_workflow.arn
  ]
}

3. Carga de Estilos

Cuando tuvimos problemas con la carga de estilos en el frontend, Claude proporcionó soluciones exhaustivas, incluyendo verificaciones del archivo global.css, configuración de Tailwind, y alternativas de importación.

Comparación con el Desarrollo Tradicional

Para poner en perspectiva el valor de este enfoque, comparemos el tiempo y recursos utilizados:

Desarrollo Tradicional:

Creación de documentación detallada: 1-2 días
Configuración de repositorio y entorno: 0.5 días
Desarrollo del backend con AWS: 5-7 días
Desarrollo del frontend: 4-5 días
Testing e integración: 2-3 días Total: 12.5-17.5 días (100-140 horas)

Vibe Coding con Claude:

Definición inicial y arquitectura: 2 horas
Desarrollo del backend: 8 horas
Desarrollo del frontend: 6 horas
Iteración y correcciones: 4 horas Total: 20 horas

Esta comparación es reveladora: el tiempo necesario se redujo aproximadamente un 85%, sin comprometer la calidad del código o las mejores prácticas.

Conclusiones: El Futuro del Desarrollo de Software

Esta experiencia me ha llevado a varias conclusiones importantes:

1. El Rol del Desarrollador está Evolucionando

En lugar de escribir cada línea de código, el futuro desarrollador podría enfocarse más en:

Definir problemas con claridad
Tomar decisiones arquitectónicas estratégicas
Validar y refinar el código generado
Aportar el contexto de negocio que la IA no posee

2. Democratización del Desarrollo

Las herramientas de IA como Claude están democratizando el desarrollo de software, permitiendo que individuos con conocimientos técnicos limitados construyan soluciones complejas.

3. Calidad del Código

Contrario a lo que podría esperarse, el código generado seguía buenas prácticas, estaba bien estructurado y documentado, y utilizaba patrones modernos.

4. Velocidad con Calidad

Quizás lo más impresionante: no tuvimos que elegir entre velocidad y calidad. Obtuvimos ambas.

¿Es Este el Futuro?

ExamGenius es solo un ejemplo de lo que es posible con la programación asistida por IA. Si bien este enfoque tiene limitaciones (especialmente en proyectos muy grandes o altamente especializados), muestra claramente un futuro donde los desarrolladores y la IA trabajan en tándem, combinando la creatividad y contexto humano con la velocidad y precisión de la IA.

La próxima vez que tengas una idea para una aplicación web, considera el enfoque de Vibe Coding. No se trata de reemplazar a los desarrolladores, sino de potenciarlos, permitiéndoles enfocarse en lo que hacen mejor: resolver problemas reales para usuarios reales.

¿Has experimentado con enfoques similares en tu desarrollo? ¿Cuáles han sido tus experiencias con herramientas de IA para programación? Comparte tus pensamientos en los comentarios.