Technigo · govargas · Sep 10, 2025 · Sep 10, 2025 · Sep 10, 2025 · Sep 10, 2025
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
+package-lock.json
+!frontend/package-lock.json
diff --git a/README.md b/README.md
@@ -1,13 +1,185 @@
-# Final Project
+# 🏖️ BADA – Find Safe Beaches in Sweden
 
-Replace this readme with your own information about your project.
+![React](https://img.shields.io/badge/Frontend-React-61DAFB?logo=react&logoColor=white)
+![Express](https://img.shields.io/badge/Backend-Express-000000?logo=express&logoColor=white)
+![MongoDB](https://img.shields.io/badge/Database-MongoDB-47A248?logo=mongodb&logoColor=white)
+![TypeScript](https://img.shields.io/badge/Code-TypeScript-3178C6?logo=typescript&logoColor=white)
+![TailwindCSS](https://img.shields.io/badge/UI-Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)
+![MapLibre](https://img.shields.io/badge/Maps-MapLibre-4264FB?logo=openstreetmap&logoColor=white)
+![i18next](https://img.shields.io/badge/Translations-i18next-26A69A?logo=i18next&logoColor=white)
+![TanStack Query](https://img.shields.io/badge/State-TanStack_Query-FF4154?logo=reactquery&logoColor=white)
+![Deployed](https://img.shields.io/badge/Deployed-Vercel-000000?logo=vercel&logoColor=white)
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+**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.
 
-## The problem
+[Try it out here](https://badaweb.netlify.app/) (deployed on Netlify)
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+---
 
-## View it live
+## ✨ Features
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+- 🗺 **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](https://badplatsen.havochvatten.se/) (official Swedish Agency for Marine and Water Management)
+- [MapTiler](https://www.maptiler.com/) (map styles)
+- _(Planned)_ OpenWeatherMap for weather and water temperature
+
+---
+
+## 📸 Screenshots
+
+_(Coming soon)_
+
+---
+
+## 🛠 Installation & Setup
+
+Clone the repo and install dependencies:
+
+```bash
+git clone https://github.com/govargas/bada.git
+cd bada
+
+```
+
+**Backend**
+
+```bash
+cd backend
+cp .env.example .env.local # then fill in your values
+npm install
+npm run dev
+
+```
+
+Backend runs on http://localhost:3000
+
+**Frontend**
+
+```bash
+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: [email protected]
+
+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
diff --git a/backend/.env.example b/backend/.env.example
@@ -0,0 +1,17 @@
+# Server
+PORT=3000
+NODE_ENV=development
+
+# Database
+MONGODB_URI=mongodb+srv://<user>:<password>@<cluster>/<dbname>?retryWrites=true&w=majority
+
+# Auth
+JWT_SECRET=replace-with-a-random-secret
+
+# CORS
+ALLOWED_ORIGIN=http://localhost:5173
+
+# HaV API
+HAV_BASE_URL=https://badplatsen.havochvatten.se/badplatsen/api
+HAV_V2_BASE=https://api.havochvatten.se/bathingwaters/v2
+HAV_USER_AGENT=BADA-App/1.0 (contact: my@email)
diff --git a/backend/README.md b/backend/README.md
diff --git a/backend/dist/index.d.ts b/backend/dist/index.d.ts
@@ -0,0 +1,3 @@
+declare const app: import("express-serve-static-core").Express;
+export default app;
+//# sourceMappingURL=index.d.ts.map
diff --git a/backend/dist/index.d.ts.map b/backend/dist/index.d.ts.map
diff --git a/backend/dist/index.js b/backend/dist/index.js
diff --git a/backend/dist/index.js.map b/backend/dist/index.js.map
diff --git a/backend/dist/lib/cache.d.ts b/backend/dist/lib/cache.d.ts
@@ -0,0 +1,9 @@
+export declare class SimpleCache {
+    private defaultTtlMs;
+    private store;
+    constructor(defaultTtlMs?: number);
+    get<T>(key: string): T | undefined;
+    set<T>(key: string, value: T, ttlMs?: number): void;
+}
+export declare const cache: SimpleCache;
+//# sourceMappingURL=cache.d.ts.map
diff --git a/backend/dist/lib/cache.d.ts.map b/backend/dist/lib/cache.d.ts.map
diff --git a/backend/dist/lib/cache.js b/backend/dist/lib/cache.js
diff --git a/backend/dist/lib/cache.js.map b/backend/dist/lib/cache.js.map
diff --git a/backend/dist/lib/db.d.ts b/backend/dist/lib/db.d.ts
@@ -0,0 +1,3 @@
+import mongoose from "mongoose";
+export declare function connectDB(): Promise<typeof mongoose>;
+//# sourceMappingURL=db.d.ts.map
diff --git a/backend/dist/lib/db.d.ts.map b/backend/dist/lib/db.d.ts.map