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

SapCoach se scaffoldó con Vite + React y se construyó como app de estudio solo en el cliente — sin servidor, con puntajes guardados en el navegador vía localStorage.

Flujo central del test

• Creación de questions.ts con 39 preguntas de certificación SAP SD, cada una con opciones, respuestas correctas y hints opcionales en clue.
• Adición de aiQuestions — 25 ítems extra de desafío marcados isAiGenerated: true para el modo de 64 preguntas.
• Cableado de Index.tsx como máquina de estados simple: inicio → test activo → resultados.
• Construcción de QuestionCard con modos radio/checkbox, revelación de hint, revelación de respuesta y parseo de referencias Note en el texto de la pregunta.
• Implementación de TestResults para resumen de puntaje, revisión por pregunta y acciones de reintento.
• Helpers agregados: ProgressBar, ThemeToggle, useLocalStorage y testUtils (shuffle, scoring, formato de tiempo) siguiendo patrones de useState de React.

Persistencia y modos

• Almacenamiento de último puntaje, mejor puntaje e intentos bajo la clave sap-cert-stats en localStorage.
• Orden aleatorio de preguntas en cada intento con shuffleQuestions para que las repeticiones sigan siendo útiles para estudiar.
• Dos modos de inicio en la pantalla principal: Test estándar (39 preguntas) y Desafío IA (64 preguntas).
• App envuelta en scaffold de proveedor de TanStack Query para futuros hooks de datos.

Pulido de layout móvil

• Corrección de overflow en QuestionCard para pantallas pequeñas — enunciados largos y listas de opciones ahora hacen scroll dentro de la tarjeta en lugar de recortarse.
• Prueba de targets táctiles y layout del timer en el header en viewports estrechos.
• Mensaje de commit: solved overflow issues on question card mobile view.