Plataforma Estudiantil Universitaria

Centraliza eventos, talleres, descuentos y asociaciones estudiantiles en una experiencia moderna y premium.

🌐 Funcionalidades · 🏗️ Arquitectura · 🚀 Inicio Rápido · 📸 Vistas de la Plataforma

---

🌱 ¿Qué es RespiraTEC?

El sitio oficial actual de la universidad para la visualización de eventos, talleres y descuentos estudiantiles es poco visible, difícil de navegar y estéticamente anticuado. Esto genera que muchas actividades y oportunidades extracurriculares pasen desapercibidas para la comunidad estudiantil.

RespiraTEC nace para resolver este problema, ofreciendo una interfaz moderna, limpia y de alto nivel que transforma la experiencia universitaria digital.

✨ Funcionalidades

🎓 Para Estudiantes 📅 Explorar eventos universitarios con detalle completo 🎨 Inscribirse en talleres con sistema de cupos en tiempo real 🏷️ Acceder a descuentos exclusivos con códigos promocionales 🏛️ Solicitar membresía en asociaciones estudiantiles 📜 Descargar certificados PDF de talleres completados 👤 Gestionar su perfil y foto con Cloudinary ⭐ Dejar feedback y calificaciones de actividades

🛡️ Para Administradores 📊 Panel de administración completo (CRUD) 📝 Gestión de eventos, talleres, descuentos y asociaciones 👥 Administración de usuarios y roles ✅ Aprobación / rechazo de solicitudes de membresía 🖼️ Subida de imágenes con Cloudinary 📈 Conteo de asistentes e inscritos en tiempo real

🔐 Sistema de Autenticación

Característica	Descripción
Registro seguro	Contraseñas encriptadas con BcryptJS
Sesiones JWT	Tokens seguros con expiración configurable
Roles dinámicos	Estudiante · Representante · Administrador
Rutas protegidas	Acceso restringido según nivel de permisos
Cooldown inteligente	24h de espera tras rechazo de membresía

💳 Pasarela de Pago (Demo)

El sistema incluye una pasarela de pago simulada con dos métodos:

💠 Tarjeta de Crédito/Débito — Formulario con validación de 16 dígitos, fecha y CVV con animación de procesamiento.

📱 SINPE Móvil — Código QR simulado con confirmación instantánea tras verificación.

---

🏗️ Arquitectura

RespiraTEC/
│
├── 📁 frontend/                   # Aplicación React + Vite
│   ├── 📁 src/
│   │   ├── 📁 assets/             # Imágenes y recursos estáticos
│   │   ├── 📁 components/         # Componentes reutilizables
│   │   │   ├── Navbar.jsx         # Barra de navegación principal
│   │   │   ├── ModalPago.jsx      # Modal de pasarela de pago
│   │   │   ├── FeedbackSection.jsx
│   │   │   ├── FiltroBusqueda.jsx
│   │   │   └── ProtectedRoute.jsx
│   │   ├── 📁 context/            # Estado global (AuthContext)
│   │   ├── 📁 pages/
│   │   │   ├── 📁 admin/          # Paneles de administración
│   │   │   │   ├── 📁 eventos/
│   │   │   │   ├── 📁 talleres/
│   │   │   │   ├── 📁 descuentos/
│   │   │   │   ├── 📁 asociaciones/
│   │   │   │   └── 📁 usuarios/
│   │   │   ├── 📁 auth/           # Login y Registro
│   │   │   ├── 📁 public/         # Páginas públicas
│   │   │   │   ├── 📁 eventos/
│   │   │   │   ├── 📁 talleres/
│   │   │   │   ├── 📁 asociaciones/
│   │   │   │   ├── Descuentos.jsx
│   │   │   │   ├── Inicio.jsx
│   │   │   │   └── Contacto.jsx
│   │   │   └── 📁 user/           # Páginas de usuario
│   │   │       ├── MiPerfil.jsx
│   │   │       ├── MisAsociaciones.jsx
│   │   │       └── MisTalleres.jsx
│   │   └── App.jsx                # Enrutamiento principal
│   └── package.json
│
├── 📁 backend/                    # API REST con Express
│   ├── 📁 config/                 # Configuración de BD y Cloudinary
│   ├── 📁 controllers/            # Lógica de negocio
│   ├── 📁 middleware/             # Auth, validación y seguridad
│   ├── 📁 models/                 # Esquemas de Mongoose
│   │   ├── Usuario.js
│   │   ├── Evento.js
│   │   ├── Taller.js
│   │   ├── Descuento.js
│   │   ├── Asociacion.js
│   │   ├── Inscripcion.js
│   │   ├── AsistenciaEvento.js
│   │   ├── Afiliacion.js
│   │   └── Feedback.js
│   ├── 📁 routes/                 # Definición de endpoints
│   └── server.js                  # Punto de entrada
│
├── 📁 docs/screenshots/           # Capturas de pantalla
├── docker-compose.yml             # Orquestación con Docker
└── README.md

🔧 Stack Tecnológico

Frontend Tecnología Uso ⚛️ React Interfaz de usuario ⚡ Vite Build & Dev Server 🎨 Tailwind CSS Sistema de diseño 🧭 React Router Navegación SPA 🔑 Context API Estado global

Backend Tecnología Uso 🟢 Node.js Runtime 🚂 Express Framework HTTP 🍃 MongoDB Base de datos 🔐 JWT Autenticación 🔒 BcryptJS Hashing

Servicios Tecnología Uso ☁️ Cloudinary Almacenamiento de imágenes 📄 PDFKit Generación de certificados 🐳 Docker Contenerización 🛡️ Helmet Seguridad HTTP 🧹 Mongo Sanitize Protección NoSQL

---

🚀 Inicio Rápido

Requisitos Previos

Software	Versión mínima
Node.js	v18+
MongoDB	v6+ (local o Atlas)
Docker (opcional)	v20+

⚙️ Opción 1 — Instalación Manual

1️⃣ Clonar el repositorio

git clone https://github.com/DanielAR27/RespiraTEC.git
cd RespiraTEC

2️⃣ Configurar variables de entorno

backend/.env

PORT=5000
MONGO_URI=mongodb://localhost:27017/respiratec
JWT_SECRET=secreto_super_seguro
JWT_EXPIRE=24h

# Cloudinary (opcional, para subida de imágenes)
CLOUDINARY_CLOUD_NAME=cloud_name
CLOUDINARY_API_KEY=api_key
CLOUDINARY_API_SECRET=api_secret

frontend/.env

VITE_API_URL=http://localhost:5000/api

3️⃣ Levantar el Backend

cd backend
npm install
npm run dev

🟢 El servidor se ejecutará en http://localhost:5000

4️⃣ Levantar el Frontend

cd frontend
npm install
npm run dev

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

🐳 Opción 2 — Docker Compose

docker-compose up --build

Servicio	Puerto
Frontend	http://localhost:80
Backend	http://localhost:3000

---

📸 Vistas de la Plataforma

A continuación se presentan las principales secciones de RespiraTEC. Las capturas se encuentran en la carpeta docs/screenshots/.

🏠 Inicio

La página principal muestra un resumen dinámico de toda la actividad universitaria: eventos próximos, talleres destacados, descuentos activos y asociaciones disponibles. Diseñada para que el estudiante tenga toda la información relevante de un solo vistazo.

---

📅 Eventos

Explora todos los eventos universitarios con tarjetas visuales que muestran fecha, ubicación, categoría y un contador de asistentes en tiempo real. Cada evento tiene su vista de detalle con inscripción de asistencia y confirmación mediante modal.

---

🎨 Talleres

Catálogo completo de talleres con información de nivel (Principiante, Intermedio, Avanzado), instructor, fechas, cupos disponibles y precio. Los estudiantes pueden inscribirse con un flujo de pago simulado y, al finalizar el taller, descargar su certificado PDF.

---

🏷️ Descuentos

Sección de descuentos exclusivos para estudiantes con tarjetas que muestran el porcentaje de ahorro, código promocional copiable y fecha de vencimiento. Incluye filtros para encontrar las mejores ofertas rápidamente.

---

🏛️ Asociaciones

Directorio de asociaciones estudiantiles con logo, descripción y listado de miembros. Los estudiantes pueden solicitar membresía a través de un flujo intuitivo con modal de confirmación, y los representantes gestionan las solicitudes desde su panel.

---

📜 Certificados PDF

Los estudiantes que completaron un taller con certificación pueden descargar un diploma de participación generado automáticamente en PDF. El certificado incluye nombre del participante, título del taller, instructor, período y fecha de emisión con un diseño profesional.

---

🛡️ Panel de Administración

Panel completo para administradores con gestión CRUD de eventos, talleres, descuentos, asociaciones y usuarios. Interfaz limpia con tablas, filtros y acciones rápidas para mantener la plataforma actualizada.

---

🗺️ Roadmap

• 🔐 Autenticación completa con JWT y roles
• 📅 CRUD de eventos con asistencia en tiempo real
• 🎨 CRUD de talleres con inscripción y cupos
• 🏷️ Sistema de descuentos con códigos promocionales
• 🏛️ Asociaciones con flujo de solicitud de membresía
• 📜 Generación de certificados PDF con PDFKit
• 💳 Pasarela de pago simulada (Tarjeta + SINPE)
• ⭐ Sistema de feedback y calificaciones
• 🔍 Filtros de búsqueda por categoría, fecha y ubicación
• 🛡️ Panel de administración completo
• 🐳 Contenerización con Docker Compose

---

👥 Equipo

Hecho por estudiantes del Tecnológico de Costa Rica

👤 Integrante
Daniel Alemán
José Jiménez
Luis Meza
José Fabián Zumbado

---

RespiraTEC · Plataforma Estudiantil Universitaria

_{Hecho con mucha pasión en Costa Rica}