PairUp!
Wow, I’ve been busy lately! I should have written this blog post about two weeks ago but I've been very deep into my final project. But you will have to wait to hear about that. So let's talk about my last project … Better late than never! Two weeks ago we finished our Module 4 group project at my Software Engineering Bootcamp at Flatiron School. This time it was a React application.
We were tasked, in my group of three, to create a matching pairs memory game that we called PairUp!. I was so excited about this task right from the beginning. I was eager to work on a game since this is something I was meaning to work on and include in my portfolio. Up until now most of my projects dealt with large amounts of data and data handling. And though that is the type of work that makes me the happiest I knew there as a lot to be learned in creating a game. And I was right!
Game Logic
Working on a game was very different from my last projects. There wasn't a lot of data manipulation and handling besides user data and high scores/ leaderboards. The majority of the effort went into the game logic.
The game logic included things such as, how does a user interact with the game and deciding where those interactions will lead. If they click this, this happens. If they click this THEN this, then another thing happens. Mapping out the user interactions and defining the win and the loss and the scoring was our focus. Additionally, we had the games timed so working with timers and time data was an extra challenge.
To test the “win” path and see the game working, I ended up actually playing the game. I played it over and over and over again, testing out everything with each new change. I certainly will consider writing a script for this next time. However, in the end, I got pretty good at the game….
UI and CSS
For this project, I had the opportunity to work on CSS and the UI for the app. Since a game is all about user interaction, this was important. This was also completely new to me and I found I enjoyed it. From picking an attractive color scheme to designing where each component would go and look was all a lot of fun. My personal favorite was creating the win and lose modals (pictured above). I even managed to add sounds and have them play during the game with an option to turn them off. I used Bootstrap as the CSS framework and it was surprisingly easy to pick up!
And now that I have experience with CSS and styling I can truly say I’m a full-stack software developer. Yay for more tools in the toolbox!
Conclusion
In the end, I was super duper proud of the result! Our team worked very well together and the resulting application met all our goals and then some. This was my second time creating an application as a group and things were a lot more efficient this time. The git workflow was much more familiar and almost second nature now. Additionally, React, with its separate components, made separating out work tasks very intuitive. I've been really enjoying React and excited to learn more!