Harbour

Inspiration

Our team's hometown is a small, remote fishing village where fishing makes up a huge part of the local economy. For many families, going out on the water is not just a job, it is a way of life. But it can also be dangerous. Weather can change quickly, crews can be tired, and financial pressure can push people to take risks. We wanted to build something that helps fishers make safer, clearer decisions before leaving shore.

What it does

Harbour is a pre-departure marine safety tool for fishers. Users can choose a departure area, drop or drag a pin on the map, and view live marine conditions for that fishing patch. The app scores weather risk, crew fatigue, and trip economics, then gives a clear go, caution, or no-go recommendation. It also maps safer route options and includes a 24-hour forecast slider to compare how conditions change over time.

How we built it

We built Harbour as a static web app using HTML, CSS, and JavaScript. The map is powered by MapLibre, while live weather and marine data come from Open-Meteo APIs. We created custom scoring logic for wave height, swell, wind, gusts, pressure, fatigue, fuel cost, travel distance, and break-even catch. The interface was styled to feel like a polished marine intelligence dashboard.

Challenges we ran into

One challenge was syncing live map interactions with changing marine data. Dragging a pin, refreshing conditions, and updating the visual route all had to stay connected without breaking the map. We also had to balance safety data with economics and fatigue in a way that felt understandable. Another challenge was making the interface visually strong while keeping it readable and stable.

Accomplishments that we're proud of

We developed a cohesive decision-support tool that integrates multiple risk dimensions into a single, interpretable recommendation. Rather than presenting raw data alone, the system translates marine conditions, crew fatigue, and economic constraints into a structured assessment that can support practical decision-making before departure.

We successfully implemented real-time interaction between geospatial input and live environmental data. Users can dynamically select a fishing location, and the application updates conditions, risk scores, and route suggestions without disrupting the interface. This required consistent synchronization between map rendering, API responses, and scoring logic.

We designed a clear and functional interface that prioritizes readability under complex data conditions. Marine forecasts, risk levels, and economic indicators are presented in a way that reduces cognitive load, which is critical in time-sensitive and high-risk contexts.

We also established a flexible scoring framework that can be extended. The current model incorporates environmental and operational variables, but its structure allows for future inclusion of additional factors such as vessel characteristics or regulatory constraints.

What we learned

We learned how to work with live marine APIs, geocoding, map rendering, route scoring, and risk modeling. This was our first time working with such technologies, and we're extremely proud to have overcome mnay obstacles to obtain a working and useful final product.

What's next for Harbour

We would like to add alerts for dangerous condition changes, offline support for remote areas, more detailed route planning, and real emergency contact workflows. We would also like to test Harbour with fishers and coastal communities so the tool reflects real decisions made on the water.

Built With

• css
• github
• html
• javascript
• maplibre
• open-mateo