🏖️ TrivaBeach

Find the nearest beaches with warm water (26°C+) and book your stay!

🌐 Live Demo: https://trivabeach.gazzar.de

Overview

TrivaBeach is a single-page web application that helps users find the nearest beaches with warm water temperatures (26°C+) anywhere in the world, along with nearby hotel options powered by the Trivago MCP Server.

Features

• 🌡️ Water Temperature Filter - Only shows beaches with 26°C+ water
• 🗺️ Interactive Map - Leaflet.js with OpenStreetMap tiles
• 🏨 Hotel Search - Real hotel prices via Trivago MCP
• 📍 Geolocation - One-click location detection
• 🌍 Global Search - Searches tropical destinations worldwide

Tech Stack

Frontend

• Framework: Astro.js (Static Site Generator)
• Styling: Tailwind CSS + DaisyUI
• Icons: Phosphor Icons
• Maps: Leaflet.js

Backend

• Runtime: Node.js
• Framework: Express.js
• MCP Client: @modelcontextprotocol/sdk
• Process Manager: PM2
• Reverse Proxy: Caddy (auto HTTPS)

APIs Used (All Free!)

API	Purpose
Browser Geolocation	User's current location
Overpass API	Find beaches from OpenStreetMap
Open-Meteo Marine API	Sea water temperature
Trivago MCP	Hotel search & pricing

Project Structure

trivaBeach/
├── beach-finder/           # Frontend (Astro.js)
│   ├── src/
│   │   ├── layouts/
│   │   ├── pages/
│   │   └── components/
│   ├── public/
│   └── package.json
│
└── beach-finder-api/       # Backend (Node.js)
    ├── server.js           # Express + MCP proxy
    ├── ecosystem.config.cjs # PM2 config
    ├── Caddyfile           # Reverse proxy config
    └── package.json

Getting Started

Frontend Development

cd beach-finder
npm install
npm run dev

Open http://localhost:4321

Backend Development

cd beach-finder-api
npm install
npm run dev

API runs on http://localhost:3000

Deployment

Frontend (Static Hosting)

cd beach-finder
npm run build
# Upload dist/ folder to any static host

Backend (Node.js Server)

cd beach-finder-api
npm install
pm2 start ecosystem.config.cjs

Environment

• Frontend: Hosted on all-inkl.com with Let's Encrypt SSL
• Backend: Hosted on Oracle Cloud (AMD 2) with Caddy reverse proxy

License

MIT

Credits

• Hotel data powered by Trivago MCP Server
• Beach data from OpenStreetMap
• Weather data from Open-Meteo