Construyendo SapCoach

SapCoach es una app interactiva de entrenamiento para certificación SAP del examen S/4HANA Sales & Distribution. Corre como una SPA en React con preguntas de opción múltiple barajadas, ítems de desafío generados opcionalmente por IA, intentos cronometrados, pistas tipo clue y seguimiento persistente de puntaje — todo almacenado localmente en el navegador.

Qué hace

Pantalla de inicio

Vista de landing con resumen del test y estadísticas personales:

• 39 preguntas estándar que cubren temas SAP SD (pricing, programación de entregas, goods issue, exclusión de condiciones, sub-ítems BOM, datos de pagador y más)
• Seguimiento de progreso — último puntaje, mejor puntaje e intentos totales guardados vía localStorage
• Test cronometrado — tiempo transcurrido visible durante cada intento
• Toggle de tema — modo claro/oscuro vía hook useTheme

Dos modos de inicio:

Flujo del test

Durante una sesión de test:

• Las preguntas aparecen en orden aleatorio en cada intento (shuffleQuestions)
• La barra de progreso muestra la posición actual (p. ej. 12 / 39)
• Timer en vivo cuenta segundos transcurridos en el header
• Soporte multi-select — preguntas con 2–3 respuestas correctas usan checkboxes con límite máximo de selección; preguntas de una sola respuesta usan radio buttons
• Pistas clue — tras intentos incorrectos, el usuario puede revelar una pista contextual (campo clue por pregunta)
• Revelación de respuesta — opción de mostrar respuesta correcta para modo estudio
• Navegación Anterior / Siguiente entre preguntas
• Diálogo de abandono — confirma antes de regresar al inicio y perder progreso

Pantalla de resultados

Al terminar, TestResults muestra:

• Porcentaje de puntaje actual, tiempo empleado, puntaje anterior y mejor puntaje
• Badge New Best cuando se supera un récord personal
• Desglose por pregunta con indicadores correcto/incorrecto
• Acciones Retake y Go Home

Banco de preguntas

src/data/questions.ts contiene el set completo:

• 39 preguntas estándar — ítems estilo certificación SAP SD con correctAnswers, options y texto clue opcional
• 25 preguntas IA (aiQuestions) — ítems adicionales marcados isAiGenerated: true para el modo desafío

Los temas incluyen categorías de schedule line, configuración automática de pricing, efectos de goods issue, exclusión de condiciones, group conditions, datos maestros de pagador, alcance de estructura BOM y programación precisa de entregas.

Stack tecnológico

Sin backend — todos los datos de preguntas son TypeScript estático; puntajes e historial de intentos persisten en localStorage bajo la clave sap-cert-stats.

Proceso de desarrollo

Build inicial

Scaffold desde la plantilla Lovable/Vite React. Flujo completo del test implementado en un solo día:

• questions.ts — 39 preguntas de certificación SAP SD con clues
• aiQuestions — 25 preguntas de desafío generadas por IA
• Index.tsx — máquina de estados home, testing y results
• QuestionCard — multi/single select, revelación de hint, revelación de respuesta, parsing de Note
• TestResults — resumen de puntaje y revisión pregunta por pregunta
• ProgressBar, ThemeToggle, useLocalStorage, testUtils (shuffle, scoring, formato de tiempo)

Pulido móvil

solved overflow issues on question card mobile view — se corrigió overflow de layout en pantallas pequeñas para que texto largo de preguntas y listas de opciones hagan scroll correctamente en dispositivos móviles.