Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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)

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Deployment

My process

Like always, I tried breaking everything down to components from the mockups. Started with the header down to the triangle of choices then moved onto the next page. Finished the mobile version first and made sure all styling was correct. I then moved on to the tablet/desktop and refactored any code at the end.

Built with

• React - JS library
• FramerMotion - For Animations
• TailwindCSS - For styles
• Flexbox
• Mobile-first workflow

What I learned

This was my first TypeScript project, and I faced numerous challenges while trying to assign accurate types to my functions and props. Over time, however, understanding TypeScript and its usage became much easier. One question that frequently crossed my mind during this project was, "Should I create a single interface for all props/functions in the parent component and pass it down? Or is it more effective to develop separate interfaces for each child component?" The answer largely depended on the project's structure and a range of other factors.

I also learned the value of refactoring code after its completion, rather than before. I found myself spending a considerable amount of time reworking my refactored code midway through the project.

Adding linear gradient colors to borders was also weird due to tailwind.

TLDR:

• Learned how to use interfaces properly (hopefully lol)
• Using typescript with useStates
• Refactor code after you finish not before
• Seperate interfaces into a seperate file to keep code clean
• Learned a bit about framer motion, enhancing user experience

Continued development

• Implement Lizard and Spock options
• Was also thinking about adding a form of currency so you can bet if you win.
• Since there's betting maybe add something the user can buy
• Auth to save money progress

Connect with me!

• Website - Tommy Nguyen
• Frontend Mentor - @TommieeN
• LinkedIn - Tommy Nguyen