WordWizard

• 

• 

  Guess words in light mode

• 

  Guess words in Dark mode

• 

  Modal showing you win yaaay

Inspiration: I created WordWizard out of my love for word games and puzzles. Growing up, I enjoyed playing Scrabble and solving crossword puzzles with my family, which sparked my fascination with words and language. Recently, I was captivated by the viral success of the game Wordle, which reignited my passion for creating word-based challenges. Seeing how Wordle brought people together, sparking conversations and friendly competition, inspired me to build my own game. I wanted to create a unique version that combined the excitement of daily word puzzles with my personal touch, aiming to offer an engaging and educational experience for all ages.

What I Learned: Building WordWizard was a fantastic learning experience. I improved my skills in React, particularly with hooks and state management. I also learned how to implement dynamic theming using CSS, handle API integrations, and manage complex game logic.

How I Built the Project: I started with setting up a React project using Vite for its fast development environment. The core game logic was handled in a custom hook, useWordle, which managed state and formatted guesses. Key components like Navbar, Wordle, Grid, Keypad, and Modal were created to build the game's interface. Styling was done with CSS, ensuring support for both light and dark modes. Thorough testing and refinement ensured a smooth user experience.

Challenges Faced: One of the main challenges was managing the state for guesses and game results. Implementing a seamless theme switcher and handling API data gracefully were also tricky. Additionally, adding animations for a better user experience required careful attention to detail.

Conclusion: WordWizard is a blend of my passion for word games and my desire to create something enjoyable and educational. It was a rewarding project that allowed me to grow as a developer, and I hope players find it as fun and engaging as I do.

Built With

• css3
• json-server
• react