Estructura del Proyecto

Monorepo Overview

TalentBricksAI/
├── app/                    # aplicación principal (Wasp)
├── blog/                   # documentación (Astro + Starlight)
├── e2e-tests/              # Tests end-to-end (Playwright)
├── CLAUDE.md               # Instrucciones para Claude Code
├── IMPLEMENTATION.md       # Tracks all changes, New features and customizations
└── README.md               # Readme del proyecto

aplicación Principal (`app/`)

app/
├── main.wasp               # configuración central de Wasp
├── schema.prisma           # Modelos de base de datos
├── package.json            # Dependencias npm
├── tailwind.config.js      # configuración de Tailwind
├── .env.server             # Variables de entorno (gitignored)
├── .env.client             # Variables de cliente (gitignored)
└── src/
    ├── auth/               # autenticación
    ├── courses/            # Sistema de cursos
    ├── payment/            # Pagos
    ├── referral/           # Sistema de referidos
    ├── promo/              # Codigos promocionales
    ├── admin/              # Panel admin
    ├── landing-page/       # página de inicio
    ├── legal/              # Paginas legales (Privacidad, Terminos)
    ├── user/               # Gestión de usuarios
    ├── file-upload/        # Subida de archivos
    ├── server/             # Utilidades servidor
    ├── shared/             # Utilidades compartidas
    └── client/             # Componentes cliente

Detalle por Feature

Auth (`app/src/auth/`)

auth/
├── LoginPage.tsx           # página de login
├── SignupPage.tsx          # página de registro
├── EmailVerificationPage.tsx
├── RequestPasswordResetPage.tsx
├── PasswordResetPage.tsx
└── hooks.ts                # Hooks de autenticación

Courses (`app/src/courses/`)

courses/
├── CoursesPage.tsx              # Catalogo de cursos
├── CourseDetailPage.tsx         # Detalle de un curso
├── LearnPage.tsx                # Video player + lecciones
├── MyCoursesPage.tsx            # Dashboard "Mis Cursos"
├── CertificateViewPage.tsx      # Ver y descargar certificado (/certificate/:courseId)
├── CertificateVerifyPage.tsx    # Verificar certificado público (/verify/:code)
├── CertificateGalleryPage.tsx   # Galería pública de certificados (/certificates)
├── operations.ts                # Queries y Actions (incluye operaciones de recursos)
├── resourceS3Utils.ts           # Utilidades S3 para recursos descargables
└── components/
    ├── CourseCard.tsx           # Tarjeta de curso
    ├── CourseGrid.tsx           # Grid de cursos
    ├── VideoPlayer.tsx          # Reproductor de video
    ├── LessonSidebar.tsx        # Sidebar con lecciones
    ├── ProgressRing.tsx         # Indicador circular de progreso
    ├── EnrollButton.tsx         # botón de inscripcion
    ├── CertificateCanvas.tsx    # Canvas del certificado (PNG + PDF)
    └── ResourceList.tsx         # Lista de recursos descargables (estudiantes)

Payment (`app/src/payment/`)

payment/
├── plans.ts                # Definicion de planes
├── PricingPage.tsx         # página de precios
├── CheckoutPage.tsx        # Checkout
└── stripe/
    ├── webhook.ts          # Webhook handler (+ referral processing)
    └── checkoutUtils.ts    # Utilidades de checkout

Referral (`app/src/referral/`)

referral/
├── ReferralDashboardPage.tsx   # Dashboard de referidos (/account/referrals)
├── ReferralLandingPage.tsx     # Landing de referidos (/r/:code)
├── ReferralLeaderboardPage.tsx # Tabla de líderes pública (/referrals/leaderboard)
├── operations.ts               # Queries y Actions de referidos
└── emails.ts                   # Funciones de email de notificación

Rutas:

/account/referrals - Dashboard con Estadísticas, link compartible, badge/nivel y recompensas
/r/:code - Landing que registra click, guarda cookie y redirige a signup
/referrals/leaderboard - Tabla de líderes pública (top 10, opt-in)

Promo (`app/src/promo/`)

promo/
├── operations.ts           # Queries y Actions de promociones
├── PromoCodeInput.tsx      # Input para ingresar código en checkout
└── PromoBanner.tsx         # Banner de promocion con countdown

Componentes:

PromoCodeInput: Campo de texto con validación en tiempo real
PromoBanner: Banner para landing page con temporizador

Admin (`app/src/admin/`)

admin/
├── layout/
│   ├── DefaultLayout.tsx   # Layout con sidebar
│   ├── Sidebar.tsx         # Menu lateral reorganizado
│   └── Header.tsx          # Header del admin
├── promotions/             # Gestión de promociones
│   ├── AdminPromotionsPage.tsx  # página con 3 tabs
│   └── operations.ts       # Queries y Actions admin
├── components/
│   └── ResourceUploadSection.tsx  # Upload/gestión de recursos (admin)
└── dashboards/
    ├── analytics/          # Dashboard de analytics
    ├── users/              # Gestión de usuarios
    ├── settings/           # configuración
    ├── messages/           # Mensajes de contacto
    ├── courses/            # Gestión de cursos
    │   ├── AdminCoursesPage.tsx
    │   ├── AdminCourseEditPage.tsx  # Integra ResourceUploadSection
    │   ├── CoursesTable.tsx
    │   └── CourseForm.tsx
    ├── enrollments/        # Gestión de inscripciones
    │   ├── AdminEnrollmentsPage.tsx
    │   └── EnrollmentsTable.tsx
    └── moderation/         # Moderación de contenido
        ├── AdminCommentsPage.tsx  # Moderación de comentarios
        └── AdminReviewsPage.tsx   # Moderación de reseñas

Admin Sidebar organizado en grupos:

CONTENT: Dashboard, Courses, Enrollments, Messages
MODERATION: Comments (/admin/moderation/comments), Reviews (/admin/moderation/reviews)
USERS & MARKETING: Users, Promotions
SETTINGS: Settings
EXTRAS: Calendar, UI Elements (desarrollo)

Admin Promotions Page (/admin/promotions):

Tab 1: Promo Codes - CRUD de codigos promocionales
Tab 2: Referral Analytics - Estadísticas de referidos
Tab 3: Rewards - Gestión de recompensas pendientes

Landing Page (`app/src/landing-page/`)

landing-page/
├── LandingPage.tsx         # página principal (B2C - ruta /)
├── TeamsLandingPage.tsx    # página B2B/Enterprise (ruta /teams)
├── contentSections.tsx     # Contenido en español
├── components/
│   ├── Hero.tsx            # Hero section
│   ├── Features.tsx        # Beneficios
│   ├── Testimonials.tsx    # Testimonios
│   ├── FAQ.tsx             # Preguntas frecuentes
│   └── Footer.tsx          # Footer
└── teams/                  # Componentes página B2B (/teams)
    ├── TeamsHero.tsx       # Hero con stats empresariales
    ├── TeamsValueProp.tsx  # 6 value propositions
    ├── TeamsUseCases.tsx   # Casos de uso (4 cards)
    ├── TeamsPricing.tsx    # Planes Team 10/50/100/Enterprise
    ├── TeamsComparison.tsx # Tabla vs Udemy/Coursera
    ├── TeamsTestimonials.tsx # Testimonios empresariales
    ├── TeamsFAQ.tsx        # FAQ empresarial
    ├── TeamsDemoForm.tsx   # Formulario solicitud demo
    ├── TeamsCTA.tsx        # Final CTA
    └── operations.ts       # submitDemoRequest action

Rutas de landing pages:

/ - LandingPage (B2C - usuarios individuales)
/teams - TeamsLandingPage (B2B - empresas y equipos)

Legal (`app/src/legal/`)

legal/
├── PrivacyPage.tsx         # Politica de Privacidad
└── TermsPage.tsx           # Terminos de Servicio

Paginas legales bilingües (ES/EN):

/privacy - Politica de Privacidad compliant con Ley Colombiana 1581/2012 y leyes USA (COPPA, CCPA)
/terms - Terminos de Servicio con jurisdiccion Colombia/USA

Contenido i18n:

app/src/shared/content/locales/es/privacy.ts - 14 secciones
app/src/shared/content/locales/es/terms.ts - 16 secciones
app/src/shared/content/locales/en/privacy.ts - Traduccion inglés
app/src/shared/content/locales/en/terms.ts - Traduccion inglés

User (`app/src/user/`)

user/
├── AccountPage.tsx         # página de cuenta
├── MyProgressPage.tsx      # Dashboard "Mi Progreso"
├── MyPlanPage.tsx          # página "Mi Plan" - Gestión de suscripción
├── ProfilePage.tsx         # página de perfil propio
├── PublicProfilePage.tsx   # página de perfil público
├── SettingsPage.tsx        # página de configuración con tabs
├── operations.ts           # Queries y actions de usuario
├── constants.ts            # Menu items del usuario
├── layout/                 # Layouts de cuenta
│   ├── AccountLayout.tsx   # Layout unificado con sidebar
│   ├── AccountSidebar.tsx  # Sidebar de navegación de cuenta
│   └── index.ts            # Exportaciones
└── components/
    ├── WeeklyActivityChart.tsx     # Gráfica de actividad semanal
    ├── WeeklyRankCard.tsx          # Tarjeta de ranking semanal
    ├── ProfileHeader.tsx           # Header del perfil
    ├── ProfileStats.tsx            # Estadísticas del perfil
    ├── CourseProgressCards.tsx     # Tarjetas de cursos en progreso
    ├── CertificatesGrid.tsx        # Grid de certificados
    ├── ProfileSettingsForm.tsx     # Formulario de perfil
    ├── PreferencesForm.tsx         # Formulario de preferencias
    ├── AccountSettingsForm.tsx     # Formulario de cuenta
    └── AvatarUpload.tsx            # Componente de subida de avatar

AccountLayout: Todas las páginas de cuenta (/account/*) usan AccountLayout que provee:

Sidebar de navegación en desktop (izquierda)
Sheet con navegación en mobile (accesible desde botón)
Navegación entre: Mi Cuenta, Mi Progreso, Mi Plan, Perfil, Referidos, Configuración

Client Components (`app/src/client/`)

client/
├── App.tsx                 # Root component
└── components/
    ├── NavBar/
    │   ├── NavBar.tsx      # Barra de navegación
    │   └── constants.ts    # Links de navegación
    ├── icons/              # Sistema de íconos
    │   ├── Icon.tsx        # Wrapper de Iconify
    │   ├── BrandIcon.tsx   # Logos de marca con dark mode
    │   ├── index.ts        # Exportaciones
    │   └── README.md       # Documentación de uso
    ├── Breadcrumb.tsx      # Migas de pan (custom)
    ├── PageHeader.tsx      # Encabezado de página con breadcrumb
    ├── ui/                 # Componentes ShadCN
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   ├── input.tsx
    │   ├── tabs.tsx
    │   ├── sheet.tsx       # Panel deslizante (mobile nav)
    │   ├── skeleton.tsx
    │   └── ...24 componentes
    └── DarkModeSwitcher.tsx

Sistema de íconos:

Lucide React (primario): Íconos de UI estándar (Eye, Github, Menu, etc.)
Iconify (logos únicamente): Logos de marca (Google, Prisma, OpenAI, etc.)

Server (`app/src/server/`)

server/
├── setup.ts                # Configuración global del servidor
├── middleware/             # Middleware de Express
│   └── security.ts         # Security headers (helmet.js)
└── scripts/                # Scripts del servidor
    ├── dbSeeds.ts          # Semillas de base de datos
    └── seedPricingPlans.ts # Semillas de planes de precios

Server Setup:

setup.ts: Función setupServer ejecutada al iniciar el servidor Wasp
Configura middleware global que aplica a todas las rutas
Usado por main.wasp vía server.setupFn

Security Middleware:

security.ts: Implementación de security headers con helmet.js
- Content Security Policy (CSP) configurado para Stripe, YouTube, Google Analytics, S3
- HTTP Strict Transport Security (HSTS) con 1 año de max-age
- X-Frame-Options: DENY (previene clickjacking)
- X-Content-Type-Options: nosniff (previene MIME sniffing)
- Referrer-Policy: strict-origin-when-cross-origin
- Permissions-Policy: restringe características del navegador
- Exporta applySecurityHeaders para uso global

Shared (`app/src/shared/`)

shared/
├── content/
│   └── es.ts               # Contenido en español
├── utils/
│   └── formatFileSize.ts   # Formatear bytes a KB/MB
└── utils.ts                # Utilidades compartidas

Blog/documentación (`blog/`)

blog/
├── astro.config.mjs        # configuración de Astro
├── package.json
└── src/
    ├── assets/             # Imagenes y logos
    ├── components/         # Componentes Astro
    ├── styles/             # Estilos Tailwind
    └── content/
        └── docs/           # documentación Markdown
            ├── index.md
            ├── arquitectura/
            ├── guias/
            ├── componentes/
            ├── api/
            └── plan/

E2E Tests (`e2e-tests/`)

e2e-tests/
├── package.json
├── playwright.config.ts
└── tests/
    ├── auth.spec.ts        # Tests de autenticación
    ├── courses.spec.ts     # Tests de cursos
    └── payment.spec.ts     # Tests de pagos

Archivos de configuración

Archivo	Proposito
`main.wasp`	configuración central de Wasp
`schema.prisma`	Modelos de base de datos
`tailwind.config.js`	configuración de Tailwind CSS
`.env.server`	Variables de entorno del servidor
`.env.client`	Variables de entorno del cliente
`CLAUDE.md`	Instrucciones para Claude Code

Convencion de Nombres

Paginas: PascalCase + Page.tsx (ej: CoursesPage.tsx)
Componentes: PascalCase.tsx (ej: CourseCard.tsx)
Operations: camelCase (ej: getCourses, enrollInCourse)
Archivos de operaciones: operations.ts
Constantes/Contenido: camelCase.ts (ej: es.ts, constants.ts)

Estructura del Proyecto

Monorepo Overview

aplicación Principal (app/)

Detalle por Feature

Auth (app/src/auth/)

Courses (app/src/courses/)

Payment (app/src/payment/)

Referral (app/src/referral/)

Promo (app/src/promo/)

Admin (app/src/admin/)

Landing Page (app/src/landing-page/)

Legal (app/src/legal/)

User (app/src/user/)

Client Components (app/src/client/)

Server (app/src/server/)

Shared (app/src/shared/)

Blog/documentación (blog/)

E2E Tests (e2e-tests/)