Bagni Plage

Bagni Plage est une application full stack de réservation de services de plage. Elle permet à un client de choisir un site, réserver un parasol sur un plan visuel, ajouter du mobilier, simuler un paiement, télécharger une facture PDF et retrouver un QR Pass depuis son espace personnel.

L'application propose deux expériences distinctes :

• un front office public et client pour découvrir les plages, préparer sa journée et gérer ses réservations ;
• un espace concessionnaire dédié à la gestion des réservations, du planning, des clients et des arrivées sur site.

Aperçu Fonctionnel

• Accueil public avec présentation du service, plages, offres et guide local.
• Catalogue multi-sites : Bagni Plage Méditerranée, Bagni Pinède et Bagni Roussillon.
• Fiches plages avec localisation, ambiance, saison, disponibilités et lien vers les adresses autour du site.
• Guide local filtrable par plage : restaurants, parkings, marchés, promenades, activités et points de vue.
• Offres Bagni Pass pour présenter des formules journée, week-end, famille, saison ou premium.
• Authentification JWT avec rôles client et concessionnaire.
• Tunnel de réservation en quatre étapes : dates, parasol, équipement, paiement.
• Plan visuel des parasols avec files, numéros, tarifs et statut d'occupation.
• Tarification backend avec supplément selon le mobilier choisi.
• Paiement sandbox pour valider le parcours sans paiement réel.
• Facture PDF générée côté backend après validation du paiement.
• QR Pass généré en SVG et associé à la réservation.
• Espace client : réservations, factures, Bagni Pass et page "Ma journée".
• Espace concessionnaire : dashboard, planning, réservations, clients, validation/refus et check-in par code Bagni Pass.
• Interface responsive avec mode clair chaud et mode sombre.

Stack Technique

Couche	Technologies
Backend	Java 21, Spring Boot 3.4.5, Maven
API	REST, Spring Security, JWT, SpringDoc OpenAPI
Données	PostgreSQL, Spring Data JPA, Flyway
Frontend	Angular 19, TypeScript strict, Angular Material, Signals
Tests	JUnit 5, Mockito, Vitest, Playwright
Infra	Docker Compose, Nginx, GitHub Actions

Architecture

frontend Angular
  |
  | /api
  v
backend Spring Boot
  |
  v
PostgreSQL

Le frontend appelle l'API via des routes relatives /api. Cette approche permet de fonctionner aussi bien en Docker avec le proxy Nginx qu'en développement local avec le proxy Angular.

Lancement Avec Docker

Créer un fichier .env à la racine du projet, ou partir de .env.example :

POSTGRES_DB=bagni_plage
POSTGRES_USER=bagni
POSTGRES_PASSWORD=change_me
JWT_SECRET=replace_with_a_long_random_secret_of_at_least_32_chars
CORS_ORIGINS=http://localhost:4200,http://127.0.0.1:4200

Puis lancer l'application :

docker compose up --build

Services disponibles :

• Frontend : http://localhost:4200
• Backend : http://localhost:8080
• Swagger UI : http://localhost:8080/swagger-ui.html

Lancement Local

Backend :

cd backend
./mvnw spring-boot:run

Frontend :

cd frontend
npm ci
npm start

Le serveur Angular utilise frontend/proxy.conf.json pour rediriger les appels /api vers le backend local.

Comptes De Démonstration

Un compte concessionnaire est créé par les migrations pour l'environnement local :

Email: admin@bagni-plage.it
Mot de passe: Admin1234!

Les comptes clients peuvent être créés directement depuis l'interface publique.

Parcours De Démo

1. Ouvrir l'accueil et consulter les plages disponibles.
2. Explorer le guide local autour d'une plage.
3. Créer un compte client ou se connecter.
4. Lancer une nouvelle réservation.
5. Choisir les dates, le parasol et le mobilier.
6. Simuler le paiement.
7. Retrouver la facture PDF et le QR Pass dans l'espace client.
8. Se connecter en concessionnaire pour valider les réservations et contrôler le check-in.

Tests Et Qualité

Backend :

cd backend
./mvnw test

Frontend :

cd frontend
npm run lint
npm test
npm run build
npm run e2e

La CI GitHub Actions exécute les tests backend, le lint frontend, les tests frontend et le build Angular.

Points Techniques À Présenter

• Architecture REST avec contrôleurs, DTOs, services métier et validations.
• Sécurité Spring Security avec authentification JWT.
• Migrations Flyway et données initiales.
• Modèle catalogue persistant : plages, zones, emplacements, guide local, offres et pass client.
• Réservations rattachées à un site de plage.
• Gestion de disponibilité avec verrouillage pessimiste.
• Facture PDF et QR Pass SVG générés côté backend.
• Frontend Angular en composants standalone, lazy loading, signals et formulaires réactifs.
• Tests unitaires frontend/backend et scénarios Playwright.
• Dockerisation complète avec proxy Nginx.

Périmètre

Le projet couvre le parcours complet de réservation et de gestion d'un service de plage. Les intégrations de paiement réel, le packaging Android APK, le packaging Windows EXE, le rôle employé séparé et le scan caméra QR réel ne font pas partie du périmètre actuel.

Auteur

Renaud Meynadier.