Switch to English

Prueba

Next.jsAppwrite

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.

Publicado por Felipe Giraldo, Mariana Duque
RepositorioVista previa

AgendaUN is a modern web application designed to centralize the management of academic events and schedules at the National University of Colombia, solving the problem of fragmented information across multiple channels like email, tableros, and messaging groups.

Architecture and Tech Stack

Core Architecture

  • Framework: Next.js 16 with AppApp Router and React Server Components
    • Backend: Appwrite v2.0 as BaaS ( (Database, Authentication, Storage
      • Validation: Zod with TypeScript for type safety
        • UI: Tailwind CSS 4.1 + Shadcn/ui + Radix UI primitives

          Layered Architecture

          Image

          Key Features

          Dual Management System

          The project implements two parallel but distinct systems:

          Calendars: Unique events with specific dates

          • Views: Month, Week, Day, Agenda
            • Drag & drop support
              • Color-coded labels

                Schedules: Recurring events with weekly patterns

                • Categories: Academic, Sports, Culture, Wellness
                  • Fixed weekly grid
                    • Category-based management

                      Organizational Hierarchy

                      Implements a three-tier system that filters visibility and controls permissions:

                      • National → Campus → Faculty → Program
                        • Permissions based on Appwrite Teams roles
                          • Customized content based on user profile

                            Authentication System

                            • Passwordless login via Appwrite magic links
                              • User profiles linked to institutional hierarchy
                                • Mandatory initial setup to personalize the experience

                                  Technical Highlights

                                  Server-First Architecture

                                  • React Server Components for initial rendering
                                    • Server Actions for all data mutations
                                      • Zod validation as security boundary
                                        • Minimal JavaScript on the client

                                          Permission System

                                          Implements two-level access control:

                                          • Application-level: Helper functions (canEditCalendarEvent(), canAdminSchedule())
                                            • Database-level: Appwrite permissions with row-level security

                                              Modern UI/UX

                                              • Dark/light mode with next-themes
                                                • Animations with Tailwind and CSS custom properties
                                                  • Accessible components with Radix UI
                                                    • Responsive design with collapsible sidebar

                                                      Project Structure

                                                      app/
├── layout.tsx          # Root layout with providers
├── page.tsx           # Dashboard intro
├── calendars/[slug]/  # Calendar system
└── schedules/         # Schedule system

components/
├── calendar/          # Calendar components
├── schedule/          # Schedule components
└── ui/               # UI primitives

lib/
├── actions/          # Server actions
├── data/            # Schemas and types

└── utils/           # Utilities

                                                      Impact and Scalability

                                                      • Analytics: Vercel Analytics and Speed Insights integration
                                                        • Open Source: Code available on GitHub with issue system
                                                          • Active Beta: Beta badge in UI indicating ongoing development
                                                            • Modular: Architecture allows easy extension to new institutions

                                                              This summary is based on the current project architecture with Next.js 16 and React 19. The project uses a validation-first approach with Zod that ensures end-to-end type safety. The implementation of Server Actions as the single point of data mutation ensures a robust security model. The code is publicly available on GitHub with license for community contributions.

                                                              Wiki pages you may want to explore:

                                                              Wiki pages you might want to explore: