syoul
f3a8d26bd0
- Configuration Next.js 14 avec TypeScript et Tailwind CSS - Navigation mobile avec 4 onglets (Accueil, Explorer, Mana Tracker, Infos) - Page Accueil: WiFi card, widget météo, message gérant - Page Explorer: Lieux de Fakarava (plages, restaurants, épiceries) avec Google Maps - Page Mana Tracker: Marées, lever/coucher soleil, réservations excursions, notifications push - Page Infos Pratiques: FAQ par thèmes, lexique tahitien, section contact - PWA complète: manifest, service worker, cache offline - Design Tropical Chic: palette bleu lagon (#0E7490), vert citron (#ECFCCB) - Configuration Docker pour déploiement - Données spécifiques à Fakarava intégrées - Logo Relais Marama intégré - Serveur configuré pour accès réseau local (mobile)
161 lines
4.2 KiB
Markdown
161 lines
4.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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](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** :
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
# 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 :
|
|
|
|
```env
|
|
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
|
|
|
|
```bash
|
|
# Build de production
|
|
npm run build
|
|
|
|
# Lancer en production
|
|
npm start
|
|
```
|
|
|
|
## Licence
|
|
|
|
Propriétaire - Tous droits réservés
|
|
|