Perfiles de Usuario

TalentBricksAI permite a los usuarios tener perfiles publicos y privados donde pueden mostrar su progreso, cursos completados y certificados obtenidos.

características

• Perfil propio: Vista completa de tu progreso y logros
• Perfil público: Otros usuarios pueden ver tu perfil por username
• configuración de privacidad: Control sobre la visibilidad del perfil
• Estadísticas: Clases completadas, racha actual, cursos finalizados
• Cursos en progreso: Tarjetas con indicador de progreso
• Certificados: Grid de cursos completados con enlaces a certificados
• Responsive: Diseño adaptable para mobile y desktop

Rutas

Ruta	Acceso	descripción
/account/profile	Autenticado	Perfil propio (solo lectura)
/profile/:username	público	Perfil público de otro usuario

configuración de Privacidad

Los usuarios pueden controlar la visibilidad de su perfil mediante dos campos:

model User {
  // ...
  showProfilePublic    Boolean @default(true)
  showInLeaderboards   Boolean @default(true)
}

Campo	descripción
showProfilePublic	Si false, el perfil no muestra información pública
showInLeaderboards	Si false, el usuario no aparece en rankings

Flujo del Usuario

Perfil Propio

Login → NavBar "Perfil" → /account/profile
                              ↓
              Vista de tu información pública
                              ↓
              "Edit Profile" → /account (settings)

Perfil público

Ver username en curso/certificado → Click → /profile/:username
                                                    ↓
                              ¿Perfil público?
                                    ↓
                    ┌──────────────────────────┐
                    ▼                          ▼
            Si: Mostrar perfil       No: "Perfil privado"

Componentes

Los perfiles estan construidos con componentes reutilizables:

ProfileHeader

Header del perfil con avatar, username y fecha de registro.

import { ProfileHeader } from "@src/user/components";

<ProfileHeader username="juandiaz" createdAt={new Date()} isOwnProfile={false} />;

ProfileStats

Tarjetas con Estadísticas del usuario.

import { ProfileStats } from "@src/user/components";

<ProfileStats
  totalLessonsCompleted={42}
  coursesCompleted={5}
  currentStreak={7}
  coursesStarted={8} // opcional, solo en perfil propio
/>;

CourseProgressCards

Grid de cursos en progreso con barra de progreso.

import { CourseProgressCards } from "@src/user/components";

<CourseProgressCards
  courses={[
    {
      course: {
        id: 1,
        title: "Python básico",
        slug: "python-básico",
        thumbnail: "https://...",
        difficulty: "BEGINNER",
      },
      progress: 65,
    },
  ]}
/>;

CertificatesGrid

Grid de cursos completados con certificados.

import { CertificatesGrid } from "@src/user/components";

<CertificatesGrid
  courses={[
    {
      course: {
        id: 1,
        title: "Python básico",
        slug: "python-básico",
        thumbnail: "https://...",
        difficulty: "BEGINNER",
        instructorName: "TalentBricksAI",
      },
      certificate: {
        id: 1,
        verificationCode: "abc123",
        createdAt: new Date(),
      },
    },
  ]}
/>;

Queries

getUserProfile

Obtiene el perfil completo del usuario autenticado.

import { useQuery, getUserProfile } from 'wasp/client/operations';

function ProfilePage() {
  const { data: profile, isLoading } = useQuery(getUserProfile);

  return (
    <div>
      <ProfileHeader username={profile.username} />
      <ProfileStats stats={profile.stats} />
      <CourseProgressCards courses={profile.coursesInProgress} />
      <CertificatesGrid courses={profile.completedCourses} />
    </div>
  );
}

getPublicProfile

Obtiene el perfil público de un usuario por username.

import { useQuery, getPublicProfile } from 'wasp/client/operations';
import { useParams } from 'react-router-dom';

function PublicProfilePage() {
  const { username } = useParams<{ username: string }>();
  const { data: profile, isLoading } = useQuery(getPublicProfile, { username });

  if (!profile.isVisible) {
    return <PrivateProfileMessage />;
  }

  return (
    <div>
      <ProfileHeader username={profile.username} />
      <ProfileStats stats={profile.stats} />
      <CourseProgressCards courses={profile.coursesInProgress} />
      <CertificatesGrid courses={profile.completedCourses} />
    </div>
  );
}

integración con navegación

El perfil aparece en el menu del usuario:

user/constants.ts

{
  name: "Perfil",
  to: routes.AccountProfileRoute.to,
  icon: User,
  isAuthRequired: true
}

Estados Vacios

Los componentes manejan estados vacios con mensajes amigables:

• Sin cursos en progreso: “No hay cursos en progreso”
• Sin cursos completados: “No hay cursos completados aun”
• Perfil privado: “Este perfil es privado”

Responsive Design

• Mobile: Stack vertical de componentes
• Tablet: Grid de 2 columnas para cursos
• Desktop: Grid de 3 columnas para cursos, stats en 4 columnas

Localizacion (i18n)

Todos los textos estan localizados:

// ES
account.profile.publicProfile.title: "Perfil público"
account.profile.publicProfile.memberSince: "Miembro desde"
account.profile.publicProfile.stats.lessonsCompleted: "Clases completadas"

// EN
account.profile.publicProfile.title: "Public Profile"
account.profile.publicProfile.memberSince: "Member since"
account.profile.publicProfile.stats.lessonsCompleted: "Lessons completed"

Mejoras Futuras

• Bio personalizable del usuario
• Links a redes sociales
• Badges y logros
• Actividad reciente (ultimas clases vistas)
• Gráfica de progreso en el tiempo
• Comparacion con otros estudiantes