Skip to main content

CodeTyper Use Case: Solutions

This document describes the solutions implemented to address the challenges encountered during the development of the CodeTyper application.

1. Simulating a Real Code Editor​

The solution to this challenge involved a two-part approach:

  • A "Simple" Enter Key: When the user presses Enter, the application adds a newline character and then inserts the same indentation as the previous line. This creates a temporary mismatch between the user's typed text and the target code, which is the key to simulating the behavior of a real editor.
  • A "Smart" Backspace Key: The handleBackspaceKey function was completely overhauled to detect when the user is at the beginning of a line with incorrect indentation. In this situation, the Backspace key deletes an entire block of indentation at once, without counting as an error.

This two-part solution allows the user to correct the indentation of their code without being penalized, which provides a more authentic and intuitive typing experience.

2. Real-time WPM Calculation​

The solution to this challenge was to modify the useEffect hook that calculates the WPM. The typedChars variable was removed from the dependency array, which prevents the timer from being reset on every keystroke. This ensures that the WPM is calculated continuously and displayed in real-time.

3. Handling User-Provided Code​

The solution to this challenge involved the use of the highlight.js library, which is a popular syntax highlighting library that supports a wide variety of programming languages. The application also includes robust error handling to prevent crashes when the user provides malformed or incomplete code.

4. State Management​

The solution to this challenge was to use React's useState and useRef hooks to manage the application's state. The useState hook is used to manage the state that is rendered to the screen, while the useRef hook is used to manage the state that is not rendered to the screen (e.g., the timer).

Conclusion​

The development of the CodeTyper application was a challenging but rewarding experience. The solutions described in this document have resulted in a robust and user-friendly application that provides a realistic and effective way for developers to practice their typing skills.