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

SapCoach was scaffolded with Vite + React and built as a client-only study app — no server, with scores saved in the browser via localStorage.

Core test flow

• Created questions.ts with 39 SAP SD certification questions, each with options, correct answers, and optional clue hints.
• Added aiQuestions — 25 extra challenge items flagged isAiGenerated: true for the 64-question mode.
• Wired Index.tsx as a simple state machine: home → active test → results.
• Built QuestionCard with radio/checkbox modes, hint reveal, answer reveal, and parsing for SAP Note references in question text.
• Implemented TestResults for score summary, per-question review, and retake actions.
• Added helpers: ProgressBar, ThemeToggle, useLocalStorage, and testUtils (shuffle, scoring, time formatting) following React useState patterns.

Persistence and modes

• Stored last score, best score, and attempt count under the sap-cert-stats key in localStorage.
• Shuffled question order on each attempt with shuffleQuestions so repeat runs stay useful for study.
• Exposed two start modes on the home screen: Standard Test (39 questions) and AI Challenge (64 questions).
• Wrapped the app in TanStack Query provider scaffold for future data hooks.

Mobile layout polish

• Fixed overflow on QuestionCard for small screens — long stems and option lists now scroll inside the card instead of clipping.
• Tested touch targets and header timer layout on narrow viewports.
• Commit message: solved overflow issues on question card mobile view.