Blog
AgendaUN

AgendaUN

Next.jsAppwriteTailwind CSS

Plataforma web moderna que centraliza eventos y horarios académicos de la Universidad Nacional de Colombia, con calendarios, horarios recurrentes y control de permisos por facultad y programa.

RepositorioVista previa

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

Image

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)

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.

Páginas del Wiki que podrías explorar:

Páginas del Wiki que también podrían interesarte: