QommAdd

Plataforma moderna para descubrir, crear y gestionar eventos locales con un enfoque en la experiencia del usuario y la escalabilidad.

🎯 Descripción del Proyecto

Descubrimiento de Eventos

Búsqueda y filtrado avanzado de eventos por ubicación, tipo, precio y fecha con interfaz intuitiva.

Creación de Eventos

Formularios intuitivos para crear eventos completos con validación en tiempo real y upload de imágenes.

Gestión de Usuarios

Sistema de autenticación robusto con perfiles personalizados y roles de administrador.

Dashboard Administrativo

Panel completo para gestionar eventos, usuarios y métricas de engagement en tiempo real.

🛠️ Stack Tecnológico

🎯 Frontend

Next.js 15.3.5

Framework React con App Router, Server Components y optimizaciones avanzadas de performance.

TypeScript 5.x

Tipado estático para mayor seguridad y mejor experiencia de desarrollo.

Tailwind CSS 4.x

Framework CSS utility-first para diseño rápido y responsive.

🔧 Backend

PostgreSQL

Base de datos relacional con soporte JSONB para datos complejos y consultas optimizadas.

NextAuth.js 5.0

Sistema de autenticación completo con múltiples providers y sesiones seguras.

Vercel Blob Storage

Almacenamiento de archivos optimizado para imágenes con CDN global.

📊 Herramientas de Desarrollo

Herramienta Versión Propósito
Node.js 18+ Runtime de JavaScript
ESLint 9.x Linting y formateo de código
Turbopack Built-in Bundler rápido para desarrollo
SWC Built-in Compilador de TypeScript/JavaScript

🏗️ Arquitectura del Sistema

📁 Estructura del Proyecto

src/ ├── app/ # App Router (Next.js 13+) │ ├── actions/ # Server Actions │ ├── api/ # API Routes │ ├── auth/ # Páginas de autenticación │ ├── dashboard/ # Panel administrativo │ ├── events/ # Páginas de eventos │ └── layout.tsx # Layout principal ├── components/ # Componentes reutilizables │ ├── ui/ # Componentes base (Radix UI) │ ├── charts/ # Componentes de gráficos │ └── [feature]/ # Componentes específicos ├── lib/ # Utilidades y configuración ├── hooks/ # Custom React Hooks └── types/ # Definiciones de TypeScript

🔄 Flujo de Datos

1. User Input

El usuario interactúa con formularios y componentes de la interfaz.

2. Server Action

Los datos se procesan en el servidor usando Server Actions de Next.js.

3. Database Query

Consultas optimizadas a PostgreSQL con soporte para JSONB.

4. UI Update

La interfaz se actualiza con feedback visual y optimistic updates.

🎯 Patrones de Diseño

📊 Base de Datos

🗄️ Esquema Principal

-- Tabla de Eventos CREATE TABLE events ( id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, event_type VARCHAR(100), event_date TIMESTAMP, is_free BOOLEAN DEFAULT false, price DECIMAL(10,2), status VARCHAR(50) DEFAULT 'active', -- Métricas de Engagement views_count INTEGER DEFAULT 0, clicks_count INTEGER DEFAULT 0, saved_count INTEGER DEFAULT 0, shared_count INTEGER DEFAULT 0, rsvps_count INTEGER DEFAULT 0, -- Metadatos created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW(), image_url TEXT, description TEXT, tags TEXT[], -- Datos Relacionados (JSONB) organizer JSONB, location JSONB, creator JSONB, user_id INTEGER );

📈 Tipos de Datos TypeScript

interface Event { id: number title: string event_type: string event_date: string is_free: boolean price?: number status: string // Métricas views_count: number clicks_count: number saved_count: number shared_count: number rsvps_count: number // Metadatos created_at: string updated_at: string image_url?: string description?: string tags?: string[] // Relaciones JSONB organizer: OrganizerData location: LocationData creator: CreatorData user_id?: number }

🚀 Características Principales

✨ Funcionalidades Core

Búsqueda Avanzada

Filtros por ubicación, tipo, precio y fecha con resultados en tiempo real.

Calendario de Eventos

Vista temporal de eventos próximos con navegación intuitiva.

Sistema de Tags

Categorización por estilos de baile y tipos de eventos.

Métricas en Tiempo Real

Seguimiento de engagement y performance con analytics detallados.

Gestión de Imágenes

Upload optimizado con validación de tamaño y tipo de archivo.

Responsive Design

Experiencia optimizada para todos los dispositivos y pantallas.

🎨 Interfaz de Usuario

⚡ Performance y Optimización

📊 Métricas de Performance

< 2.5s
LCP (Largest Contentful Paint)
< 100ms
FID (First Input Delay)
< 0.1
CLS (Cumulative Layout Shift)
< 600ms
TTFB (Time to First Byte)
< 250KB
Bundle Size (gzipped)

🚀 Optimizaciones Implementadas

Server Components

Renderizado en servidor para mejor performance y SEO.

Image Optimization

Optimización automática de imágenes con formatos modernos.

Font Optimization

Carga optimizada de fuentes con preloading inteligente.

Database Optimization

Consultas indexadas y connection pooling para mejor rendimiento.

🚀 Deployment e Infraestructura

☁️ Plataforma de Deployment

Vercel Platform

Deployment automático con Git integration y rollback instantáneo.

Global CDN

Distribución global de contenido con edge locations.

Vercel Postgres

Base de datos PostgreSQL gestionada con backups automáticos.

Vercel Blob Storage

Almacenamiento de archivos con CDN global para imágenes.

🔧 Variables de Entorno

# Database DATABASE_URL=postgresql://... POSTGRES_URL=postgresql://... POSTGRES_PRISMA_URL=postgresql://... # Authentication NEXTAUTH_URL=https://... NEXTAUTH_SECRET=... # Storage BLOB_READ_WRITE_TOKEN=... # External Services NEXT_PUBLIC_APP_URL=...

📊 Monitoreo y Analytics

📚 API Documentation

🔗 Endpoints Principales

Método Endpoint Descripción
GET /api/events Listar todos los eventos
POST /api/events Crear nuevo evento
GET /api/events/[id] Obtener evento específico
PUT /api/events/[id] Actualizar evento
DELETE /api/events/[id] Eliminar evento

📝 Server Actions

// Event Actions createEvent(formData: FormData) updateEvent(id: number, formData: FormData) deleteEvent(id: number) getAllEvents(userId?: number) getEventById(id: number) // Analytics Actions incrementViewCount(eventId: number) incrementSharedCount(eventId: number) incrementSavedCount(eventId: number) // Upload Actions uploadImage(formData: FormData)