⚛️ SkillLink Frontend

---

📖 Descripción del Proyecto

SkillLink Frontend es una aplicación web desarrollada con React y TypeScript que complementa la plataforma SkillLink, conectando a desarrolladores mediante mentorías y desafíos colaborativos. Ofrece una interfaz amigable, moderna y completamente integrada con el backend en Spring Boot.

---

✨ Características Destacadas

🔐 Autenticación

• Registro, inicio de sesión y logout con JWT
• Control de sesión con expiración y rutas protegidas

👤 Gestión de Perfiles

• Creación y edición de perfil técnico
• Tecnologías, intereses y experiencia profesional
• Control de visibilidad público/privado

🎓 Mentorías y Desafíos

• Listado con filtros avanzados
• Participación en sesiones y challenges
• Sistema de cupos y estado de participación

💬 Chat en Tiempo Real

• Chats directos entre usuarios
• Chats grupales para desafíos y mentorías
• WebSocket integrado con reconexión automática

🔍 Búsqueda y Filtros

• Filtro por tipo de contenido, tecnologías, nivel de dificultad
• Búsqueda por nombre, rol o descripción

📊 Dashboard Personal

• Actividad reciente del usuario
• Sesiones activas y desafíos en curso

---

🛠️ Tecnologías Utilizadas

Categoría	Herramienta	Versión	Propósito
Framework	React	18.x	UI SPA
Lenguaje	TypeScript	5.x	Tipado estático
Build Tool	Vite	5.x	Bundling y desarrollo
Estilos	TailwindCSS	3.x	Utilidades CSS
Estado	Zustand / Context API	-	Manejo de estado global
Formularios	React Hook Form + Zod	-	Validaciones
API	Axios	-	Peticiones HTTP
WebSocket	STOMP.js + SockJS	-	Comunicación en tiempo real

---

📁 Estructura del Proyecto

📁 src/
├── api/               # Servicios HTTP
├── auth/              # Autenticación y sesión
├── components/        # Componentes reutilizables
├── features/          # Funcionalidades: chat, perfiles, etc.
├── hooks/             # Hooks personalizados
├── pages/             # Vistas principales
├── routes/            # Ruteo público y privado
├── types/             # Tipos y enums globales
├── utils/             # Utilidades varias
└── App.tsx            # Aplicación principal

---

⚙️ Instalación y Configuración

🔧 Prerrequisitos

• Node.js 18+
• npm o pnpm
• Vite (opcional)

🚀 Instalación

git clone https://github.com/R-Mutt22/skilllink-frontend.git
cd skilllink-frontend
npm install

🔐 Variables de Entorno

Crear un archivo .env en la raíz:

VITE_API_URL=https://alumnithon-bad-batch-backend.onrender.com
VITE_WEBSOCKET_URL=wss://alumnithon-bad-batch-backend.onrender.com/ws

🧪 Ejecutar en modo desarrollo

npm run dev

Abrir en navegador: http://localhost:5173

---

🔐 Manejo de Sesión (JWT)

• Token guardado en Cookies
• Axios intercepta y adjunta el token en cada request
• Rutas protegidas con PrivateRoute
• Logout automático al expirar el token

---

🌐 Comunicación con el Backend

import axios from 'axios';

const API = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

API.get('/api/profiles/me').then(response => {
  console.log(response.data);
});

---

💬 WebSocket y Chat

• Conexión usando STOMP.js
• Soporte para mensajes directos
• Hook personalizado: useChatSocket()

---

📦 Build y Despliegue

🛠️ Build local

npm run build

☁️ Deploy en Netlify

1. Conectar el repositorio a Netlify
2. Variables de entorno:
   • VITE_API_URL
   • VITE_WEBSOCKET_URL
3. Build command: npm run build
4. Publish directory: dist

---

👨‍💻 Equipo de Desarrollo

Desarrollador
Leodan
Zotta
Monik

---

📄 Licencia

MIT License

Copyright (c) 2025
SkillLink Frontend - Bad Batch Team

---

🚀 Hecho con ❤️ para la comunidad de desarrolladores