Sick-0 / mapguess

enigjewo

An open-source remake of GeoGuessr.

---

About

This app is an open-source remake of the famous GeoGuessr game, made with ParcelJS, React, Firebase & Bulma.

This is originally inspired by Geoguess, as a pegagogic project made for BeCode, answering the question "this should be so difficult to made a game like that by ourselves".

Features

• Solo game
• Multiplayer game over the internet
• 25 maps (random positions):
  • 🗺 3 Geographic Areas
  • 🌍 6 Continents
  • 🚩 14 Countries
  • 🌐 3 Misc Challenge Maps
    • 🗿 Unesco (World Heritage List)
    • 🏙 Biggest Cities (40 biggest cities of the world)
    • 🔥 Inferno - two complex cities - Santa Cruz de la Sierra (Bolivia) & Touba (Senegal)

👉 NOTE

This project was originally a pegagogic project made for BeCode.
The project is still maintained, but I can't promess that I will be reactive to fix bugs (the game is, still, stable) or adding new features.

However, feel free to propose stuff by creating a Pull Request.

Deploy your instance

1. Prepare your env vars

1.1 Get your Google Maps API key

• Go to Google Maps Platform
• Click on Get Started
• On first time, a page will open to ask to activate billing

Every month, Google offers ±200$ of credits usage for Google Maps API - its way more than enough for normal usage

• Create Billing Account
• Go to Google Developers Console, then Create a Project
• In the Library menu, search for Maps JavaScript API & activate for the project
• In the Credentials menu, create an API Key

You can (and should) come back later to add key restriction for your own domain only.

• Note the key for later

👉 You can get more detailed information here: https://developers.google.com/maps/gmp-get-started.

1.2 Get your Firebase App keys & vars

• Go to Firebase Console
• Create a new Firebase Project (you can disable Google Analytics)
• In the left menu, select Realtime Database (in the Build section), then create a database.
• In your database, go to Rules section, and replace the content with the following, then Publish.

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

• In the left menu, select Project Overview, then, under the main title, select the "Web" button (with the symbol </>).
• Name and register your app, then note the variables given in the "configuration" part of the script.

2. Deploy

2.1 Deploy the code

Simply click the following button:

Your app will not be ready yet - we need to set all our variables in the netlify admin.

Usually, the netlify process should ask you for the variables - if not, follow the next section.

2.2 Setup our variables

• In Netlify admin page, go to Site Settings, then Build & Deploy, then finally to Environment
• Create every following variable with your own values:
  • GMAP_API_KEY
  • FIREBASE_API_KEY
  • FIREBASE_AUTH_DOMAIN
  • FIREBASE_PROJECT_ID
  • FIREBASE_DATABASE_URL
  • FIREBASE_STORAGE_BUCKET
  • FIREBASE_MESSAGE_SENDER_ID
  • FIREBASE_APP_ID
• Come back to the Deploys page of Netlify then use the Trigger deploy button to deploy with the good values for your variables.

3. Enjoy!

Finally, you can click on the link netlify has generated for you, generally some-weird-wordsAndNumbers.netlify.app and enjoy the game!

Contribute - install locally

If you want to install the game locally for dev or testing, it's fairly easy - you only need NodeJS.

After cloning the repo and creating your env vars as explained before, rename the .env.sample to .env and fill it with your variables.

Now, run the following commands from within your repository:

• npm install
• npm run work

This will run a local server wich will reload at every changes in the code.

---

February 2021, leny
Background photo by Tabea Damm on Unsplash
UI Sounds by Kenney