Nuestra Inspiración: Empoderando a los Educadores Nuestro viaje con este proyecto comenzó con una revelación simple pero poderosa después de ver los videos de Semillero Digital: un equipo de educadores dedicados estaba siendo limitado por sus propias herramientas. Usaban Google Classroom, una plataforma robusta, pero su naturaleza genérica no podía comprender su modelo operativo único y de alto impacto: un sistema de grupos de apoyo llamados "células".

Vimos a profesores y asistentes pasar horas navegando por un laberinto de clics, rastreando manualmente el progreso de los estudiantes y recopilando métricas con mucho esfuerzo. Era tiempo robado de su verdadera misión: apoyar a estudiantes de entornos económicamente vulnerables. Nuestra inspiración nació de este desafío: ¿Y si pudiéramos construir una capa de inteligencia sobre Classroom que entendiera su flujo de trabajo y les devolviera ese tiempo?

Cómo lo Construimos: Un Sprint de Integración y Enfoque Con el reloj de la Vibeathon de 12 horas en marcha, adoptamos un enfoque ágil y centrado.

Primero la Base (Horas 0-2): La fase más crítica fue configurar los cimientos digitales. Creamos proyectos en Google Cloud Platform y Firebase, navegando cuidadosamente por la pantalla de consentimiento de OAuth 2.0 para habilitar las APIs de Google Classroom, People y Calendar. Establecimos una aplicación limpia con React (Vite) + Tailwind CSS e implementamos un flujo sólido de Autenticación de Google, asegurándonos de solicitar los scopes correctos desde el principio.

Cerrando la Brecha (Horas 2-5): El núcleo de nuestra solución fue construir el "eslabón perdido" entre los datos de Classroom y la estructura de Semillero. Modelamos nuestras "células" en Firebase Firestore, creando una base de datos liviana cuyo único trabajo era mapear relaciones: qué asistente gestionaba a qué estudiantes en qué curso. Esto nos permitió mantener a Classroom como la única fuente de verdad para los datos académicos.

Construyendo los Dashboards (Horas 5-10): Con la autenticación y los modelos de datos en su lugar, construimos los dashboards para el usuario. Creamos un componente principal que renderizaba dinámicamente diferentes vistas según el rol del usuario (asistente, profesor), que almacenamos en Firestore.

El Dashboard del Asistente se filtra inmediatamente para mostrar únicamente a sus estudiantes asignados y el progreso de sus tareas en tiempo real.

El Dashboard del Profesor proporciona una vista macro, pero agrupa inteligentemente a los estudiantes por su "célula", mostrando de un vistazo qué grupos están prosperando y cuáles necesitan apoyo.

Como meta adicional, integramos la API de Google Calendar para crear un módulo de asistencia simple pero potente.

Despliegue (Continuo): Desde las primeras etapas, conectamos nuestro repositorio de GitHub a Netlify, lo que permitió un despliegue continuo. Esto significó que siempre estábamos probando en un entorno real, lo que resultó invaluable para detectar problemas de configuración a tiempo.

Desafíos que Enfrentamos El Laberinto de OAuth: Nuestro mayor obstáculo técnico fue, sin duda, el flujo de OAuth 2.0 de Google. Un solo URI de redireccionamiento incorrecto o un scope de API olvidado resultaba en crípticos errores 403: access_denied. Depurar esto bajo presión fue una verdadera prueba de paciencia y atención al detalle.

La Restricción de Tiempo: El reloj fue nuestro mayor adversario. Nos obligó a ser implacables en nuestra priorización. Teníamos ideas ambiciosas para analíticas y gráficos a nivel de coordinador, pero tomamos la decisión consciente de perfeccionar primero la experiencia central para asistentes y profesores. Este proyecto es un testimonio del poder de un Producto Mínimo Viable (MVP) bien definido.

Lo que Aprendimos Más allá de las habilidades técnicas adquiridas con las APIs de Google Workspace y Firestore, nuestra mayor lección fue el inmenso valor de aumentar, no reemplazar. No intentamos construir un Classroom mejor. En su lugar, escuchamos una necesidad específica del usuario y construimos una solución a medida que se conecta directamente a su ecosistema existente. Esta Vibeathon reforzó nuestra creencia de que el software más impactante es a menudo aquel que resuelve elegantemente un problema muy humano.

Built With

  • css:
  • firebase:
  • firestore:
  • nosql
  • react:
  • tailwind
  • vite
  • vite:
Share this project:

Updates

posted an update

¡Aplicación "Semillero Digital" Lista para Probar!

¡Ya puedes acceder a la plataforma y explorar sus funcionalidades!

Visita la aplicación en el siguiente enlace: https://semillero-digital-webapp.up.railway.app/

Cuentas de Acceso para Pruebas

Para que puedas navegar con los diferentes perfiles, hemos preparado los siguientes usuarios:

Rol Usuario Contraseña
Alumno alumno.semillero.digital@gmail.com semillero2025
Coordinador coordinador.semillero.digital@gmail.com semillero2025
Profesor profesor.semillero.digital@gmail.com semillero2025

¡Esperamos tus comentarios!

Log in or sign up for Devpost to join the conversation.

posted an update

¡Aplicación "Semillero Digital" Lista para Probar!

¡Ya puedes acceder a la plataforma y explorar sus funcionalidades!

Visita la aplicación en el siguiente enlace: https://semillero-digital-webapp.up.railway.app/


Cuentas de Acceso para Pruebas

Para que puedas navegar con los diferentes perfiles, hemos preparado los siguientes usuarios:

Rol Usuario Contraseña
Alumno alumno.semillero.digital@gmail.com semillero2025
Coordinador coordinador.semillero.digital@gmail.com semillero2025


¡Esperamos tus comentarios!

Log in or sign up for Devpost to join the conversation.

posted an update

Semillero Digital - Dashboard de Gestión

Versión 1.1.0 | Estado: PRODUCCIÓN

Una aplicación web completa desarrollada con React que funciona como dashboard de gestión para la organización Semillero Digital. Esta aplicación se integra con Google Classroom API y Telegram Bot para proporcionar vistas y métricas personalizadas que resuelven problemas de seguimiento de progreso, comunicación y obtención de métricas educativas.

Características Principales

Branding Oficial

  • Logo Oficial Integrado: Logo oficial de Semillero Digital en toda la aplicación
  • Diseño Consistente: Colores y tipografía acorde al branding organizacional
  • Favicon Personalizado: Icono oficial en el navegador

Autenticación y Seguridad

  • Google OAuth: Autenticación segura con cuentas de Google
  • Sistema de Roles: Permisos específicos por rol (Estudiante, Asistente, Profesor, Coordinador)
  • Protección de Datos: Acceso controlado según el rol del usuario

Dashboards Inteligentes

  • Vista Estudiante: Progreso personal, tareas y calificaciones
  • Vista Asistente: Gestión de células asignadas y seguimiento de estudiantes
  • Vista Profesor/Coordinador: Control completo de cursos, asistencia y reportes

Integraciones Avanzadas

  • Google Classroom API: Sincronización automática de cursos, tareas y entregas
  • Google Calendar API: Gestión de asistencia basada en eventos del calendario
  • Google People API: Perfiles de usuario enriquecidos
  • Telegram Bot: Notificaciones y comunicación directa con estudiantes

Funcionalidades Avanzadas

  • Sistema de Células: Organización de estudiantes en grupos con asistentes asignados
  • Módulo de Asistencia: Control de asistencia integrado con Google Calendar
  • Reportes y Exportación: Exportación de datos a CSV para análisis detallado
  • Notificaciones Telegram: Comunicación automática con estudiantes
  • Interfaz Responsiva: Diseño moderno optimizado para todos los dispositivos

Stack Tecnológico

Frontend

  • React 18+ con Hooks y componentes funcionales
  • Vite para desarrollo rápido y build optimizado
  • Tailwind CSS para diseño moderno y responsivo

Backend y Servicios

  • Firebase Authentication con Google OAuth
  • Firebase Firestore para base de datos NoSQL en tiempo real
  • Node.js para el servidor del bot de Telegram

APIs e Integraciones

  • Google Classroom API - Gestión de cursos y tareas
  • Google Calendar API - Control de asistencia
  • Google People API - Perfiles de usuario
  • Telegram Bot API - Notificaciones y comunicación

Despliegue y DevOps

  • Netlify / Firebase Hosting / Vercel compatibles
  • GitHub Actions para CI/CD (opcional)
  • ESLint y Prettier para calidad de código

Prerrequisitos

Obligatorios

  1. Node.js (versión 16 o superior)
  2. Cuenta de Google Cloud Platform con proyecto configurado
  3. Proyecto de Firebase con Authentication y Firestore habilitados

APIs Requeridas en Google Cloud Console

  • Google Classroom API
  • Google Calendar API
  • Google People API

Opcional (para notificaciones)

  1. Bot de Telegram creado con @BotFather
  2. Servidor Node.js para el bot (puede ser el mismo servidor)

Configuración del Proyecto

1. Clonar el Repositorio

git clone <repository-url>
cd semillero-digital-webapp

2. Instalar Dependencias

npm install

3. Configurar Firebase

  1. Ve a Firebase Console
  2. Crea un nuevo proyecto o selecciona uno existente
  3. Habilita Authentication con el proveedor de Google
  4. Habilita Firestore Database
  5. Ve a Configuración del Proyecto > General > Tus apps
  6. Copia la configuración de Firebase

4. Configurar Google Cloud Console

  1. Ve a Google Cloud Console
  2. Selecciona tu proyecto de Firebase
  3. Habilita las siguientes APIs:
    • Google Classroom API
    • Google Calendar API
    • Google People API
  4. Configura la pantalla de consentimiento OAuth
  5. Agrega los dominios autorizados

5. Variables de Entorno

  1. Copia el archivo de ejemplo:

    cp .env.example .env
    
  2. Edita .env con tu configuración completa:

Firebase (Obligatorio)

VITE_FIREBASE_API_KEY=tu_api_key_aqui
VITE_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu_proyecto_id
VITE_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=tu_sender_id
VITE_FIREBASE_APP_ID=tu_app_id

Telegram Bot (Opcional)

# Para habilitar notificaciones por Telegram
VITE_TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz

Opcional

# Google Analytics (opcional)
VITE_FIREBASE_MEASUREMENT_ID=tu_measurement_id_aqui

Nota: Sin el token de Telegram, la aplicación funcionará normalmente pero no enviará notificaciones. Ver Configuración de Telegram Bot para más detalles.

6. Ejecutar en Desarrollo

npm run dev

La aplicación estará disponible en http://localhost:3000

Estructura de la Base de Datos

Firestore Collections

users

{
  email: "usuario@email.com",
  name: "Nombre Completo",
  photoURL: "url_de_foto",
  role: "student|assistant|professor|coordinator"
}

courses/{courseId}

{
  name: "Nombre del Curso",
  ownerId: "id_del_profesor"
}

courses/{courseId}/cells/{cellId}

{
  name: "Célula 1",
  assistantEmail: "asistente@email.com",
  studentEmails: ["estudiante1@email.com", "estudiante2@email.com"]
}

courses/{courseId}/attendance/{eventId}

{
  eventSummary: "Título del Evento",
  eventDate: "2024-01-15T10:00:00Z",
  records: {
    "estudiante1@email.com": "presente",
    "estudiante2@email.com": "ausente"
  }
}

Roles de Usuario

Estudiante

  • Ver progreso personal en tareas
  • Consultar calificaciones
  • Acceso a enlaces de Google Classroom

Asistente

  • Gestionar células asignadas
  • Ver progreso de estudiantes en sus células
  • Seguimiento de entregas de tareas

Profesor/Coordinador

  • Vista completa de todos los cursos
  • Gestión de asistencia
  • Reportes y exportación de datos
  • Organización por células
  • Envío de notificaciones por Telegram
  • Gestión de números de teléfono de estudiantes

Configuración de Telegram Bot

¿Por qué Telegram?

El bot de Telegram permite enviar notificaciones automáticas a los estudiantes sobre:

  • Nuevas tareas asignadas
  • Recordatorios de fechas límite
  • Calificaciones publicadas
  • Anuncios importantes del curso

Configuración Rápida

1. Crear el Bot

  1. Contacta a @BotFather en Telegram
  2. Envía /newbot y sigue las instrucciones
  3. Guarda el token que te proporciona

2. Configurar en la Aplicación

# Agrega a tu archivo .env
VITE_TELEGRAM_BOT_TOKEN=tu_token_aqui

3. Configurar Comandos del Bot

Envía a @BotFather /setcommands y agrega:

start - Iniciar el bot y registrarse
help - Mostrar ayuda
info - Información del curso
unsubscribe - Cancelar notificaciones

Uso en la Aplicación

  1. Profesores: Pueden agregar números de teléfono y enviar mensajes
  2. Estudiantes: Reciben notificaciones automáticas del bot
  3. Grupos: Crear grupos de curso para comunicación masiva

Guía Completa: Ver TELEGRAM_SETUP.md para instrucciones detalladas.

Despliegue

Netlify

  1. Construir la aplicación:

    npm run build
    
  2. La carpeta dist contiene los archivos para despliegue

  3. En Netlify:

    • Conecta tu repositorio
    • Configura las variables de entorno
    • Comando de build: npm run build
    • Directorio de publicación: dist

Variables de Entorno en Producción

Obligatorias

Configura estas variables en tu plataforma de despliegue:

  • VITE_FIREBASE_API_KEY
  • VITE_FIREBASE_AUTH_DOMAIN
  • VITE_FIREBASE_PROJECT_ID
  • VITE_FIREBASE_STORAGE_BUCKET
  • VITE_FIREBASE_MESSAGING_SENDER_ID
  • VITE_FIREBASE_APP_ID

Opcionales

  • VITE_TELEGRAM_BOT_TOKEN (para notificaciones)
  • VITE_FIREBASE_MEASUREMENT_ID (para analytics)

Seguridad

  • Todas las APIs requieren autenticación
  • Los permisos se basan en roles de usuario
  • Las reglas de Firestore deben configurarse apropiadamente
  • Los tokens de acceso se manejan de forma segura

Configuración Inicial de Datos

Crear Usuarios Iniciales

  1. Los usuarios se crean automáticamente al iniciar sesión por primera vez
  2. El rol por defecto es "student"
  3. Los administradores deben cambiar los roles manualmente en Firestore

Configurar Células

  1. Los profesores/coordinadores pueden crear células desde el dashboard
  2. Asignar asistentes a cada célula
  3. Agregar estudiantes a las células correspondientes

Solución de Problemas

Error de Autenticación

  • Verifica que las APIs estén habilitadas en Google Cloud Console
  • Confirma que los dominios estén autorizados en OAuth
  • Revisa la configuración de Firebase Authentication

Error de Permisos de API

  • Asegúrate de que el usuario tenga acceso a Google Classroom
  • Verifica que los scopes estén correctamente configurados
  • Confirma que el usuario sea profesor o estudiante en los cursos

Problemas de Firestore

  • Revisa las reglas de seguridad de Firestore
  • Confirma que el proyecto de Firebase esté correctamente configurado
  • Verifica que las colecciones existan

Log in or sign up for Devpost to join the conversation.