Ratings en frontend con datos mock y Claude Code

Contenido del curso

No sé dónde empezar

Módulo 1: Discovery-Análisis-Planning

Módulo 2: Implementación Backend

Módulo 3: Gestión de Contexto y Comandos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:48

Ratings en frontend con datos mock y Claude Code

Curso de Claude Code

Clase 12 de 18

Clase 12 / 18

Recursos

Implementar un sistema de ratings en el frontend con Claude Code te permite acelerar el desarrollo de componentes UI sin perder control sobre el alcance. Aquí verás cómo levantar el servidor, exportar conversaciones entre sesiones, invocar subagentes especializados y usar capturas de pantalla como contexto visual para iterar sobre el diseño.

Cómo levantar el servidor de frontend con Claude Code

Antes de tocar una sola línea de código, necesitas el entorno corriendo. El archivo README.markdown dentro de la carpeta de frontend suele tener las instrucciones, pero cuando no las encuentras, Claude Code puede leer la base de código y proponer cómo ejecutarla.

El flujo estándar es sencillo: instalar dependencias y luego arrancar el servicio.

Ejecuta yarn install para instalar dependencias.
Corre yarn dev desde la terminal de Claude Code para que tome la salida como contexto.
Presiona Control+B para mandar el proceso a background y liberar la conversación.
Usa el comando bashes para ver las tareas activas y su salida.

En el ejemplo de la clase, el servicio quedó listo en 639 milisegundos en localhost:3000 [02:30]. Si abres el navegador y ves un error porque no encuentra la lista de cursos, significa que el backend no está prendido. Entra a la carpeta backend y ejecuta make start para levantar la base de datos y el API juntos.

¿Qué hace Control+B en Claude Code? Envía un proceso largo, como un servidor de desarrollo, al background para seguir conversando con el agente sin bloquear la sesión.

Cómo exportar una conversación de Claude Code a otra sesión

Cuando abres Claude Code dentro de la carpeta de frontend, los subagentes definidos en la raíz del proyecto no están disponibles. Para no perder el contexto que ya construiste, usa el comando export [06:45].

Este comando te ofrece dos caminos: copiar la conversación al portapapeles o guardarla en un archivo. Al elegir la opción uno, puedes pegar todo el historial en una nueva sesión abierta desde la carpeta padre.

Cuando pegas un texto extenso, Claude Code lo comprime visualmente y muestra un mensaje indicando que se pegó un bloque de más de cien líneas. Internamente sí recibe el contenido completo, pero la interfaz se mantiene ordenada.

La instrucción que acompaña al pegado es clave: pídele que entienda el contexto de la conversación previa antes de continuar. Así puedes invocar al subagente especialista en frontend sin reconstruir todo el plan desde cero.

Cómo invocar el subagente de frontend para crear el componente de rating

Con el contexto cargado, el siguiente paso es ejecutar la fase uno del plan: tipos e interfaces de ratings. La instrucción debe ser específica para evitar que el agente se desvíe.

Un problema frecuente con agentes de codificación es que se van más allá del alcance solicitado. En la clase, Claude empezó a revisar archivos del backend cuando solo se le pidió la UI de la lista de cursos. La solución fue detener la ejecución y enviar un prompt correctivo.

¿Cómo evito que Claude Code haga más de lo pedido? Sé explícito en el alcance, indica qué archivos puede tocar y aclara cuándo usar datos mock en lugar de integrarse con APIs reales.

La instrucción correcta fue: crear el componente de ratings con valores mock para ciertos cursos, sin tocar la integración con el API. Tras el ajuste, el agente generó la lista de tareas pendientes nuevamente y procedió con la implementación de los componentes UI.

Para aprobar ediciones más rápido durante una sesión activa, presiona la opción dos cuando aparezca el diálogo de permisos. Esto permite cualquier modificación sin confirmar archivo por archivo.

Qué pasa cuando el puerto 3000 ya está en uso

Si tienes un yarn dev corriendo por fuera de Claude Code y el agente intenta levantarlo de nuevo, verás un error de puerto ocupado. Detén el proceso anterior y deja que Claude reinicie el servicio dentro de su propia sesión, así mantiene el contexto de la salida del servidor.

Al ejecutar bashes después de esto, verás dos instancias: una detenida y otra activa con el yarn dev actual.

Cómo usar capturas de pantalla como contexto visual en Claude Code

Una vez que el componente está renderizado, abrir el navegador en localhost:3000 muestra las estrellas, el contador y un efecto CSS sobre el promedio de cada curso. Pero el diseño rara vez queda perfecto en el primer intento.

Aquí entra una de las funciones más útiles: pegar imágenes directamente en la conversación.

Captura pantalla con la herramienta de tu sistema operativo, en macOS queda en el portapapeles.
Pega la imagen en Claude Code con Control+V, no con Command+V.
Pide un análisis detallado activando el modo de pensamiento extendido o usando ultra think.

El agente describe lo que ve: el card del curso de React con 3.5 estrellas, los estilos aplicados, el modo read-only del componente y los datos mockeados [16:20]. A partir de ese análisis puedes pedirle ajustes de CSS, comparar contra una imagen de referencia o validar que el render coincida con un diseño esperado.

¿Para qué sirve pegar imágenes en Claude Code? Para darle contexto visual del estado actual de la UI o de un diseño de referencia, así sus iteraciones de CSS y layout se basan en lo que realmente ves en pantalla.

Esta capacidad multiplica las formas de pasar contexto. No estás limitado al código: capturas de pantalla, mockups, referencias de Figma o screenshots de bugs funcionan igual.

Qué falta para completar el feature de ratings

La lista de cursos ya muestra el componente con datos mock. Quedan pendientes la vista de detalle del curso y la vista de clases, además de reemplazar los valores simulados por la conexión real al API construido en las clases de backend.

Cuéntame en los comentarios qué retos enfrentaste al implementar el componente para el detalle del curso y cómo los resolviste con Claude Code.

Daniel Alfredo García Serna

Hace 6 meses

📚 Nombre de la clase

Implementación de ratings con estrellas

🎯 Idea principal

La implementación de ratings con estrellas en frontend consiste en traducir datos (números) en una representación visual clara e interactiva, manteniendo sincronización con el backend. No es solo UI, es experiencia de usuario + consistencia de datos.

⚡ Síntesis en 10 segundos

Número → estrellas visuales
UI debe ser clara e intuitiva
Interacción + feedback inmediato
Sincronización con backend
UX simple pero precisa

🔑 Puntos clave

Representación:
- convertir valor numérico (ej: 4/5) en estrellas
- mostrar estado visual claro (llenas, vacías, parciales)
Interacción:
- permitir seleccionar rating
- dar feedback inmediato al usuario
Sincronización:
- enviar datos al backend
- actualizar UI según respuesta
Consideraciones UX:
- claridad visual
- facilidad de uso
- respuesta rápida
Errores comunes:
- desincronización con backend
- mala representación visual
- falta de feedback al usuario

🧠 Conceptos importantes

UI (User Interface) → Representación visual del rating
UX (User Experience) → Cómo se siente usar el sistema
Estado (state) → Valor actual del rating en la interfaz
Feedback visual → Respuesta inmediata a la acción del usuario

🧩 Modelo mental de la clase

Dato (rating) → transformación visual → interacción usuario → envío al backend → actualización de estado

Mostrar → interactuar → enviar → actualizar

🚀 Acciones inmediatas

Define:
- escala de rating (ej: 1–5 estrellas)
Implementa visual:
- estrellas llenas/vacías
Agrega interacción:
- clic o hover para seleccionar
Conecta con backend:
- enviar rating
- actualizar UI
Prueba:
- consistencia visual y funcional

💼 Aplicación profesional

Productos digitales:
- reviews, feedback de usuarios
UX:
- interfaces simples pero efectivas
Frontend:
- manejo de estado y eventos
Integración:
- conexión con APIs backend

🔥 Hacks para la comunidad

Usa feedback inmediato (hover/click)
Evita delays visuales
Maneja estados (loading, error)
No dependas solo del backend para mostrar cambios
Prioriza claridad sobre diseño complejo

📝 Reflexión estratégica

Un sistema de estrellas parece simple, pero define cómo los usuarios perciben calidad.

Si está mal hecho:

confunde
genera frustración
pierde confianza

👉 La clave no es solo mostrar datos… es hacerlos intuitivos y accionables para el usuario.

Buen frontend = decisiones más fáciles para el usuario.

Comentarios (24)24 comentarios

Rafael Armando Jara Fernandez

Hace un año

Felix Bolivar

Hace 8 meses

Felipe Cabeza

Pablo José Estrada Reyes

Hace 4 meses

Wladimir Cabascango 🦊

Hace 5 meses

Vidale C.

César David Ramírez Dimaté

Cristian Antony Soncco Boza

Hace 9 meses

Sergio Valbuena

Hace 7 meses

David Santiago González Ramos

Lesly Samaritano

Hace 2 meses

Alvaro Alexis Otálora Corredor

Juan Felipe Barahona Gonzalez

Julián Bravo

Jesus Delgado

Diego Mauricio Zuluaga Rodríguez

Hace 3 meses

Emanuel Zarazaga

Sebastian Castiblanco Anduquia

Samuel Murillo

Luis Castro

Pedro José Andrade Serpas

Junior Hernandez

Módulo 1: Discovery-Análisis-Planning

Qué hace único a Claude Code

Cómo entender un codebase nuevo con Claude Code

Instala y configura Claude Code en minutos

Cinco conceptos clave para usar Claude Code

Analiza y configura un proyecto con Claude Code

Análisis de impacto del feature de ratings con Claude Code

Cómo crear subagentes especializados en Claude Code

Novedades de Claude Code 2.0 y Sonnet 4.5

Subagentes de frontend y backend en paralelo

Módulo 2: Implementación Backend

Migraciones de base de datos con pruebas en Claude Code

Revisión de seguridad automática con Claude Code

Ratings en frontend con datos mock y Claude Code

Integración full stack con add dir en Claude Code

Módulo 3: Gestión de Contexto y Comandos

Playwright, Notion y Linear como MCPs en Claude Code

Control de costos y modelos en Claude Code

Instala Claude Code en GitHub Actions

Cómo invocar Claude Code desde un pull request

Qué aprendiste sobre desarrollo conversacional

Ratings en frontend con datos mock y Claude Code

Progreso del curso

Módulo 1: Discovery-Análisis-Planning

Módulo 2: Implementación Backend

Módulo 3: Gestión de Contexto y Comandos

Recursos

Recursos