Win Modal for our Pair Up Game

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!


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!




I love seafood, exploring new cities, board games and learning to love to code.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Agile Software Development

My first steps building static web pages with Free Code Camp

Hello, Front-End as a Service

Becoming Friends With Github: A Guide To Git

Kafka-s3 Sink in < 3 mins

Microservices: From Hype to Practice

6 Tips To Write Better Software Documentation


The Gorilla Guide to Kubernetes in the Enterprise — Chapter 3: Deploying Kubernetes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sara Khandaker

Sara Khandaker

I love seafood, exploring new cities, board games and learning to love to code.

More from Medium

ACOS: Build web games using serverless code, persistent JSON state, and any JS browser framework

Anchor tag magic

Using Lerna for mono repos

The Dangers and Differences of JavaScript .innerHTML, .innerText, and .textContent