Home
🌟 Bienvenido/a a la Wiki Oficial de SISINFO
Este repositorio centraliza toda la documentación técnica y funcional del sistema de gestión académica.
- 📖 Resumen del Proyecto
- 💻 Tecnologías principales
- 🎯 Requisitos y Alcance
- 🧱 Arquitectura del Sistema
- 🎨 UI/UX y Diseño Visual
- 🔐 Autenticación y Roles
- ⚙️ Instalación y Despliegue
- 💻 Documentación técnica
- 📚 Bibliografía y Referencias
SISINFO es una aplicación web moderna para la gestión académica en el Departamento de Ingeniería de Sistemas. Permite a usuarios administrativos y académicos realizar gestiones como:
- Aplicaciones a tesis y proyectos de grado
- Gestión de asistencias graduadas
- Frontend: Next.js, shadcn, Tailwind CSS, Zustand, TanStack Query
- Backend: NestJS, TypeORM, Docker
- Monorepo: Turborepo
- CRUD de proyectos, tesis, usuarios y aplicaciones.
- Visualización de asistencias y postulación.
- Sistema de roles: administrador, coordinador, estudiante, profesor y estudiante de maestría.
- Seguridad en endpoints y rutas protegidas.
- Accesibilidad mínima AA.
- Alta cohesión y bajo acoplamiento en módulos.
- Uso interno académico.
- Posibilidad de expansión a otros departamentos.
La interfaz de usuario de SISINFO ha sido diseñada para ser intuitiva, accesible y eficiente. Se prioriza una experiencia de usuario fluida, que permita realizar las tareas de forma rápida y sencilla.
- Prototipos Figma: Visualización interactiva de las interfaces, permitiendo pruebas de usabilidad.
El diseño de la experiencia de usuario de SISINFO se basa en garantizar la eficiencia, claridad y facilidad de uso. Las decisiones de diseño se toman con base en los siguientes principios:
- Claridad: La navegación y las funcionalidades son claras y directas.
- Accesibilidad: El sistema es accesible para personas con discapacidad, asegurando un alto nivel de contraste y opciones de navegación por teclado.
- Consistencia: Las interacciones, colores y elementos gráficos siguen patrones coherentes en todas las pantallas.
- Feedback: El sistema proporciona retroalimentación inmediata sobre las acciones del usuario, como confirmaciones de acciones exitosas o errores.
- Manejo de estados: Uso de Zustand para manejar el estado global de la aplicación y proporcionar una experiencia fluida entre las interacciones del usuario.
- Cargar/mostrar datos dinámicamente: TanStack Query permite que los datos se gestionen y sincronicen de manera eficiente con el servidor, sin recargar la página.
| Elemento | Enlace | Estado |
|---|---|---|
| Historias de Usuario | 📝 Historias de Usuario | HECHO |
| Prototipos Figma | 🔗 Figma | HECHO |
Los prototipos interactivos permiten ver cómo es la experiencia del usuario al interactuar con el sistema. Los prototipos fueron creados en Figma para reflejar con exactitud la estructura de las interfaces, navegación y comportamiento de la aplicación.
La autenticación se maneja mediante JWT (JSON Web Tokens). Los usuarios envían sus credenciales al backend, que genera un token JWT al validar sus datos. Este token se incluye en las solicitudes posteriores para autenticar al usuario.
Flujo de autenticación:
- El usuario inicia sesión con sus credenciales.
- El backend valida las credenciales.
- Si son correctas, se genera un JWT que se envía al frontend.
- El frontend almacena el JWT y lo incluye en las solicitudes posteriores.
Cada usuario tiene un rol asignado que determina qué acciones pueden realizar en el sistema. Los roles disponibles son:
- Administrador: Acceso completo a todas las funcionalidades.
- Coordinador: Acceso limitado a ciertas funcionalidades.
- Estudiante y estudiante de maestria: Solo puede acceder a sus propios datos.
- Profesor: Puede gestionar tesis y supervisar proyectos.
Flujo de autorización:
- El backend valida el JWT para verificar la identidad del usuario.
- Luego, verifica el rol del usuario y le concede acceso solo a las funcionalidades permitidas para su rol.
| Sección | Descripción | Estado |
|---|---|---|
| 🧩 Diagrama UML | Modelo UML | HECHO |
| 🧩 Diagrama de componentes | Modelo de componentes | HECHO |
Para configurar el proyecto en tu entorno local, sigue las instrucciones detalladas en el siguiente enlace:
🔗 Guía de instalación y despliegue
| Sección | Descripción | Estado |
|---|---|---|
| 🧩 Organización del monorepo y carpetas del front | Documentación de carpetas y entidades | 🚧 En Progreso |
| 📐 Backend | Documentación de carpetas y end-points del back-end | HECHO |
- Salazar, P. H. (2011). La importancia de la satisfacción del usuario. Documentación de las Ciencias de la Información, 34, 349.
- Estrada, G. C. T., Montero, J. M. C., Hernández, Y. C. U., & Herrera, J. J. R. (2019). Innovación tecnológica: Reflexiones teóricas. Revista Venezolana de Gerencia, 24(85).
- Next.js Documentation. (n.d.). Next.js. https://nextjs.org/docs
- NestJS Documentation. (n.d.). NestJS. https://docs.nestjs.com/
- TypeORM Documentation. (n.d.). TypeORM. https://typeorm.io/
- Docker Documentation. (n.d.). Docker. https://docs.docker.com/
- JWT.io. (n.d.). JWT - Introduction. https://jwt.io/introduction/
- PostgreSQL Documentation. (n.d.). PostgreSQL. https://www.postgresql.org/docs/
- Tailwind CSS Documentation. (n.d.). Tailwind CSS. https://tailwindcss.com/docs
- TanStack Query Documentation. (n.d.). TanStack Query. https://tanstack.com/query/v4
- Zustand Documentation. (n.d.). Zustand. https://github.com/pmndrs/zustand
- Figma Documentation. (n.d.). Figma. https://www.figma.com/resources/learn/
- Turborepo Documentation. (n.d.). Turborepo. https://turborepo.org/docs
- Compodoc Documentation. (n.d.). Compodoc. https://compodoc.app/
