Hangman (React + TypeScript + Vanilla CSS)

What are you most proud of, and what would you do differently next time?

Whew - I put a bit of effort into this one! Some of the things I did or paid attention to during the development of Hangman:

1. Added some subtle animations to make the app a little more lively/fun. Nothing major. For example, on the 'How to Play' page, each of the 'How to Play' steps zooms onto the page on load, and on the main game page, when the player loses a life, the life meter animates instead of jumping lives.
2. Added keyboard accessibility: Users are able to completely use their keyboard if they wish, including pressing Esc to open the Pause menu, pressing Enter to start the game, and pressing letter keys to play a letter. I had to use a menu focus package to ensure that, when the user tabs through the pause menu, the tab focus stays on the menu buttons only (rather than going off into the rest of the app behind the menu).
3. Error message when category is out of words: When the current category runs out of words and the player tries to play that category again (i.e. by pressing 'Play Again' or by clicking that category's button), a message appears telling the player that the category is out of words, and to either choose a different category or to refresh the game to start fresh. When the player presses the 'Ok' button, they are taken to the Categories page to choose a new one.
4. Replaced 2 categories: 'Sports' and 'Animals' were just a little too boring for me. I replaced them with 'Difficult Words' (which has words that are notoriously difficult to play in Hangman), and 'Wizarding World' (which is a Harry Potter-themed category that includes names, quotes, and phrases).
5. Close design match: I had access to the Figma design files, and I put them to good use, getting the designs as close as possible across all 3 screen sizes.
6. Word duplication rules: The winning word/phrase doesn't get played again if a) the word/phrase was just played, or b) the player has already won with that word/phrase.
7. Line separations: I utilized a function to ensure that the winning word/phrase fits, no matter the screen size, by splitting the words up under certain conditions.
8. Tests: I added automated tests for all of my components and hooks.
9. CSS Variables: I utilized CSS variables to assist with colors that were used multiple times.

I also did my best to pay attention to best practices, including utilizing 'Separation of Concerns' by separating logic into custom hooks, adhering to 'DRY' and 'Single Responsibility Principle', using barrel imports, organizing my files with a folder structure, and more.

Feel free to check out my code and critique it - I'm always down to hear how I can improve!