Building SapCoach

SapCoach is an interactive SAP certification training app for S/4HANA Sales & Distribution exam prep. It runs as a single-page React app with shuffled multiple-choice questions, optional AI-generated challenge items, timed attempts, clue hints, and persistent score tracking — all stored locally in the browser.

What it does

Home screen

Landing view with test overview and personal statistics:

• 39 standard questions covering SAP SD topics (pricing, delivery scheduling, goods issue, condition exclusion, BOM sub-items, payer data, and more)
• Progress tracking — last score, best score, and total attempts saved via localStorage
• Timed test — elapsed time shown during each attempt
• Theme toggle — light/dark mode via useTheme hook

Two start modes:

Test flow

During a test session:

• Questions appear in random order each attempt (shuffleQuestions)
• Progress bar shows current position (e.g. 12 / 39)
• Live timer counts elapsed seconds in the header
• Multi-select support — questions with 2–3 correct answers use checkboxes with a max-selection limit; single-answer questions use radio buttons
• Clue hints — after wrong attempts, users can reveal a contextual hint (clue field per question)
• Answer reveal — optional show-correct-answer for study mode
• Previous / Next navigation between questions
• Abandon dialog — confirms before returning home and losing progress

Results screen

After finishing, TestResults displays:

• Current score percentage, time taken, previous score, and best score
• New Best badge when a personal record is beaten
• Per-question breakdown with correct/incorrect indicators
• Retake and Go Home actions

Question bank

src/data/questions.ts holds the full question set:

• 39 standard questions — SAP SD certification-style items with correctAnswers, options, and optional clue text
• 25 AI questions (aiQuestions) — additional items marked isAiGenerated: true for the challenge mode

Topics include schedule line categories, automatic pricing setup, goods issue effects, condition exclusion, group conditions, payer master data, BOM structure scope, and precise delivery scheduling.

Tech stack

No backend — all question data is static TypeScript; scores and attempt history persist in localStorage under the key sap-cert-stats.

Development process

Initial build

Scaffolded from the Lovable/Vite React template. Implemented the full test flow:

• questions.ts — 39 SAP SD certification questions with clues
• aiQuestions — 25 AI-generated challenge questions
• Index.tsx — home, testing, and results state machine
• QuestionCard — multi/single select, hint reveal, answer reveal, Note parsing
• TestResults — score summary and question-by-question review
• ProgressBar, ThemeToggle, useLocalStorage, testUtils (shuffle, scoring, time format)

Mobile polish

solved overflow issues on question card mobile view — fixed layout overflow on small screens so long question text and option lists scroll correctly on mobile devices.