Appearance

Return to top

StudentHub Frontend

🎯 Descripción del Proyecto

StudentHub Frontend es una aplicación construida en React con TypeScript, diseñada para proporcionar una interfaz amigable, eficiente y bien estructurada para la gestión de estudiantes dentro del ecosistema StudentHub.

Con un enfoque en la experiencia de usuario y la modularidad, este frontend permite visualizar, agregar, editar y gestionar datos de estudiantes, autenticarse mediante cookies y JWT, así como trabajar con archivos alojados en Google Drive.

✨ Características Principales

  • Autenticación y Protección de Rutas: Uso de Context API y cookies para mantener sesiones seguras con tokens JWT.
  • Formulario Completo de Estudiantes: Formulario con múltiples secciones (datos personales, contacto, documentación), validación y envío.
  • Carga de Archivos: Subida de imágenes y documentos hacia Google Drive desde el formulario.
  • Componentes Reutilizables:
    • FormInput: Input genérico con soporte para texto, select, fecha y archivos.
    • FormSection: Estructura modular para secciones del formulario.
    • Sidebar, Layout, ProtectedRoute, etc.
  • Hooks Personalizados:
    • useAddStudent, useStudents, useAuth, etc.
  • Navegación Dinámica: Gestión de rutas con React Router.
  • Estilos en SCSS: Estilos globales y por componente (variables.module.scss, layout.module.scss, etc.).
  • Consumo de API Backend: Uso de fetch para comunicarse con el backend de StudentHub.
  • Gestión de Estado: Basado en Context API y hooks controlados por formulario.

⚙️ Tecnologías Utilizadas

  • Librerías principales:
    • React
    • TypeScript
    • React Router DOM
    • Luxon para fechas
    • classnames para estilos condicionales
  • Estilos:
    • SCSS modular
  • Autenticación:
    • Cookies + JWT
  • Manejo de archivos:
    • Inputs tipo file conectados con Google Drive vía backend
  • Desarrollo:
    • Vite para bundling y servidor local rápido
    • ESLint, Prettier para calidad de código
    • VitePress para documentación técnica

🧩 Estructura del Proyecto 

src/
├── assets/                  # Estilos globales y variables SCSS
├── components/              # Componentes reutilizables
│   ├── common/
│   ├── layout/
│   └── forms/
├── config/                  # Configuración (Vite, endpoints)
├── features/                # Módulos individuales (login, dashboard, etc.)
├── hooks/                   # Hooks personalizados
├── interface/               # Tipado global y por módulo
├── pages/                   # Páginas principales
├── routes/                  # Definición de rutas con protección
├── types/                   # Tipos genéricos (auth, tokens, cookies)
├── utils/                   # Funciones utilitarias (fechas, cookies, validaciones)
├── App.tsx                  # Componente principal
└── main.tsx                 # Punto de entrada

🚀 Instalación y Uso Local

  1. Clonar el repositorio
bash
git clone <URL_DEL_REPOSITORIO>
cd studenthub/frontend
  1. Instalar dependencias
bash
npm install
  1. Configurar variables de entorno

Crea un archivo .env en la raíz del frontend con las siguientes variables (ajusta la URL del backend si es necesario):

bash
VITE_BACKEND_URL=http://localhost:3000/api
  1. Iniciar servidor de desarrollo
bash
npm run dev

Esto abrirá la aplicación en http://localhost:5173 (puerto por defecto de Vite).

🧪 Pruebas

Actualmente el frontend no incluye un sistema de testing, pero se recomienda agregar soporte con herramientas como:

  • Vitest + React Testing Library para componentes.
  • Cypress para pruebas end-to-end.

🗂️ Funcionalidades Clave

  • Login con autenticación segura
  • Protección de rutas con tokens
  • Formulario de ingreso de estudiantes con todos los campos
  • Visualización detallada de perfiles
  • Carga y vista previa de imágenes/documentos
  • Organización visual clara con Grid y FormSection

🌐 Despliegue

El proyecto puede desplegarse en servidores como Netlify, Vercel, o entornos tradicionales como cPanel configurando correctamente el build.

Crear versión de producción

bash
npm run build

Esto genera los archivos en la carpeta dist.

📦 Compilación con Vite

bash
npm run dev     # Desarrollo local
npm run build   # Build de producción

Este frontend se comunica con la API REST de StudentHub para todas sus operaciones. Asegúrate de tener el backend en funcionamiento para interactuar con las funcionalidades protegidas.