Trabajo

Tabla de Posiciones de la Feria de Ciencias

Comunidad
React
Panel en Tiempo Real

Un panel en vivo para una feria de ciencias escolar: los jueces califican en un Formulario de Google y el panel convierte los resultados en una tabla de posiciones, los ganadores de premios y una ceremonia de premiación a pantalla completa.

La tabla de posiciones de los proyectos con puestos, puntajes e insignias de premio.

Resumen del Proyecto

La Tabla de Posiciones de la Feria de Ciencias se construyó para “The Joy of Wisdom”, la feria de ciencias 2026 de Eternity Christian School International en Honduras. Los jueces califican cada proyecto en un Formulario de Google, y el panel convierte las respuestas en una presentación automática para un proyector o televisor, además de una ceremonia de premiación para cerrar el evento.

Qué muestra

  • Tabla de posiciones: proyectos ordenados con búsqueda, paginación que se ajusta a la pantalla, animaciones de posición cuando cambian los puntajes y un aviso cada vez que se califica un proyecto.
  • Resultados finales: los ganadores de premios por categoría.
  • Detalle del proyecto: al hacer clic en cualquier proyecto se ve su descripción, los estudiantes, el puntaje y el número de calificaciones.
  • Ceremonia de premiación: una presentación a pantalla completa de los ganadores que se avanza a mano, con diapositivas de apertura y agradecimiento y efectos que crecen con cada premio.
  • Inicio: el gráfico del evento y la identidad de la escuela.

El gráfico del evento The Joy of Wisdom.

Cómo se calcula el puntaje

El puntaje de un proyecto es el promedio de los totales de sus jueces, contando solo la última calificación de cada juez. Cada proyecto recibe únicamente su premio más alto: Sobresaliente con 95 o más, Excelente con 90 o más y Mención Honorífica con 85 o más.

Cómo está construido

Las respuestas de los jueces pasan del Formulario de Google a una Hoja de cálculo de Google. Una función serverless en Vercel lee la hoja mediante una cuenta de servicio y guarda el resultado en caché durante 60 segundos, y una aplicación React de una sola página la consulta.

  • Vite, React 19 y TypeScript, con Tailwind CSS v4 usando la paleta de colores de la escuela.
  • El cálculo de puntajes y posiciones son funciones puras con pruebas unitarias (Vitest y Testing Library).
  • Un modo de demostración usa calificaciones inventadas y un panel de controles, de modo que el panel se puede mostrar sin datos reales.

Privacidad

La hoja real contiene nombres de niños, por lo que nunca se sube al repositorio. La demostración pública usa puntajes inventados.

Pruébalo

La demostración abre el panel con puntajes inventados.