Resumen
Implementa con confianza un sistema de ratings con estrellas en la lista de cursos del frontend usando Cloud Code. Verás cómo levantar servicios con yarn install y yarn dev, coordinar el backend con Makefile, crear la UI de star-rating con datos mock, y validarla con capturas de pantalla para iterar estilos en CSS.
+¿Cómo implementar ratings en frontend con Cloud Code?
+Con el entorno listo, el objetivo es claro: permitir calificar cursos de 1 a 5 estrellas y visualizar estadísticas agregadas, empezando por la UI en la lista de cursos. Se prepara el plan, se da contexto a Cloud Code y se limita el alcance para avanzar rápido con datos mock mientras el API queda pendiente.
+-
+
- Revisa instrucciones en README.md y prepara dependencias con yarn install. +
- Levanta el servidor de frontend con yarn dev y valida en localhost:3000. +
- Si falla por datos, enciende el backend con make start del Makefile. +
- Usa el plan de implementación y pásalo como contexto a Cloud Code antes de pedir cambios. +
- Limita el alcance: primero UI en lista de cursos, luego vista de curso y clases. +
¿Qué pasos inician el entorno de desarrollo?
+-
+
- Entra a la carpeta de frontend y abre conversación con Cloud Code. +
- Ejecuta yarn install para dependencias. +
- Corre yarn dev y envíalo a segundo plano con Control-B. +
- Revisa tareas activas en “Bashes” y ubica el servicio listo. +
- Abre localhost:3000. Si hay error por cursos, enciende el backend. +
- En el backend, corre make start para base de datos y API. +
¿Qué es importante del plan de implementación?
+-
+
- Proporciona contexto del plan con command option K para que el agente no invente requisitos. +
- Invoca al subagente de frontend solo para la lista de cursos. +
- Si la conversación está en otra sesión, usa el comando export para copiarla y pegarla; Cloud Code la comprimirá, pero el contenido se conserva. +
¿Cómo crear el componente de ratings con datos mock?
+El enfoque es construir el componente de UI y simular datos. Así validas la interacción visual y el diseño sin depender aún de la integración con el API.
+¿Cómo limitar el alcance y evitar sobreimplementación?
+-
+
- Pide explícitamente: crear componente de star-rating para la lista, con datos mock. +
- Autoriza ediciones en archivos como “rating.ts” para tipos e interfaces en TypeScript. +
- Si el agente se va al backend, detén y reencamina: solo UI por ahora. +
¿Qué problemas comunes surgen al correr el servidor?
+-
+
- Si el puerto 3000 está en uso, detén la instancia previa. +
- Reinicia yarn dev en la sesión activa de Cloud Code para mantener contexto. +
- Verifica en “Bashes” que haya una sola instancia operando. +
¿Qué entregables de UI se validan?
+-
+
- Estrellas interactivas en modo read-only para la lista de cursos. +
- Promedio visual (por ejemplo, 3.5) con contador de valoraciones. +
- Efecto en CSS para destacar el promedio y consistencia entre tarjetas. +
- Datos mock por curso para probar estados visuales. +
¿Cómo mejorar estilos y validar con capturas?
+La validación visual con capturas de pantalla acelera el ajuste fino de CSS. Cloud Code puede analizar imágenes y proponer mejoras coherentes con el plan.
+¿Cómo compartir capturas en Cloud Code?
+-
+
- Captura pantalla en MacOS y copia al portapapeles. +
- Pega en Cloud Code con Control-B para adjuntar la imagen. +
- Si la imagen no es la correcta, repite la captura segmentada. +
- Pide análisis detallado: el agente identificará el star-rating, el modo read-only, los datos mock y los estilos. +
- Usa ese feedback para iterar espaciados, colores, tamaños y estados hover/focus. +
Te invito a completar el componente de ratings para la vista de curso y la vista de clases, y a contar en comentarios qué retos encontraste y cómo los resolviste. Próximamente, conecta la UI con el API del backend para persistir y leer calificaciones reales.