Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

The Hangman Game | Next.js, React, Typescript, Tailwind CSS

next, react, typescript, tailwind-css
DJ Neill•130
@djneill
A solution to the Hangman game challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

Setting a character limit based on the screen size and hyphenating words that are too long to fit within the container. It took a bit of research and some trial and error to achieve a look that was consistent with the Figma file.

Next time I would look into resizing the placeholders for longer words so they can remain on one line.

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

Breaking the gameboard page down into separate components and hooks. Initially, I built the gameboard with all the logic in one file. By the time I finished, it was around 400 lines of code and I could see that it would be difficult to maintain and make changes in the future.

This proved to be a much better architecture when I received user feedback to add an option to go to the next word after completing a game. I was able to easily modify the modal that pops up when the user completes the game.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on DJ Neill's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License