Where is My Balloon

Where is My Balloon was initially created in two weeks as a final project for Full-Stack Web Development Diploma with Concordia Bootcamps.

This project was borne of the question of what happens to those escaped party balloons that disappear off into the horizon. "Where is My Balloon?" leverages real-time wind data to allow users to launch a hot-air-balloon and travel the world according to natures whims.

Demo

https://youtu.be/-sSS4GtjhEM

Screenshots

---

Installing

Prerequisites:

Before you begin, ensure you have you have installed the latest version of Node.js and Yarn.

Note that a firebase RealTime Database will need to be set up and various API keys will be required for full functionality.

Open up your favourite code editor (such as Visual Studio Code) and git clone the repository.
Change directory to the project folder and open the terminal there.
In the terminal enter $yarn full-install. Concurrently will be installed, then this dependancy will install all the necessary dependancies for both the Server and the React app. (for your convenience!)
Head to Firebase and create a Real Time Database!
- https://firebase.google.com/products/realtime-database
Once firebase database is created, Create App to get the Firebase SDK Snippet.
Create a .env file in the client folder containing the following information & keys:
- Firebase information: (Once a Firebase Realtime database is created, this info can be found in the Firebase Console sidebar under "Project Settings" {look for the cog!} )
- Located under the heading "Firebase SDK Snippet" Simply copy over the matching values.
  - REACT_APP_FB_DATABASEURL=
  - REACT_APP_FB_APIKEY=
  - REACT_APP_FB_AUTHDOMAIN=
  - REACT_APP_FB_PROJECTID=
  - REACT_APP_FB_STORAGEBUCKET=
  - REACT_APP_FB_MESSAGINSENDERID=
  - REACT_APP_FB_APPID=
- IP address:
  - REACT_APP_FB_IP=
    - If you were hosting the backend, you would put the URL for that location here. For local running however, you will want http://localhost:8000/ as it is the default port for the server when not hosted.
- API keys: You will need to obtain your own key for this service
  - REACT_APP_THUNDERFOREST_MAPTILES_KEY=
    - Provides map tiles (Optional: defaults to OpenStreetMap tiles)
    - https://www.thunderforest.com/docs/apikeys/
Create a .env file in the server folder containing the following information & keys:
- Firebase information: (Once a Firebase Realtime database is created, this info can be found in the Firebase Console sidebar under "Project Settings" {look for the cog!} )
- Navigate to the "Service Accounts" tab and you should see a button down the bottom labelled "Generate New Key". Press this and a .JSON file will be downloaded to your computer. Open this .JSON file and copy over the matching information and keys (excepting FB_DATABASE_URL).
  - FB_DATABASE_URL=
    - This entry is not included in the .JSON file, however it's value is the same as the "REACT_APP_FB_DATABASEURL" entry in the client .env file and can be copied from there or the same source.
  - FIREBASE_PROJECT_ID=
  - FIREBASE_PRIVATE_KEY_ID=
  - FIREBASE_PRIVATE_KEY=
  - FIREBASE_CLIENT_ID=
  - FIREBASE_CLIENT_EMAIL=
  - FIREBASE_CLIENT_CERT=
- API keys: You will need to obtain your own keys for these services.
  - DARKSKY_API_KEY=
    - Provides wind, weather and sunrise/set data. (Required)
    - (Darksky no longer accepts new signups, can use alternative: "Openweather One Call API" ) https://openweathermap.org/api/one-call-api
  - AZURE_COGNITIVE_KEY=
    - Provides nearby location images (Optional: defaults to built in icons (error message will show on absence))
    - https://docs.microsoft.com/en-us/azure/cognitive-services/
In the terminal enter $yarn full-start. Concurrently will start both the Server and the React app (which will open automatically in the browser).
Sign In using Google or Guest button. Then launch your balloon!

Technologies

Technologies utilized in this project include:

Front End:

React, Redux, JavaScript, Styled Components

Back End:

Express.js, Node, Firebase Real-Time Database

Utilizing:

Mapping was accomplished using Leaflet and Leaflet-React along with OpenStreetMaps.
Weather and Wind data is retrieved using the Darksky API.
Nearby images are gathered via Bing Image Search API. Tracking of closest city to balloon is achieved via the Overpass API.

FEATURES

Main:

Players can launch their balloon to ride the real-world wind according to their location. Balloon can also be anchored at anytime to stop movement.
Elevation can be changed which will affect speed (higher=faster). At lowest elevation option is presented for balloon to be anchored.
Optional limited steering (changes direction by +-45 degrees) is available by deploying a sail.
Users balloon positions are persistant.
- Also if left unanchored by user, their balloon will also continue to fly for up to an hour after app closure.
Users can chat with other balloons, however this is proximity-gated to a radius around their balloons. (For now, this allowable range-radius is set to global)
Users can also choose the render-radius of other users balloons on their map.
- Ranges are Local (chat range), Abroad, and Global (all)
- Other user balloons will only be rendered if they have been active in the last half-hour.

Displays:

The dynamic Background was created from scratch using styled components. It changes to represent both the time-of-day and weather conditions local to your balloon.
Up to date weather conditions at balloon location are displayed and kept up to date as it travels.
Nearest city and it's distance to balloon is displayed and kept up to date as it travels.
- Additionally: Nearest city images are also found and displayed.
Users can customise their balloon icon, which will be persistant to their profile and visible to other users.
Optional Lens effect over map for that authentic viewing port look.

Key learnings and Goals

While progress was solid during this 2-week build, there were certainly points where I expanded my knowledge:

Manipulating normally static mapping frameworks into an interactive gameplay element.
Leveraging Firebase Real-Time Database, with no prior experience.
Troubleshooting proximity gated chat functionality.

There are many additional features I would like to eventually add to this game to both increase gameplay, quality of life and performance. While the list is expansive here are some shorter term goals:

Add items to collect from locations across the globe.
Increase sign-in options. Expand to Facebook etc logins as well as app only credentials.
Add option to disable dynamic background, also off by default for animation reducing global user settings. Saving resources for low performance platforms and increasing accessibility for motion vunerable persons.
Increase responsiveness, tailor a better user experience on mobile.

Contact

If you want to contact me you can reach me at craigwnockels@gmail.com.

magic-space/--Montgolfiere--