Now that I've finished the General Assembly Software Engineering bootcamp, I want to maintain momentum and apply all the things I learned. So I'm starting a rebuild series of my projects from the bootcamp.
Why rebuild instead of refactor? I'm rebuilding as a learning exercise, and especially for the earlier projects because I hadn't learned the frameworks that I plan to use. Then, after each build, I will reflect on the original and rebuild tech stacks. Was the rebuild overkill? Did the framework make it easier to add and maintain features?
For this first rebuild, I'm tackling MasterMind.
MasterMind
This was my first project at the bootcamp. It was the culmination of learning HTML, CSS, and JavaScript. The game itself is a Wordle-style deduction game based on the board game Mastermind. In my version, I changed the number of guesses from 10 to 5. Otherwise, the game is largely the same. The game randomly generates a sequence of four colors out of a possible six with no repeats. The user attempts to guess the sequence in five tries. After each guess, the user is told the number of colors that are in the correct position, and the number of colors that are in the sequence but the wrong position.
The Original Code
GitHub Repo: MasterMind
The game was simply three files: index.html, script.js, and style.css.
The Rebuild Plan
For these rebuilds, I'll be focused on using React instead of vanilla JavaScript, with particular attention to how state management and board generation are different.
One thing I know I want to change first is that I hard-coded the board into the HTML. Instead, I want to dynamically create the board in JSX. I'll also split the board into multiple components:
- Header
- Rows
- GuessRow
- FeedbackRow
- Color keyboard
- Buttons
Lastly, I plan to use Tailwind CSS to style the board. I'm still deciding if I like Tailwind CSS over using CSS modules. So for the styling element, I want to see how readable my code is with Tailwind and how the development goes when I'm styling the components separately.
Questions I Hope to Answer
- Did React add any improvements to the development process and/or user experience?
- Did Tailwind allow me to more easily achieve the style I planned, and how did it affect the readability of the code?
- How does component-based architecture affect code maintainability compared to vanilla JavaScript?
What's Next
I'll be documenting the rebuild process and sharing what I learn along the way. Follow along on here or on LinkedIn if you want to see how it goes, and feel free to drop suggestions or your own experiences with rebuilding projects.
Top comments (0)