Balloon Over-Water Tracker

A responsive web app that displays balloon positions with land/ocean backgrounds using live API data.

---

Table of Contents

1. Description
2. Tech Stack
3. How to Roll Your Own
4. Contributing

---

Description

Balloon Tracker is a React-based frontend served by a lightweight Express backend proxy.
It fetches balloon position data from the Windborne Systems API and checks location context (land or water) using the Is On Water API.

Each balloon card displays latitude, longitude, and altitude along with a background image indicating whether the balloon is currently above land or water.
The UI is responsive and adapts to different viewport sizes.

Note

This project relies on the Windborne API (https://a.windbornesystems.com/treasure/00.json) as a source of balloon latitude, longitude, and altitude data.

Important: The Windborne API is not guaranteed to be persistent. If the API becomes unavailable, the app may not display balloon data correctly. For long-term use or development, consider storing a local copy of the balloon data JSON or mocking the API responses.

---

Tech Stack

• Frontend

  • Vite – lightning-fast build tool
  • React – component-based UI library
  • Bootstrap – layout and component styling
  • Custom CSS for responsive grid and overlay text

• Backend

  • Express.js – simple proxy server for API requests

• Languages

  • JavaScript (ES6+)
  • HTML5
  • CSS3

---

How to Roll Your Own

Prerequisites

• Node.js (>= 16.x recommended)

Setup Instructions

1. Fork this repository to your own GitHub account.

2. Clone your fork locally:

   git clone https://github.com/your-username/balloon-tracker.git
   cd balloon-tracker

3. Install dependencies

   npm install

4. Set up .env

   Create a .env file in the root directory, and enter VITE_API_BASE="" & TREASURE_BASE_URL=https://a.windbornesystems.com/treasure into this file.

5. Run the proxy and front-end dev environments

   npm start # proxy

   &

   npm run dev # React

6. Happy balloon tracking!

Contributing

Pull requests are welcome. For major changes, please open an issue first.