Rock, Paper, Scissors

Table of contents

• Rock, Paper, Scissors
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the game depending on their device's screen size
• Play Rock, Paper, Scissors against the computer
• Maintain the state of the score after refreshing the browser (optional)
• Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)
• Play online with friends in real-time, reconnect after disconnecting
• Multiple rooms with each room containing 2 players

Screenshot

Links

• Solution URL: Solution URL here
• Live Site URL: Live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Styled Components - For styles
• Typescript - For type definitions
• Redux Toolkit - For global state management
• Socket.IO - For establishing a low-latency, full-duplex communication channel between a client and a server

What I learned

I've learned many new libraries, tools, and technologies while building this app. I shifted from one methodology to another following the best practices. In the beginning, I used context API for state management & to avoid prop drilling but it wasn't a convenient way at a large scale as more context provider has to be created. So gradually moved on to the redux toolkit library, and learned to configure the store, create reducers, and slice & action creators for each particular reducer. This made debugging easy & more standardized way for state management globally. The styled component is something that I wanted to try hands-on & I implemented all the knowledge I grasped through documentation. The more challenging part was implementing socket.io to add the online multiplayer features to this app, learning how socket emits on one side(client/server) & how listens on the other side(client/server). I always followed the best pattern to make the code base more readable, scalable & reliable. I considered performance optimization to achieve a great user experience.

Continued development

I want to know more about typescript; the advanced concepts as it is among emerging languages and moreover, typescript helps to reduce bugs at the compile time only by performing type checking.

Author

• Frontend Mentor - @iprinceroyy
• Twitter - @prince_popups