razamsalem / hangman

My version of creating the beloved game with advanced technologies such as React, Typescript, i18next and Tailwind

Description

Hangman is a classic word game implemented using React with TypeScript and i18n (internationalization) for language support. The game involves guessing a word by suggesting letters within a certain number of attempts. The player wins if they successfully guess the word before running out of attempts or "hangs" if they exceed the maximum allowed incorrect guesses.

About the Project

This Hangman game was built with React, TypeScript, Tailwind CSS, and i18n to provide an interactive and educational gaming experience. The project showcases the use of modern web technologies to create an engaging and user-friendly game.

How I Created This App

Technologies Used

React: A popular JavaScript library for building user interfaces.

TypeScript: A typed superset of JavaScript that adds static types to the language.

Tailwind CSS: A utility-first CSS framework that simplifies styling and ensures a consistent design throughout the application.

i18n: Internationalization library for supporting multiple languages in the application.

Logical Thinking

Building the Hangman game required careful logical thinking to implement key features:

Word Selection Logic: Choosing words randomly from predefined lists based on the selected language (English or Hebrew).

User Input Handling: Implementing logic to handle user input, validate it, and update the game state accordingly.

Game State Management: Managing the game state, including tracking guessed letters, determining wins or losses, and updating the UI accordingly.

Sound Integration: Adding sound effects for various game events, such as winning, losing, and correct letter guesses.

UI/UX Design: Creating an intuitive and visually appealing user interface to enhance the gaming experience.

Getting Started

Online demo: https://razshangman.vercel.app/

To run the Hangman game locally, follow these steps:

Clone the repository. Install dependencies using npm install. Run the app using npm start. Open the app in your browser at http://localhost:5173. Feel free to explore the code, make improvements, or customize it according to your preferences!

Enjoy playing Hangman!

🚀 About Me

I'm a Full-Stack/Frontend developer.

In addition, I'm learning new technologies all the time and implementing them in my projects

Please check my other projects, I promise you will be impressed 😉

Screenshots