Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Hangman Game with React, TypeScript, React Router

Bogdan Kim 780

@semperprimum

Desktop design screenshot for the Hangman game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I initially wanted to use a state manager for this project, but I decided to stick with the built-in features for state management. I ended up using Context API and useReducer. The result looks great, though the logic (context/GameContext.tsx) feel a bit cluttered.

What challenges did you encounter, and how did you overcome them?

The design file included elements with 'corner smoothing,' but CSS doesn't natively support this feature. To achieve the desired effect, I used a library. While it worked well, it has some flaws, such as having overflow: hidden by default, which prevented me from using it on certain elements.

What specific areas of your project would you like help with?

How does my folder structure look? Each /view/ folder contains its own /components/ folder, holding components that are specific to that view and won't be reused elsewhere.

As i mentioned, GameContext.tsx might look a bit cluttered? I can navigate the file without any problems, but that might be because I wrote it :D. Any tips? Or is it okay overall?

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord