Home - ciscojuan/tourisplan GitHub Wiki

Wiki TourisPlan

Descripción General

TourisPlan es una aplicación web moderna desarrollada con Next.js que permite a los usuarios explorar y reservar planes turísticos en Colombia. La aplicación ofrece una experiencia de usuario intuitiva y segura, con características como autenticación OAuth, gestión de reservas y una interfaz responsiva.

Tecnologías Principales

Frontend

Next.js 15.3.1: Framework de React con soporte para SSR y API Routes React 19.0.0: Biblioteca para construcción de interfaces TailwindCSS: Framework CSS para estilos React Icons: Biblioteca de iconos Sonner: Sistema de notificaciones toast

Backend

Next.js API Routes: Para endpoints del backend Prisma: ORM para la base de datos PostgreSQL: Base de datos relacional

Autenticación

NextAuth.js: Sistema de autenticación OAuth Providers: Google y GitHub bcryptjs: Para encriptación de contraseñas

Flujo de la Aplicación

Autenticación

Los usuarios pueden iniciar sesión usando: Credenciales (email/password) Google OAuth GitHub OAuth

Exploración de Planes

Los usuarios pueden ver planes turísticos disponibles Filtrado por ubicación y características Vista detallada de cada plan

Sistema de Reservas

Creación de reservas para planes seleccionados Gestión de reservas existentes Notificaciones de estado de reserva

Configuración de OAuth

Google OAuth

  1. Crear Proyecto en Google Cloud Console

  • Visitar Google Cloud Console
  • Crear nuevo proyecto o seleccionar existente
  • Ir a "Credentials" → "Create Credentials" → "OAuth Client ID"
  1. **Configurar Pantalla de Consentimiento **
  • Configurar nombre de la aplicación
  • Agregar correo de soporte
  • Configurar para usuarios externos
  • Agregar dominio de correo 3 ** Crear Credenciales OAuth **
  • Tipo: Web Application
  • URIs de redirección autorizados: http://localhost:3000/api/auth/callback/google
  • Guardar Client ID y Client Secret

GitHub OAuth

  1. Configurar Aplicación en GitHub
  1. ** Obtener Credenciales **
  • Guardar Client ID
  • Generar y guardar Client Secret ** Variables de Entorno ** Crear archivo .env en la raíz del proyecto: # Base de Datos DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"

# NextAuth NEXTAUTH_SECRET="generar_con_openssl_rand_-hex_32" NEXTAUTH_URL="http://localhost:3000"

# OAuth Providers GOOGLE_ID="tu-google-client-id" GOOGLE_SECRET="tu-google-client-secret" NOGITHUB_ID="tu-github-client-id" NOGITHUB_SECRET="tu-github-client-secret"

Seguridad

  • Sanitización de datos con isomorphic-dompurify y sanitize-html
  • Encriptación de contraseñas con bcrypt
  • Protección contra XSS
  • Manejo seguro de sesiones con JWT
  • Validación de roles y permisos

Despliegue

docker-compose up -d

Esto iniciará:

  • Servidor Next.js en el puerto 3000
  • Base de datos PostgreSQL en el puerto 5432

Scripts Disponibles

npm run dev        # Desarrollo local
npm run build     # Construir para producción
npm run start     # Iniciar en producción
npm run lint      # Verificar código

Consideraciones de Desarrollo

  1. ** Base de Datos **
  • Usar Prisma para migraciones
  • Mantener el esquema actualizado
  • Realizar backups regulares
  1. ** Autenticación**
  • Mantener las credenciales OAuth seguras
  • No exponer secretos en el código
  • Implementar rate limiting 3 ** Frontend **
  • Seguir las mejores prácticas de React
  • Mantener componentes reutilizables
  • Optimizar rendimiento
  1. ** Seguridad **
  • Mantener dependencias actualizadas
  • Implementar validaciones de entrada
  • Usar HTTPS en producción