WH-A-M!

A simple whack-a-mole game made using React and React Native based on Ania Kubow's tutorial.

This here is was the link to the tutorial video.

While I mainly did this tutorial because of "whack-a-mole", it was also a good opportunity to learn about React Redux and React Native. Honestly, I still cannot properly wrap my head around Redux, and this app would have been a lot easier without it.

Usage

• : This version is available at mtc-20.github.io/Whack-a-Mole_react/!
• : The old version is available as APK in Releases

Development

Prerequisites

If you already have some version of node installed, I would recommend using a Node version Manager to manage multiple versions of node. With nvm, you can easily switch between different versions:

Tip

Here are some sources depending on your OS and shell

• nvim
• nvm.fish
• nvm-windows

 nvm install 18 --lts

Note

For Android builds, you will need an Expo account

Setup

1. Clone this repo

git clone https://github.com/mtc-20/Whack-a-Mole_react.git
cd Whack-a-Mole_react

2. Install dependencies

# Ensure you're using Node v18
npm install

3. Quick start (build for all platforms, live reload)

npm run start

This should open a page in your browser.

• To test live on Android, install the expo app, and from the app, scan the QR code on the terminal

  [!NOTE] If it says network error on your android device, select Tunnel Connection from the left menu tab, and rescan the newly generated QR code

• To test directly on your web browser, select Run in web browser from the left menu tab

• Alternatively, it is possible to run them on "virtual" android or iOS (MacOS is required for testing on simulated iOS) devices, but I have not tried them yet. Please follow the tutorial for this approach

Tip

If you only want the web app, then

  npm run web

Resources

• Whack sound effect: Pixabay