Los mejores proyectos para portafolio en JavaScript: de principiante a profesional

Por qué el portafolio lo decide todo, o cómo no estancarse en el nivel «Hola, Mundo»

En las entrevistas de JavaScript, el empleador no mira la lista de cursos completados, sino tres cosas: código, lógica y capacidad de llevar las cosas hasta el final. Son precisamente los proyectos para portafolio en JavaScript los que se convierten en ese puente entre «sé teoría» y «puedo resolver un problema de negocio».

El problema de muchos principiantes es que se estancan en tutoriales interminables. «Haz 10 proyectos en una semana» suena genial, pero al final obtienes 10 clones de la misma calculadora. Yo propongo otro camino: 5 proyectos que realmente mostrarán tu nivel y cubrirán el 90% de los requisitos de las vacantes de Desarrollador JavaScript Junior/Middle.

En este artículo encontrarás no solo ideas, sino soluciones arquitectónicas listas, fragmentos de código real y una explicación de por qué este proyecto en particular te hará destacar entre la multitud de candidatos. ¿Empezamos?

1. Lista To-Do con lógica avanzada: no solo «agregar-eliminar»

El proyecto más trivial del mundo. Pero si lo haces como todos, no te notarán. Crea un tablero Kanban con drag-and-drop en JavaScript puro. Esto demostrará que sabes trabajar con eventos del DOM, LocalStorage y asincronía.

Qué debe incluir

\n
• Tres columnas: «Por hacer», «En progreso», «Terminado».
\n
• Arrastrar y soltar tarjetas con guardado de posición en LocalStorage.
\n
• Filtrado por etiquetas (trabajo/personal/urgente).
\n
• Modo oscuro (muestra cuidado por la experiencia de usuario).
\n

Ejemplo de implementación de drag-and-drop en JS puro

const draggables = document.querySelectorAll('.task');\nconst containers = document.querySelectorAll('.column');\n\ndraggables.forEach(task => {\n    task.addEventListener('dragstart', () => {\n        task.classList.add('dragging');\n    });\n\n    task.addEventListener('dragend', () => {\n        task.classList.remove('dragging');\n        saveToLocalStorage(); // función personalizada de guardado\n    });\n});\n\ncontainers.forEach(column => {\n    column.addEventListener('dragover', e => {\n        e.preventDefault();\n        const afterElement = getDragAfterElement(column, e.clientY);\n        const draggable = document.querySelector('.dragging');\n        if (afterElement == null) {\n            column.appendChild(draggable);\n        } else {\n            column.insertBefore(draggable, afterElement);\n        }\n    });\n});\n\nfunction getDragAfterElement(container, y) {\n    const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];\n    return draggableElements.reduce((closest, child) => {\n        const box = child.getBoundingClientRect();\n        const offset = y - box.top - box.height / 2;\n        if (offset < 0 && offset > closest.offset) {\n            return { offset: offset, element: child };\n        } else {\n            return closest;\n        }\n    }, { offset: Number.NEGATIVE_INFINITY }).element;\n}\n

Por qué es genial: demuestras comprensión del modelo de eventos del navegador, trabajo con coordenadas y optimización del rendimiento (debounce no es necesario, pero puedes mencionarlo en el readme).

2. Aplicación del clima con geolocalización y animaciones

Las solicitudes a API son la base del frontend moderno. Un proyecto en JavaScript usando fetch, async/await y manejo de errores es un punto obligatorio en el portafolio. Añade visualización: nubes animadas, lluvia o nieve con CSS/Canvas.

Funcionalidades clave

\n
• Determinación de ubicación mediante Geolocation API.
\n
• Búsqueda de ciudades con sugerencias (debounce en input).
\n
• Visualización de temperatura, humedad, viento e icono del clima.
\n
• Gráfico de temperatura a 5 días (Chart.js o SVG personalizado).
\n

Ejemplo de solicitud a OpenWeatherMap

async function getWeather(city) {\n    const API_KEY = 'tu_clave';\n    const url = `https://api.openweatherm