Pre-requisites & Tech Stack Used for The Rock Paper Scissors App

Before we dive into building the Rock Paper Scissors app, let’s make sure you have the right tools set up. This module will also introduce you to the technologies we’ll be using in this project.

Basic Requirements

1. Node.js and npm
   • Install Node.js (version 16 or newer). npm comes bundled with Node.js and is used to install packages.
   • You can download it from nodejs.org.
   • Vite, the tool we used to set up our React app, requires a modern Node.js version to run correctly.
2. Code Editor
   • Use a code editor like Visual Studio Code (VSCode). It provides great extensions for React development and a built-in terminal.
3. Web Browser
   • Use a modern browser (such as Chrome, Edge, or Firefox) for testing your app.
4. Git (Optional)
   • If you want to share your project or push it to GitHub for version control, install Git from git-scm.com.
5. Basic Knowledge
   • Make sure you’re comfortable with HTML, CSS, and JavaScript (ES6 features) like import/export, arrow functions, and array methods.
   • Some React-specific concepts like JSX and hooks (especially useState) will be explained as we build.

Tech Stack Used

1. React with Vite
   • React is the JavaScript library used to build the app’s UI.
   • Instead of Create React App, we used Vite for project setup. Vite is faster and comes with an optimized build process.
2. JavaScript (ES6+)
   • All app logic is written in modern JavaScript syntax. Features like arrow functions, array methods (map, Math.random()), and object destructuring are used.
3. HTML and CSS
   • Structure of the app is handled with JSX (HTML-like syntax in React).
   • Styling is managed through inline styles in App.jsx as well as global styles in index.css and App.css.
4. Node.js + npm
   • Node.js runs our development server. npm installs all required libraries.
5. Netlify
   • Once the app is ready, we deploy it on Netlify for free hosting. You can connect your GitHub repo and deploy updates instantly.

Input

The only input in this app comes from user interaction:

• The player clicks on one of three buttons: Rock, Paper, or Scissors.
• Each button uses React’s onClick event to trigger the game logic.
• There are no text boxes or forms. The entire input system is based on mouse clicks.

Output

The outputs are what the app shows on the screen based on player and computer choices:

1. Player’s Choice and Computer’s Choice
   • Displayed dynamically whenever a round is played.
2. Result Message
   • Shows whether it’s a win, loss, or draw.
   • Example: "You Win!", "Computer Wins!", or "It’s a Draw!".
3. Scoreboard
   • Keeps track of the player’s score and the computer’s score, updating after each round.
4. UI Updates
   • Everything updates instantly thanks to React’s state system (useState).
   • No page reloads are needed, the changes are dynamic.