Vision General de la Arquitectura

TalentBricksAI es un monorepo con tres directorios principales:

TalentBricksAI/
├── app/           # Aplicacion principal Wasp
├── blog/          # Sitio de documentacion (Astro + Starlight)
└── e2e-tests/     # Tests end-to-end (Playwright)

Aplicacion Principal (app/)

La aplicacion esta construida con el framework Wasp, que compila configuracion declarativa en una aplicacion full-stack completa.

Archivos de Configuracion Principales

Archivo	Proposito
main.wasp	Configuracion central: rutas, paginas, auth, operaciones, jobs, APIs
schema.prisma	Definicion de modelos de base de datos (Prisma)

Estructura de Directorios

app/src/
├── auth/              # Autenticacion (login, signup, etc.)
├── courses/           # Sistema de cursos (NUEVO)
│   ├── components/    # Componentes de cursos
│   └── operations.ts  # Queries y Actions
├── payment/           # Procesamiento de pagos
│   └── stripe/        # Integracion con Stripe
├── admin/             # Panel de administracion
│   └── dashboards/    # Dashboards de admin
├── landing-page/      # Pagina de inicio
├── user/              # Gestion de usuarios
├── file-upload/       # Subida de archivos (S3)
├── server/            # Utilidades del servidor
├── shared/            # Utilidades compartidas
│   └── content/       # Contenido en español
└── client/            # Componentes de cliente
    └── components/
        └── ui/        # Componentes ShadCN

Flujo de Datos

┌─────────────────────────────────────────────────────────────┐
│                        FRONTEND                              │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐     │
│  │   Pages     │───▶│  useQuery   │───▶│   React     │     │
│  │  (Routes)   │    │  useAction  │    │ Components  │     │
│  └─────────────┘    └─────────────┘    └─────────────┘     │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    WASP OPERATIONS                           │
│  ┌─────────────┐    ┌─────────────┐                        │
│  │   Queries   │    │   Actions   │                        │
│  │ (read-only) │    │  (writes)   │                        │
│  └─────────────┘    └─────────────┘                        │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                      PRISMA ORM                              │
│                          │                                   │
│                          ▼                                   │
│                   ┌─────────────┐                           │
│                   │  PostgreSQL │                           │
│                   └─────────────┘                           │
└─────────────────────────────────────────────────────────────┘

Integraciones Externas

AWS S3 + CloudFront (Videos)

• S3: Almacenamiento de videos de cursos
• CloudFront: CDN para streaming optimizado
• URLs Firmadas: Acceso seguro a contenido privado

Stripe (Pagos)

• Compra individual de cursos
• Suscripciones mensuales/anuales
• Webhooks para confirmar pagos

SendGrid (Emails)

• Verificacion de email
• Reset de password
• Notificaciones

Patron de Operaciones

Las operaciones de Wasp son el mecanismo principal de comunicacion cliente-servidor:

// Query (lectura) - se usa con useQuery
export const getCourses: GetCourses = async (args, context) => {
  return context.entities.Course.findMany({
    where: { isPublished: true },
  });
};

// Action (escritura) - se llama directamente con await
export const enrollInCourse: EnrollInCourse = async ({ courseId }, context) => {
  // Crear enrollment
};

Proximos Pasos

• Wasp Framework - Detalles del framework
• Base de Datos - Modelos de datos
• Estructura del Proyecto - Organizacion de archivos