Pule y prepara para publicar

Convierte código que funciona en un producto terminado

⏱ Estim. ~9 min

01 · Leer

Tu juego funciona. Dos jugadores pueden encontrarse, jugar tic-tac-toe en vivo y manejar las desconexiones con elegancia. Pero funcionar y estar terminado no son lo mismo.

Un proyecto terminado tiene una UI limpia, un README que explica qué es, ningún log de depuración suelto en el código y un historial de git en orden. Esa es la diferencia entre un side project y una pieza de portafolio — algo que de verdad le mostrarías a otro ingeniero o a un reclutador.

Esta lección trata del último 10% que hace brillar el 90% del trabajo anterior.

Puntos clave

Código que funciona no es lo mismo que código terminado
Pulir significa: UI limpia, README, sin logs de depuración, git en orden
El README es lo primero que ve cualquiera que se cruce con tu proyecto
Esto separa un side project de una pieza de portafolio

02 · Plantilla de prompt

Pídele a Claude que mejore el pulido visual del juego. Dale feedback específico sobre lo que se siente tosco.

Mejora la UI del juego de tic-tac-toe. Pedidos específicos: (1) Cuando aparecen los símbolos en las casillas, agrega una transición suave. (2) Cuando alguien gana, resalta las tres casillas ganadoras con un color de fondo diferente. (3) Agrega una pista visual de quién tiene el turno — por ejemplo, hacer que el texto del estado pulse, o cambiar el color al del símbolo del jugador actual. (4) Mientras se busca rival, deshabilita el botón Find Game y muestra un loading spinner o una animación. (5) Asegúrate de que el juego se vea bien en móvil — el tablero debe escalar en pantallas pequeñas.

03 · Plantilla de prompt

Todo proyecto necesita un README. Pídele a Claude que escriba uno que explique qué es el proyecto, cómo correrlo y qué tecnologías usa.

Ayúdame a crear un README.md para mi proyecto de tic-tac-toe. El contenido debe incluir: (1) El título y una descripción de una línea. (2) Una sección 'How to Play' que explique el flujo (buscar rival, turnos, victoria/empate). (3) Una sección 'Tech Stack' que liste Node.js, Express, Socket.io y HTML/CSS/JS puros. (4) Una sección 'Run Locally' con instrucciones paso a paso: clone, npm install, node server.js, abrir localhost:3000. (5) Una sección 'How It Works' que explique brevemente la arquitectura cliente-servidor y la comunicación por WebSocket. Mantenlo conciso — nadie va a leer un README de 500 líneas.

04 · Lista de verificación

Recorre esta lista para preparar la publicación. Cada ítem separa un proyecto amateur de uno profesional.

Saqué todos los console.log de depuración (dejé solo los de connection/disconnection en server.js)
La UI del juego se ve limpia — sin elementos superpuestos, layout roto ni texto placeholder
El README explica qué es el proyecto y cómo correrlo
Creé un archivo .gitignore que excluye node_modules/
No hay URLs de localhost hardcodeadas en el código — uso rutas relativas para que funcione al desplegar
Después de todos los cambios de pulido, volví a probar el flujo completo del juego

05 · Práctica real

Inicializa el repositorio de git, haz tu primer commit y haz push a GitHub. Este es el flujo que aprendiste en el Nivel 4.

06 · Quiz

¿Por qué deberías eliminar los console.log de depuración antes de publicar?

Hacen que el servidor sea notablemente más lento
Exponen el estado interno a cualquiera que abra DevTools, ensucian los logs del servidor y dificultan encontrar problemas reales
JavaScript no permite console.log en modo producción
Socket.io entra en conflicto con console.log

07 · Completar

El archivo _____ le dice a otros ingenieros qué es tu proyecto, cómo instalarlo y cómo correrlo.

Otras lecciones de este capítulo

⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.

※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.