Arquitectura

Visión general

Closegram sigue una estructura de monorepo administrada por Turborepo. El frontend se comunica con el backend exclusivamente a través de una API de GraphQL, usando Apollo Client para la obtención de datos, el caché y las suscripciones en tiempo real.

Aplicaciones

App	Puerto	Stack	Descripción
apps/frontend-nextjs	3000	Next.js 14, App Router	Cliente web principal
apps/frontend-public	3002	CRA, React	Cliente web alternativo/público
apps/backend	4000	Apollo Server, Express	API de GraphQL
apps/docs	3003	Docusaurus 3	Este sitio de documentación (inglés/español)
apps/ios	—	SwiftUI, Apollo iOS	App nativa de iOS

Flujo de solicitudes

Web Browser / iOS App
    ↓
Apollo Client  ←→  WebSocket (subscriptions)
    ↓
GraphQL API — apps/backend (Apollo Server + Express)
    ↓
Database / External Services (Firebase, Stripe, Google Cloud)

Estructura del frontend

La aplicación web principal (apps/frontend-nextjs) usa el App Router de Next.js:

src/
  app/                  # Routes (App Router)
    home/               # Feed page
    messages/           # Chat page
    profile/            # User profile
    settings/           # Settings (nested routes)
    coins/              # Coins & transactions
    payments/           # Stripe payments
    login/              # Auth
  components/           # Shared UI components
  page-components/      # Full-page components
  hooks/                # Custom React hooks
  contexts/             # React contexts (auth, theme)
  apollo/               # Apollo client setup
  i18n/                 # Translation files
  lib/                  # Utilities

Estructura del backend

graphql/
  types/        # GraphQL type definitions (one file per domain)
  resolvers/    # Resolvers (one file per domain)
  context/      # Auth helpers and WebSocket context
  typeDefs.js   # Combines all types
  resolvers.js  # Combines all resolvers

data-access-services/   # DB queries (one file per model)
validators/             # Input validation
constants/              # App-wide constants
utils/                  # Helpers (Google Cloud, Stripe, etc.)
workers/                # Background jobs (notification.worker.js)

Gestión de estado

• Estado del servidor: Apollo Client (InMemoryCache normalizado)
• Estado de la UI: React Context (autenticación, tema, notificaciones toast)
• Estado de formularios: Estado local del componente

Flujo de autenticación

1. El usuario inicia sesión mediante correo/contraseña, Apple, Google o OTP por teléfono
2. Firebase valida las credenciales y devuelve un token de ID
3. El token se adjunta a cada solicitud de GraphQL mediante el authLink de Apollo (Authorization: Bearer <token>)
4. El backend valida el token en cada solicitud usando el Firebase Admin SDK
5. El usuario resuelto se coloca en el contexto de GraphQL y queda disponible para todos los resolvers

Arquitectura en tiempo real

Las suscripciones de WebSocket gestionan:

• Mensajes nuevos y actualizaciones de mensajes
• Indicadores de escritura y confirmaciones de lectura
• Llamadas entrantes y cambios de estado de llamada
• Conversaciones nuevas

El frontend usa el GraphQLWsLink de Apollo para las suscripciones y HttpLink para las queries/mutations. Un splitLink enruta cada operación al transporte correcto.

Arquitectura de iOS

La app de iOS (apps/ios) sigue MVVM + Redux + Clean Architecture. Cada módulo de funcionalidad tiene su propio Store de Redux (State + Action + Reducer), una abstracción de Repository y vistas de SwiftUI. Consulta el documento técnico de App de iOS para ver el detalle completo.

Servicios externos

Servicio	Propósito
Firebase Auth	Gestión de identidad y tokens
Firebase Admin SDK	Verificación de tokens en el backend
Firebase Cloud Messaging	Notificaciones push (Android + Web)
Apple VoIP Push	Notificaciones de llamadas entrantes en iOS
Stripe	Procesamiento de pagos
Google Cloud Vision	Detección automática de contenido NSFW en imágenes
Google Cloud Video Intelligence	Detección automática de contenido NSFW en video