Visualiser les données IoT en temps réel (capteurs de température, humidité, qualité de l'air, bruit, trafic, énergie)
Accéder à une marketplace de services et produits locaux
Interagir avec un assistant IA (météo, transports, énergie, alertes)
Gérer ses notifications et profil utilisateur

🏗️ Architecture

smart-app-city/
├── frontend/          # Application React Native + Expo (TypeScript)
│   ├── src/
│   │   ├── screens/       # 15 écrans (Auth, Dashboard, Map, Marketplace, Chat, Profile, IoT, Notifications)
│   │   ├── components/    # Composants réutilisables (Card, Button, Charts, Maps)
│   │   ├── stores/        # State management (Zustand) — authStore, iotStore, notificationStore, uiStore
│   │   ├── hooks/         # Hooks personnalisés (useSensors, useAlerts, useNotifications, useLocation)
│   │   ├── services/      # Services API (auth, iot, notification, via Axios)
│   │   ├── i18n/          # Internationalisation (FR/EN/ES/DE)
│   │   ├── theme/         # Design system (Blue Ocean palette)
│   │   └── utils/         # Utilitaires (formatters, validators, constants)
│   ├── dist/              # Build web statique (nginx)
│   ├── Dockerfile         # Multi-stage build (node + nginx)
│   ├── package.json       # Dépendances (Expo 51, React Native 0.74)
│   └── app.json           # Configuration Expo
├── backend/           # Backend microservices (Node.js)
├── ai/                # Services IA (RAG, Agent)
├── design/            # Maquettes HTML/CSS (28 screenshots, PDF, Figma JSON, Penpot SVG)
├── docs/              # Documentation
└── docker-compose.yml # Orchestration Docker

🚀 Développement

Prérequis

Node.js 20+
Expo CLI : npm install -g expo-cli
Docker & Docker Compose (pour le déploiement)

Installation

cd frontend
npm install --legacy-peer-deps

Lancement en mode développement

# Mode natif (iOS/Android)
npm start
# Scanner le QR code avec l'app Expo Go

# Mode web
npm run web

Build web statique

# Sans Docker
cd frontend
npx expo export --platform web --output-dir dist

# Avec Docker
docker build -t smartapp-web:latest .

Déploiement

cd smart-app-city
docker compose -f docker-compose.web.yml up -d

L'application est accessible sur : https://smartapp.digitribe.fr

🎨 Design System

Palette principale

Blue Ocean : #1565C0 (primaire)
Indigo : #3949AB (accent)
Cyan : #00ACC1 (secondaire)
Deep Ocean : #0D1B2A (dark mode)

Composants

Tous les composants UI sont dans src/components/ :

common/Card.tsx — Carte réutilisable (3 variants : default, elevated, outlined)
common/Button.tsx — Bouton (5 variants, 3 tailles)
common/Header.tsx — En-tête de section
common/LoadingSpinner.tsx — Indicateur de chargement
common/ErrorBoundary.tsx — Gestion d'erreurs React
cards/SensorCard.tsx — Carte capteur IoT
cards/StatsCard.tsx — Carte statistiques
cards/AlertCard.tsx — Carte alerte
cards/ZoneCard.tsx — Carte zone
charts/LineChart.tsx — Graphique linéaire
charts/BarChart.tsx — Graphique barres
charts/GaugeChart.tsx — Jauge semi-circulaire
maps/MapView.tsx — Vue carte (placeholder pour react-native-maps)
maps/MarkerPopup.tsx — Popup marqueur

📊 State Management (Zustand)

Stores

authStore : Authentification utilisateur (login, register, logout, refresh token)
iotStore : Données IoT (6 capteurs, 3 zones, 2 alertes mock)
notificationStore : Notifications (5 mock notifications)
uiStore : Thème + i18n (FR/EN/ES/DE)

Hooks

useSensors() : Liste des capteurs, filtrage par type/zone
useAlerts() : Alertes actives/critiques, acknowledge
useNotifications() : CRUD notifications
useLocation() : GPS avec expo-location (défaut : Fort-de-France)

🌐 Internationalisation

4 langues supportées : Français (défaut), English, Español, Deutsch.

Fichier de traductions : src/stores/uiStore.ts (fonction t(key, lang))

🔌 API Backend

L'application communique avec l'API Gateway :

Base URL : https://api-smartapp.digitribe.fr/api/v1
Authentification : JWT (Basic Auth pour les routes /admin)
Endpoints principaux :
- POST /api/auth/login — Connexion
- POST /api/auth/register — Inscription
- POST /api/auth/refresh — Refresh token
- GET /sensors — Liste des capteurs
- GET /zones — Liste des zones
- GET /alerts — Liste des alertes

📦 Déploiement CI/CD

Gitea Actions

Fichier : .gitea/workflows/build-and-deploy.yml

Pipeline :

Lint : tsc --noEmit (TypeScript check)
Build : npx expo export --platform web
Deploy : SSH vers le serveur → copie les fichiers ou rebuild Docker

Secrets Gitea

SERVER_HOST : localhost
SERVER_USER : eric
SSH_PRIVATE_KEY : Clé SSH pour le déploiement

Dockerfiles

frontend/Dockerfile : Multi-stage build (node 20 alpine → nginx alpine)
docker-compose.web.yml : Service nginx statique avec Traefik

🌍 Services liés

Service	URL	Description
Gitea	https://gitea.digitribe.fr	Git + CI/CD
Honcho	https://honcho.digitribe.fr	Mémoire agent IA
Grafana	http://127.0.0.1:3088	Métriques Prometheus

📝 Notes techniques importantes

WatermelonDB supprimé

Le package @nozbe/watermelonDB a été supprimé car la version ^0.27.0 n'existe plus. Pas de remplacement nécessaire — la mémoire locale utilise Zustand + AsyncStorage.

Build web Expo

Le build npx expo export:web nécessite @expo/webpack-config@~19.0.1
Si le build échoue avec "Lock compromised" : supprimer package-lock.json et node_modules/, puis npm install --legacy-peer-deps
Le build Docker est plus fiable que le build local (environnement isolé)

Patch tool

Les fichiers contenant //, =, +, {} dans les strings peuvent corriger le tool patch. Utiliser replace_all=true ou échapper les caractères spéciaux.

📄 Licence

Smart City Digital Twin Martinique — Projet public