Time Race React Exercise

🚀 A fast-paced timer app built with React that challenges you to stop the clock at precise target times. (Udemy React Exercise)

Features

Multiple Difficulty Levels: Choose from easy, medium, or hard challenges Precision Timing: Test your reflexes by stopping the timer at exact target times

Technologies Used

• React
• React Hooks (useState, useRef, useImperativeHandle, forwardRef)
• React Dom (createPortal)
• CSS Modules for styling

Installation

1. Clone the repository:

git clone https://github.com/Markus-cod/time-race-react-exercise.git

2. Navigate to the project directory:

cd time-race-react-exercise

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

5. Open your browser to:

http://localhost:5173

How to Play

1. Select your difficulty level:
   • Easy: 1.000s target (±0.100s tolerance)
   • Medium: 2.000s target (±0.075s tolerance)
   • Hard: 5.000s target (±0.050s tolerance)
2. Click "Start" to begin the timer
3. Click "Stop" when you believe the timer matches the target time
4. See your results:
   • Perfect stop! (within 10ms)
   • Good stop (within tolerance)
   • Missed the target
5. Try to improve your best time and accuracy!

Project Structure

/src
  /components
    Player.jsx
    ResultModal.jsx
    TimerChallenge.jsx
  App.js
  index.css

Available Scripts

• npm run dev: Runs the app in development mode
• npm run build: Builds the app for production

Future Improvements

• Add leaderboard functionality
• Implement vibration feedback on mobile
• Add more challenge modes (random targets, sequence challenges)
• Save best scores to localStorage

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you'd like to change.

License

MIT

Test your timing skills and see how precise you can be! ⏱️🎯