Configura y valida un proyecto JavaScript desde cero con buenas prácticas de desarrollo. Aquí verás cómo crear el repositorio con Git, preparar npm, abrir tu editor y montar un MVP funcional de un gestor de hábitos, listo para aplicar programación orientada a objetos. Todo ocurre en local, con una estructura clara y pruebas rápidas usando Live Server.
¿Cómo preparar el entorno de desarrollo con terminal, Git y npm?
Antes de escribir código, es clave organizar el espacio de trabajo y versionar desde el inicio. Se crea una carpeta nueva, se inicializa Git para tener el historial de cambios y se prepara npm con configuración por defecto para futuros paquetes. Después, se abre el editor de preferencia como Visual Studio Code (o Windsor, Cursor), arrancándolo desde la terminal.
Crear carpeta del proyecto y entrar en ella.
Inicializar repositorio con git init.
Configurar npm con valores por defecto.
Abrir el editor desde la terminal.
mkdir"JS Habits"cd"JS Habits"git init
npm init -y
# Abrir el proyecto en el editor (VS Code)code .
¿Qué comandos usar para iniciar el repositorio y el proyecto?
git init: crea el repositorio local y el historial de cambios.
npm init -y: genera package.json con configuración por defecto.
code .: abre el proyecto en Visual Studio Code para editar de inmediato.
Alternativas: otros editores suelen ofrecer un comando similar para abrir desde la terminal.
¿Cómo estructurar el proyecto y cargar el código base?
Una vez en el editor, se crea la carpeta src y tres archivos principales: index.html, app.js y styles.css. Los recursos iniciales vienen preparados como producto mínimo viable: traes el HTML base, los estilos y el JavaScript inicial para comenzar a trabajar sin fricción. A partir de aquí, el objetivo es aplicar POO al código existente.
Este es un buen momento para practicar lectura de código: entender la estructura, los elementos, por qué se organizó así y dónde puedes mejorar o agregar características. Esa habilidad te acompaña en todo el ecosistema del desarrollo.
¿Qué funciones tiene el mínimo producto viable del gestor de hábitos?
El MVP permite registrar hábitos y marcar su cumplimiento diario de forma sencilla, usando solo HTML, CSS y JavaScript.
Agregar un hábito, por ejemplo: “correr”.
Definir periodicidad como “diario”.
Generar los días del mes visibles en la interfaz.
Registrar el hábito en el día actual.
Marcar manualmente cada día según cumplimiento.
¿Cómo validar en el navegador con Live Server?
Para ver cambios en tiempo real, se usa el complemento Live Server en editores basados en Visual Studio Code. Se ejecuta desde el archivo index.html para iniciar un servidor local y abrir el navegador. Ahí validas que el diseño base, la estructura de HTML y el JavaScript estén funcionando.
Instalar y activar Live Server en tu editor.
Ejecutarlo desde index.html para abrir el proyecto en el navegador.
Probar: agregar un hábito, confirmar que se crean los días del mes y que puedes registrarlos por jornada.
Ajustar detalles y seguir analizando el código para preparar la aplicación a POO.
¿Tienes dudas, mejoras o quieres compartir cómo aplicaste POO al gestor de hábitos? Deja tu comentario y conversemos sobre tu solución.
Configuración de proyecto JavaScript con Git y npm
