Guess the Word Game 🎮

A fun and interactive word-guessing game built with React, TypeScript, and Vite. Test your knowledge by guessing letters to reveal hidden words, with helpful tips and difficulty levels to keep things challenging!

🚀 Features

• Word Guessing Mechanics: Guess one letter at a time to reveal the hidden word.
• Tips and Difficulty Levels: Each word comes with a tip and a difficulty rating (Easy, Medium, Hard) to guide your guesses.
• Attempt Tracking: Limited attempts based on word length – use them wisely!
• Visual Feedback: Correct letters are highlighted in green, wrong ones in red.
• Restart Functionality: Easily restart the game anytime.
• Responsive Design: Play on desktop or mobile with a clean, modern UI.
• Extensible Word List: Over 70 words related to tech, programming, and more in the words database.

🎯 How to Play

1. Start the Game: The app randomly selects a word from the database.
2. Read the Tip: Use the provided tip and difficulty level to get hints.
3. Guess Letters: Enter one letter at a time in the input field and confirm.
4. Track Progress: See your used letters below – correct ones reveal parts of the word.
5. Win or Lose: Guess the full word before running out of attempts, or it's game over!
6. Restart: Click the restart button to start a new game.

🛠️ Technologies Used

• Frontend: React 19.1.1 with TypeScript
• Build Tool: Vite 7.1.7
• Styling: CSS Modules and Global CSS with custom properties
• Icons & Assets: SVG icons and PNG logo
• Font: Noto Sans from Google Fonts

📦 Installation & Running

1. Clone the Repository:

   git clone https://github.com/GabrielRochaFC/programming-guess-game.git
   cd programming-guess-game

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm run dev

   Open http://localhost:5173 in your browser.

4. Build for Production:

   npm run build
   npm run preview

📁 Project Structure

programming-guess-game/
├── public/
├── src/
│   ├── assets/          # Images and icons (e.g., logo.png, tip.svg)
│   ├── components/      # Reusable UI components
│   │   ├── Difficulty/
│   │   ├── Guess/
│   │   ├── Header/
│   │   ├── Letter/
│   │   ├── LettersUsed/
│   │   └── Tip/
│   ├── utils/
│   │   └── words.ts     # Word database with challenges
│   ├── App.tsx          # Main app component
│   ├── global.css       # Global styles and CSS variables
│   └── main.tsx         # Entry point
├── package.json
├── tsconfig.json
└── vite.config.ts

🤝 Contributing

Contributions are welcome! Feel free to:

• Add more words to the words.ts file.
• Improve UI/UX or add new features.
• Fix bugs or enhance performance.

1. Fork the repo.
2. Create a feature branch: git checkout -b feature/new-feature.
3. Commit changes: git commit -m 'Add new feature'.
4. Push to the branch: git push origin feature/new-feature.
5. Open a Pull Request.

📄 License

This project is licensed under the MIT License. See LICENSE for details.

---

This project was developed with the help of Rocketseat's online courses.

Made with ❤️ using React and TypeScript. Have fun guessing! 🚀 README.md