🏖️ BADA – Find Safe Beaches in Sweden

BADA helps beachgoers and families in Sweden find safe, EU-classified bathing waters with real-time quality updates.
It replaces outdated or clunky websites with a clean, mobile-friendly experience where you can browse nearby beaches on a map, check water quality, and save your favourites.

Try it out here (deployed on Netlify)

---

✨ Features

• 🗺 Map of all EU-classified beaches in Sweden (MapLibre + OpenStreetMap)
• 📍 Find the nearest beach using your device’s location
• 🔬 View water quality, classification, and recent test results (data from HaV)
• ❤️ Create an account and save favourite beaches to your profile
• 🌗 Dark mode and responsive design (mobile → desktop)
• 🌐 Multi-language support (Swedish / English)
• 🔀 Drag-and-drop sorting for favorites

---

🚀 Tech Stack

Frontend

• React 18 + Vite + TypeScript
• React Router
• Zustand (global state)
• TanStack Query (server state & caching)
• Tailwind CSS
• i18next (translations)
• MapLibre GL (maps)
• Custom React Hooks (geolocation, dark mode, outside click)

Backend

• Node.js + Express
• MongoDB + Mongoose
• JWT Authentication
• Zod (validation)
• In-memory caching for HaV API responses

External APIs

• HaV Bathing Waters API (official Swedish Agency for Marine and Water Management)
• MapTiler (map styles)
• (Planned) OpenWeatherMap for weather and water temperature

---

📸 Screenshots

(Coming soon)

---

🛠 Installation & Setup

Clone the repo and install dependencies:

git clone https://github.com/govargas/bada.git
cd bada

Backend

cd backend
cp .env.example .env.local # then fill in your values
npm install
npm run dev

Backend runs on http://localhost:3000

Frontend

cd frontend
cp .env.example .env.local # then fill in your values
npm install
npm run dev

Frontend runs on http://localhost:5173

---

🔑 Environment Variables

• See .env.example in both backend/ and frontend/.
• Fill in with your own values (MongoDB Atlas, JWT secret, MapTiler key).

---

👤 Test User Credentials

• Use these to try the app without registering:

Email: smoke@test.com

Password: Test1234

This account already has some favourite beaches saved.

---

🌍 Deployment

• Frontend: Deployed on Netlify: https://badaweb.netlify.app/
• Backend: Deployed on Vercel → https://bada-backend.vercel.app/api/health

---

✅ Requirements Checklist

Technical Requirements (Grade G)

• ✅ React frontend
• ✅ Node.js + Express backend
• ✅ MongoDB database
• ✅ Authentication (JWT)
• ✅ React Router navigation
• ✅ Global state management (Zustand)
• ✅ ≥2 external libraries (TanStack Query, MapLibre, react-hook-form, i18next, react-hot-toast, @dnd-kit)
• ✅ Custom React hooks (useGeolocation, useOutsideClose, useDarkMode)
• ✅ Responsive (320px → 1600px+)
• ✅ Accessibility features (ARIA labels, skip navigation, semantic HTML, form labels)
• ✅ Clean Code practices

Visual Requirements

• ✅ Clear structure using box model with consistent margins/paddings
• ✅ Consistent typography across views and breakpoints
• ✅ Cohesive color scheme
• ✅ Mobile-first responsive design
• ✅ Dark mode support
• ✅ Multi-language support (Swedish/English)

Grade VG Enhancements

• ✅ Error Boundaries
• ✅ Toast notifications
• ✅ Reduced motion support
• ✅ Comprehensive documentation
• ✅ Meta tags for SEO

---

🧭 Roadmap

• ✅ Allow notes/tips per beach (e.g. "good for kids") - Planned for future
• Integrate OpenWeatherMap for weather & water temperature
• ✅ Accessibility extras (reduced motion, ARIA live regions) - Implemented
• ✅ Polish with animations and micro-interactions - Toast notifications added
• Filter beaches by classification
• Add user beach photos

---

💡 Inspiration & Credits

• Data from the Swedish Agency for Marine and Water Management (HaV)
• Maps powered by OpenStreetMap + MapTiler
• Built during the Technigo Fullstack JavaScript Bootcamp (2025)

---

👨‍💻 Author

Created by Talo Vargas, 2025