AgendaUN

Next.jsAppwriteTailwind CSS
AgendaUN — 1
AgendaUN — 2
AgendaUN — 3
AgendaUN — 4
AgendaUN — 5
AgendaUN — 6

AgendaUN es una aplicación web moderna diseñada para centralizar la gestión de eventos académicos y horarios en la Universidad Nacional de Colombia, resolviendo el problema de la información fragmentada a través de múltiples canales como correo electrónico, tableros y grupos de mensajería.

Arquitectura y Stack Tecnológico

Arquitectura Central

  • Framework: Next.js 16 con App Router y React Server Components
  • Backend: Appwrite v2.0 como BaaS (Base de Datos, Autenticación, Almacenamiento)
  • Validación: Zod con TypeScript para seguridad de tipos
  • UI: Tailwind CSS 4.1 + Shadcn/ui + primitivas de Radix UI

Arquitectura en Capas

Flujo de una Petición

Herramientas/Funcionalidades de un Vistazo

Funcionalidades Clave

Sistema de Gestión Dual

El proyecto implementa dos sistemas paralelos pero distintos:

Calendarios: Eventos únicos con fechas específicas

  • Vistas: Mes, Semana, Día, Agenda
  • Soporte de arrastrar y soltar (drag & drop)
  • Etiquetas codificadas por color

Horarios: Eventos recurrentes con patrones semanales

  • Categorías: Académico, Deportes, Cultura, Bienestar
  • Grilla semanal fija
  • Gestión basada en categorías

Jerarquía Organizacional

Implementa un sistema de múltiples niveles que filtra la visibilidad y controla los permisos:

  • Nacional → Sede → Facultad → Programa
  • Permisos basados en roles de Teams de Appwrite
  • Contenido personalizado según el perfil del usuario

Sistema de Autenticación

  • Inicio de sesión sin contraseña mediante enlaces mágicos de Appwrite
  • Perfiles de usuario vinculados a la jerarquía institucional
  • Configuración inicial obligatoria para personalizar la experiencia

Aspectos Técnicos Destacados

Arquitectura Server-First

  • React Server Components para el renderizado inicial
  • Server Actions como único punto de mutación de datos
  • Validación con Zod como frontera de seguridad
  • JavaScript mínimo en el cliente

Sistema de Permisos

Implementa control de acceso en dos niveles:

  • Nivel de aplicación: Funciones helper (canEditCalendarEvent(), canAdminSchedule())
  • Nivel de base de datos: Permisos de Appwrite con seguridad a nivel de fila (row-level security)
  • Modelo de cliente dual: un Admin client omite los permisos de documento una vez pasa la verificación a nivel de aplicación, mientras que un Session client siempre aplica los permisos de Appwrite acotados al usuario como segunda línea de defensa

UI/UX Moderna

  • Modo claro/oscuro con next-themes
  • Animaciones con Tailwind y propiedades CSS personalizadas
  • Componentes accesibles con Radix UI
  • Diseño responsivo con barra lateral colapsable

Estructura del Proyecto

app/
├── layout.tsx          # Layout raíz con providers
├── page.tsx           # Introducción del dashboard
├── calendars/[slug]/  # Sistema de calendarios
└── schedules/         # Sistema de horarios

components/
├── calendar/          # Componentes de calendario
├── schedule/          # Componentes de horarios
└── ui/               # Primitivas de UI

lib/
├── actions/          # Server Actions
├── data/             # Esquemas y tipos
└── utils/            # Utilidades

Impacto y Escalabilidad

  • Analíticas: Integración con Vercel Analytics y Speed Insights
  • Código Abierto: Código disponible en GitHub con sistema de issues
  • Beta Activa: Insignia de beta en la interfaz indicando desarrollo continuo
  • Modular: La arquitectura permite una fácil extensión a nuevas instituciones

Notas

Este resumen se basa en la arquitectura actual del proyecto con Next.js 16 y React 19. El proyecto utiliza un enfoque validation-first con Zod que garantiza seguridad de tipos de extremo a extremo. La implementación de Server Actions como único punto de mutación de datos asegura un modelo de seguridad robusto. El código está disponible públicamente en GitHub con licencia para contribuciones de la comunidad.