Where's That Ah?

Where's That Ah? is a game inspired by GeoGuessr that tests and improves your geographical knowledge of places around Singapore. I built this front-end web app as Project 1 for the Rocket Academy Coding Bootcamp.

Try it out here!

Usage

1. Customise game settings: Choose which type of places and how many places you'd like to guess.
2. Start the game: Click on the "Start" button.
3. Guess the location: You'll see a place name. Drop a pin on the Singapore map where you think the place is located.
4. Submit your guess: Click on the "Guess" button to confirm your pin location.
5. See your score: The closer your pin to the actual location, the higher your score. You'll see your total score after 5 rounds.

Technologies Used

• HTML, CSS and React with Create React App
• MapLibre GL JS for interactive map
• MapTiler Cloud for map tiles
• Mantine UI for UI components
• Turf for distance calculation

Data Sources

Contains information from Amendment to Master Plan 2019 Rail Station layer accessed on 20 August 2023 from Urban Redevelopment Authority (URA) which is made available under the terms of the Singapore Open Data Licence version 1.0.

Running the App

To run the app on your local machine:

1. Clone the repo:

   git clone https://github.com/chengwaikoo/wheres-that.git

2. Add your API key: To access the MapTiler Cloud API, open src/components/Map.js and find this line:

   style: `https://api.maptiler.com/maps/363b3c4e-0ad0-4a51-b858-c019423b9d2c/style.json?key=${process.env.REACT_APP_MAPTILER_KEY}`,

   Replace ${process.env.REACT_APP_MAPTILER_KEY} with your own API key. Alternatively, create a .env.local file in the project directory, and define REACT_APP_MAPTILER_KEY as an environment variable there.

3. Install dependencies: Run npm install from the project directory.

4. Start the app: Run npm start from the project directory. The app opens in your web browser, and is accessible at http://localhost:3000.