Skip to content

Latest commit

 

History

History
66 lines (47 loc) · 3.25 KB

README.md

File metadata and controls

66 lines (47 loc) · 3.25 KB
Raw

Rock, Paper, Scissors

Table of contents

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

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