Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add board stats modal with task breakdown 📊

Abierto Apto para principiantes
#441 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@zenithamza ya está trabajando en esto.

Desde el 28/8/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
80/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
javascript, react, tailwindcss
Área
frontend

Línea de trabajo

Empieza en client/src/pages/Dashboard.jsx, donde el issue indica añadir el botón de stats y el modal. Comprueba cómo se renderizan actualmente la navbar y los datos de las tasks, y luego ejecuta las comprobaciones existentes del proyecto. Listo cuando el modal se pueda abrir y muestre el total de tasks, los recuentos por status y el recuento de alta prioridad, y se cierre al hacer clic.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

good first issue

Add board stats modal with task breakdown 📊

File: client/src/pages/Dashboard.jsx

No way to see overall board health 💀
How many tasks per status? Per priority? fr!!

Fix: add stats button in navbar:
const [showStats, setShowStats] = useState(false)

const stats = {
total: tasks.length,
byStatus: {
backlog: tasks.filter(t => t.status === 'backlog').length,
inprogress: tasks.filter(t => t.status === 'inprogress').length,
review: tasks.filter(t => t.status === 'review').length,
done: tasks.filter(t => t.status === 'done').length,
},
byPriority: {
high: tasks.filter(t => t.priority === 'high').length,
medium: tasks.filter(t => t.priority === 'medium').length,
low: tasks.filter(t => t.priority === 'low').length,
}
}

{showStats && (

setShowStats(false)}>

📊 Board Stats

Total: {stats.total} tasks

🔵 In Progress: {stats.byStatus.inprogress}

✅ Done: {stats.byStatus.done}

🔴 High priority: {stats.byPriority.high}

)}

~25 lines! No backend needed 🎯

Lenguaje dominante
JavaScript
Estrellas
39
Forks
105
Merge medio
1 d 19 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de anoopcodehack/DevBoard

Todos los issues de anoopcodehack/DevBoard

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.