Introduction

This Project is part of Techincal Interview Task for Sprouts.ai based on Rock, Paper and Scissors Game built using React and TypeScript.

Tech Stack

This Project is bootsrapped using Vite and uses React as a Frontend Library and TypeScript. It also uses TailwindCSS for styling.

Live Demo:

https://rock-paper-scissors-ts.vercel.app/

Installation

Step 1: Clone the Repository

git clone https://github.com/SalmanShahid888/Rock-Paper-Scissors-TS

 

Step 2: Change directory to project folder

cd Rock-Paper-Scissors-TS

 

Step 3: Install Dependencies

npm install

 

Step 4: Run the Project

npm run dev

 

- You would now see a similar output in your terminal

> vite-project@0.0.0 dev
> vite


  VITE v4.4.9  ready in 1923 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

- Navigate to http://localhost:5173/ in your browser to view the project

Development Environment Note:

In Development Environment, Score updates two times adding 2 to score, This is not a bug and can be fixed by removing react strict mode from main.tsx file.

<React.StrictMode>//</React.StrictMode>

 

How to Play:

• Select the Game Mode
• Choose Your Pick Rock Paper Scissors
• If you Win your scores will get updated on Left Side
• If you Lose your scores will get updated on Right Side
• Based on your Game mode your opponent will be either Computer or another Player.

 

---

 

Vite Config Notes:

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list