Compagnon du lagon - Pension Marama

Application web PWA (Progressive Web App) destinée aux clients d'une pension de famille en Polynésie. Cette application remplace le livret d'accueil papier et offre une expérience numérique optimisée pour les connexions internet faibles.

Technologies

• Framework: Next.js 14 (App Router)
• Langage: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide-React
• Components: Shadcn/UI

Fonctionnalités

Onglet Accueil

• Header personnalisé avec numéro de bungalow
• Card WiFi avec copie du mot de passe
• Widget météo (placeholder)
• Section "Le mot du gérant"

Onglet Explorer

• Liste de catégories (Plages, Restaurants/Roulottes, Epiceries, Activités)
• Liste de lieux recommandés par catégorie
• Intégration Google Maps pour chaque lieu

Onglet Infos Pratiques

• FAQ en accordéon (Check-out, Petit-déjeuner, Climatisation, Numéros d'urgence)
• Lexique tahitien (5 mots essentiels)

Installation

Développement local

# Installer les dépendances
npm install

# Copier le fichier d'environnement
cp env.example .env.local

# Modifier les variables dans .env.local selon vos besoins

# Lancer le serveur de développement
npm run dev

L'application sera accessible sur :

• Local : http://localhost:3000
• Réseau local : http://VOTRE_IP:3000 (voir ci-dessous)

Tester sur un appareil mobile

Le serveur est configuré pour être accessible depuis votre réseau local.

1. Trouver votre adresse IP locale :

   hostname -I
   

   Ou regardez dans les paramètres réseau de votre système.

2. Sur votre mobile (connecté au même Wi-Fi) :

   • Ouvrez le navigateur (Chrome, Safari, etc.)
   • Allez à : http://VOTRE_IP:3000
   • Exemple : http://192.168.1.100:3000

3. Tester la PWA :

   • Dans Chrome mobile : Menu (⋮) → "Ajouter à l'écran d'accueil"
   • Dans Safari iOS : Partager → "Sur l'écran d'accueil"
   • L'app s'ouvrira comme une application native

4. Mode développeur du navigateur (alternative) :

   • Sur PC : F12 → Toggle device toolbar (Ctrl+Shift+M)
   • Permet de simuler différents appareils mobiles

Docker

Build et run

# Build de l'image
docker-compose build

# Lancer le conteneur
docker-compose up -d

# Voir les logs
docker-compose logs -f

# Arrêter le conteneur
docker-compose down

Variables d'environnement Docker

Créez un fichier .env à la racine du projet avec vos variables :

NEXT_PUBLIC_BUNGALOW_NUMBER=1
NEXT_PUBLIC_WIFI_NAME=Lagon-WiFi
NEXT_PUBLIC_WIFI_PASSWORD=motdepasse123
NEXT_PUBLIC_GERANT_MESSAGE=Bienvenue dans notre pension de famille !

Configuration

Variables d'environnement

• NEXT_PUBLIC_BUNGALOW_NUMBER: Numéro du bungalow (dynamique selon le client)
• NEXT_PUBLIC_WIFI_NAME: Nom du réseau WiFi
• NEXT_PUBLIC_WIFI_PASSWORD: Mot de passe WiFi
• NEXT_PUBLIC_GERANT_MESSAGE: Message personnalisé du gérant

Structure du projet

├── app/
│   ├── accueil/          # Page d'accueil
│   ├── explorer/         # Page explorer
│   ├── infos/            # Page infos pratiques
│   ├── api/              # Routes API
│   └── layout.tsx        # Layout principal
├── components/
│   ├── accueil/          # Composants page accueil
│   ├── explorer/         # Composants page explorer
│   ├── infos/            # Composants page infos
│   ├── layout/           # Composants layout
│   └── ui/               # Composants Shadcn/UI
├── lib/                  # Utilitaires et configuration
└── public/               # Assets statiques et PWA

PWA

L'application est configurée comme PWA avec :

• Manifest.json pour l'installation
• Service Worker pour le cache offline
• Optimisations pour connexions faibles

Design System

• Couleur primaire: #0E7490 (Bleu lagon)
• Couleur secondaire: #ECFCCB (Vert citron pâle)
• Background: #FAFAFA (Blanc cassé)
• Typographie: Inter, minimum 16px
• Bordures: Très arrondies (rounded-xl, rounded-2xl)

Production

# Build de production
npm run build

# Lancer en production
npm start

Licence

Propriétaire - Tous droits réservés