Features Overview - RuedaPro UNIPAZ

RuedaPro UNIPAZ is a comprehensive academic platform designed specifically for managing engineering project evaluations at UNIPAZ. Built with security, usability, and academic rigor in mind.

Core Features

Multi-Role Authentication

Secure role-based access for admins, professors, and students

Project Management

Complete project lifecycle from registration to evaluation

Rubric-Based Evaluation

Standardized 9-criteria evaluation with live scoring

Results Dashboard

Public ranking system and project gallery

Real-Time Sync

Instant updates powered by Supabase

Security & Privacy

Row-level security and XSS protection

Authentication

Multi-Role Access Control

RuedaPro UNIPAZ supports three distinct user roles with separate login portals and dashboards:

Admin: Full system control - user management, project creation, and assignment
Docente (Professor): Evaluate assigned projects using standardized rubrics
Estudiante (Student): View evaluation results and feedback

js/auth.js

// Role verification during login
if (role === 'docente' && currentProfile.rol === 'docente') {
    navigateTo('dashboard-docente');
} else if (role === 'estudiante' && currentProfile.rol === 'estudiante') {
    navigateTo('dashboard-estudiante');
} else if (role === 'admin' && currentProfile.rol === 'admin') {
    navigateTo('dashboard-admin');
} else {
    errorDiv.textContent = `No tienes permiso de "${role}".`;
}

Session Management

Automatic session restoration ensures users stay logged in across browser refreshes:

js/auth.js

async function restoreSession() {
    const { data: { session }, error } = await supabaseClient.auth.getSession();
    if (session && session.user) {
        currentUser = session.user;
        const userMeta = currentUser.user_metadata || {};
        currentProfile = {
            id: currentUser.id,
            nombre: userMeta.nombre || currentUser.email,
            rol: userMeta.rol || 'estudiante'
        };
    }
}

Project Management

Project Registration

Administrators can create projects with comprehensive metadata:

Project name and category (Desarrollo, Propuesta, Aplicación)
Semester and year tracking
Multiple evaluator assignment (up to 3 professors per project)
Student assignment for authorship tracking

Projects must have at least one evaluator assigned before creation. The system enforces this validation to ensure all projects can be evaluated.

Project States

Projects flow through three states:

Pendiente (Pending): Awaiting evaluation from assigned professors
Evaluado (Evaluated): All assigned evaluators have submitted scores
Vencida (Expired): Evaluation deadline has passed

js/views/adminDashboardView.js

const estadoClass = { 
    'Pendiente': 'badge-warning', 
    'Evaluado': 'badge-success', 
    'Vencida': 'badge-danger' 
};

Dynamic Evaluator Assignment

The system prevents duplicate evaluator assignments with real-time dropdown validation:

js/views/adminDashboardView.js

function updateEvaluatorDropdowns() {
    const val1 = sel1.value;
    const val2 = sel2.value;
    const val3 = sel3.value;

    // Disable already-selected evaluators in other dropdowns
    allDropdowns.forEach(current => {
        const otherVals = allDropdowns
            .filter(d => d.el !== current.el)
            .map(d => d.val)
            .filter(v => v !== "");
        
        Array.from(current.el.options).forEach(opt => {
            if (opt.value === "") return;
            opt.disabled = otherVals.includes(opt.value);
        });
    });
}

Evaluation System

Standardized 9-Criteria Rubric

Each project is evaluated using a comprehensive rubric with 9 academic criteria:

Planteamiento del problema (Problem Statement)
Justificación (Justification)
Objetivo general (General Objective)
Objetivos específicos (Specific Objectives)
Estado del arte / Antecedentes (State of the Art)
Metodología de desarrollo (Development Methodology)
Metodología de investigación (Research Methodology)
Viabilidad del proyecto (Project Viability)
Claridad de la presentación (Presentation Clarity)

Each criterion is scored from 1.0 to 5.0, with descriptive rubric levels:

1.0 – 2.9: Does not meet expectations
3.0 – 3.9: Basic compliance
4.0 – 4.4: Good level
4.5 – 5.0: Excellent

Live Score Calculation

The final score updates automatically as professors enter grades:

js/views/evaluacionView.js

function updateFinalScore() {
    const inputs = document.querySelectorAll('.rubric-input');
    let sum = 0;
    let count = 0;
    inputs.forEach(i => {
        let val = parseFloat(i.value) || 0;
        if(val > 5) { val = 5; i.value = 5; }
        if(val < 0) { val = 0; i.value = 0; }
        sum += val;
        count++;
    });
    const avg = sum / count;
    document.getElementById('final-score').innerText = avg.toFixed(1);
}

Timed Evaluation Sessions

A 15-minute countdown timer helps maintain evaluation pace during live events:

js/views/evaluacionView.js

let timeRemaining = 15 * 60; // 15 minutes
evalTimerInterval = setInterval(() => {
    timeRemaining--;
    if(timeRemaining < 0) {
        clearInterval(evalTimerInterval);
        timerEl.style.color = "var(--status-danger)";
        return;
    }
    let m = Math.floor(timeRemaining / 60);
    let s = timeRemaining % 60;
    timerEl.innerText = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}, 1000);

Automatic State Transitions

When all assigned evaluators submit their scores, the project automatically transitions to “Evaluado”:

js/views/evaluacionView.js

// Count assigned evaluators
const { data: assignedData } = await supabaseClient
    .from('proyecto_evaluadores')
    .select('evaluador_id', { count: 'exact' })
    .eq('proyecto_id', currentEvaluationProjectId);
const totalEvaluators = assignedData.length;

// Count submitted evaluations
const { data: evalsData } = await supabaseClient
    .from('evaluaciones')
    .select('evaluador_id', { count: 'exact' })
    .eq('proyecto_id', currentEvaluationProjectId);
const totalEvaluated = evalsData.length;

// Update if all evaluators have submitted
if (totalEvaluated >= totalEvaluators && totalEvaluators > 0) {
    await supabaseClient
        .from('proyectos')
        .update({ estado: 'Evaluado' })
        .eq('id', currentEvaluationProjectId);
}

Results and Gallery

Student Dashboard

Students can view their evaluation results including:

Average score across all evaluators
Individual feedback from each professor
Project details (category, semester, year)

js/views/estudianteDashboardView.js

const totalScore = evalDataList.reduce(
    (acc, curr) => acc + parseFloat(curr.puntaje_final || 0), 0
);
const avgScore = (totalScore / evalDataList.length).toFixed(1);

Public Results Gallery

Completed projects are displayed in a public gallery showing:

Project names and categories
Final evaluation scores
Student authors
Visual representation by semester

Professor Dashboard Statistics

Professors see at-a-glance metrics:

Total assigned projects
Pending evaluations
Completed evaluations

Real-Time Features

Supabase Integration

All data operations use Supabase’s real-time database:

js/config.js

if (window.supabase) {
    supabaseClient = window.supabase.createClient(
        SUPABASE_URL, 
        SUPABASE_ANON_KEY
    );
}

Instant Dashboard Updates

Dashboards refresh automatically when:

New users are created
Projects are registered
Evaluations are submitted
Project states change

Security Features

Row-Level Security (RLS)

Database access is controlled by RLS policies: Authenticated users can view all profiles and evaluations:

CREATE POLICY "Authenticated read perfiles" ON public.perfiles 
FOR SELECT 
TO authenticated 
USING (true);

Anonymous users can only view evaluated projects:

CREATE POLICY "Public read evaluated evaluaciones" ON public.evaluaciones 
FOR SELECT 
TO anon
USING (
    EXISTS (
        SELECT 1 FROM public.proyectos p
        WHERE p.id = evaluaciones.proyecto_id
        AND p.estado = 'Evaluado'
    )
);

XSS Protection

All user input is sanitized before rendering:

js/config.js

function escapeHTML(str) {
    if (typeof str !== 'string') return str;
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

Used throughout the application:

<td><strong>${escapeHTML(user.nombre)}</strong></td>

Secure Session Management

JWT-based authentication with automatic token refresh through Supabase Auth.

User Interface Features

Theme Support

Built-in light/dark theme toggle:

index.html

<button class="theme-toggle" id="theme-toggle" aria-label="Toggle Dark Mode">
    <i class="fa-solid fa-moon"></i>
</button>

Responsive Design

Fully responsive layout with mobile navigation:

Desktop: Full navigation bar with user menu
Mobile: Hamburger menu with slide-out navigation
Tablet: Adaptive layouts for dashboards

Search and Filtering

Real-time filtering on:

User management: Filter by name and role
Project management: Filter by name and category
Evaluation lists: Filter by status and semester

js/views/adminDashboardView.js

function filterAdminUsers() {
    clearTimeout(adminUsersDebounceTimer);
    adminUsersDebounceTimer = setTimeout(() => {
        const search = document.getElementById('admin-search-users').value.toLowerCase();
        const role = document.getElementById('admin-filter-role').value;
        
        const filtered = adminUsersCache.filter(u => {
            const matchSearch = u.nombre.toLowerCase().includes(search);
            const matchRole = role ? u.rol === role : true;
            return matchSearch && matchRole;
        });
        
        renderAdminUsersTable(filtered);
    }, 300);
}

Critical actions require confirmation:

Deleting users
Submitting evaluations
Removing projects

Technology Stack

Vanilla JavaScript

No framework dependencies - pure ES6+

Supabase

PostgreSQL backend with real-time capabilities

CSS Custom Properties

Dynamic theming with CSS variables

Font Awesome

Comprehensive icon library

SPA Router

Client-side routing without page reloads

Static Hosting

Deploy anywhere - no server required

Learn More

Explore detailed documentation for each feature:

User Management

Create and manage admin, professor, and student accounts

Project Workflow

Complete project lifecycle from creation to results

Evaluation Rubric

Deep dive into the 9-criteria rubric system

Security Policies

Row-level security and data protection

Get Started

User Guides

Features

Deployment

Documentation Index

​Core Features

Multi-Role Authentication

Project Management

Rubric-Based Evaluation

Results Dashboard

Real-Time Sync

Security & Privacy

​Authentication

​Multi-Role Access Control

​Session Management

​Project Management

​Project Registration

​Project States

​Dynamic Evaluator Assignment

​Evaluation System

​Standardized 9-Criteria Rubric

​Live Score Calculation

​Timed Evaluation Sessions

​Automatic State Transitions

​Results and Gallery

​Student Dashboard

​Public Results Gallery

​Professor Dashboard Statistics

​Real-Time Features

​Supabase Integration

​Instant Dashboard Updates

​Security Features

​Row-Level Security (RLS)

​XSS Protection

​Secure Session Management

​User Interface Features

​Theme Support

​Responsive Design

​Search and Filtering

​Modal Confirmations

​Technology Stack

Vanilla JavaScript

Supabase

CSS Custom Properties

Font Awesome

SPA Router

Static Hosting

​Learn More

User Management

Project Workflow

Evaluation Rubric

Security Policies

Core Features

Authentication

Multi-Role Access Control

Session Management

Project Management

Project Registration

Project States

Dynamic Evaluator Assignment

Evaluation System

Standardized 9-Criteria Rubric

Live Score Calculation

Timed Evaluation Sessions

Automatic State Transitions

Results and Gallery

Student Dashboard

Public Results Gallery

Professor Dashboard Statistics

Real-Time Features

Supabase Integration

Instant Dashboard Updates

Security Features

Row-Level Security (RLS)

XSS Protection

Secure Session Management

User Interface Features

Theme Support

Responsive Design

Search and Filtering

Modal Confirmations

Technology Stack

Learn More