data/js-template/12/meta.yaml

metadata:
  scenario_id: 12
  scenario_name: vanilla_to_react
  category: solution_migration
  repository: piano_native_js
evaluation_steps:
  completeness:
    - Verify the application contains a button container with "Notes" and "Letters" buttons.
    - Verify the application renders piano keys for both natural and sharp notes.
    - Verify clicking on a piano key plays the correct sound and highlights the key.
    - Verify releasing the mouse button or moving the cursor out of the key stops the sound and removes the highlight.
    - Verify pressing and releasing keyboard keys play and stop the corresponding piano notes.
    - Verify clicking the "Notes" button displays note names on the keys.
    - Verify clicking the "Letters" button displays letter names on the keys.
    - Verify the fullscreen button toggles fullscreen mode for the application.
    - Verify the application correctly handles simultaneous multiple key presses.
  accuracy:
    - Ensure the application does not contain unused imports or code.
    - Ensure the codebase is structured and follows React best practices (state, hooks, effects).
    - Ensure the application is free of memory leaks and unnecessary re-renders.
    - Ensure the application is compatible with the latest version of React and TypeScript.
    - Verify the application works correctly across modern browsers.
    - Ensure the application is free of console errors and warnings.
    - Verify that the new React app initializes successfully without errors.
    - Verify that the codebase does not contain any TODOs.
    - Ensure the application has the same DOM tree structure and classes as in the original application.
    - Verify the application UI matches the original HTML structure visually.
    - Verify the application handles rapid sequential key presses without audio overlap issues.