🏠 Application de Visites Immobilières - MVP Angular

Application web offline-first pour gérer vos visites immobilières personnelles.

📋 Caractéristiques

• ✅ Offline-first : Fonctionne sans connexion internet
• ✅ Standalone Components : Architecture Angular moderne
• ✅ Tailwind CSS : Interface responsive et moderne
• ✅ IndexedDB : Stockage local persistant
• ✅ Auto-save : Sauvegarde automatique lors de la saisie
• ✅ Mobile-first : Optimisé pour mobile et tablette
• ✅ PWA Ready : Peut être installé comme application

🚀 Installation

Prérequis

• Node.js 20.19+ ou 22.12+
• npm 8.0+

Étapes

1. Installer les dépendances

cd visit-immobilier
npm install

2. Lancer le serveur de développement

npm start

L'application sera accessible sur http://localhost:4200

3. Build pour la production

npm run build

Les fichiers seront générés dans le dossier dist/

📁 Structure du projet

visit-immobilier/
├── src/
│   ├── app/
│   │   ├── models/
│   │   │   └── visit.model.ts          # Interfaces TypeScript complètes
│   │   ├── services/
│   │   │   ├── storage.service.ts      # Abstraction IndexedDB
│   │   │   └── visit.service.ts        # Service CRUD des visites
│   │   ├── components/                 # Composants UI réutilisables
│   │   │   ├── text-input/
│   │   │   ├── toggle/
│   │   │   ├── select/
│   │   │   ├── textarea/
│   │   │   └── section/
│   │   ├── pages/
│   │   │   ├── visit-list/             # Page liste des visites
│   │   │   └── visit-detail/           # Page détail d'une visite
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── styles.css                      # Styles Tailwind
│   ├── index.html
│   └── main.ts
├── package.json
├── angular.json
├── tailwind.config.js
├── postcss.config.js
└── tsconfig.json

🎯 Fonctionnalités

Page d'accueil (Liste des visites)

• Affichage en grille de toutes les visites
• Bouton "Nouvelle visite"
• Aperçu des informations principales (prix, surface, nombre de pièces)
• Photo principale
• Badge favori
• Navigation vers le détail

Page de détail (Questionnaire)

• Informations générales : type, prix, surface, pièces, état
• Localisation : adresse, ville, quartier, proximités
• Extérieur : balcon, terrasse, jardin, parking, orientation
• Parties communes : ascenseur, sécurité, état de l'immeuble
• Équipements : chauffage, charges, taxe foncière, fenêtres
• Notes : points forts/faibles, travaux, impression générale
• Photos : upload et gestion des photos

Fonctionnalités techniques

• Auto-save : Sauvegarde automatique après 1 seconde d'inactivité
• Validation : Formulaires réactifs avec validation
• Sections pliables : Interface organisée et épurée
• Export/Import : Possibilité d'exporter les données en JSON
• Recherche : Recherche par adresse, ville ou type

🔧 Architecture technique

Modèles de données

Les données sont structurées de manière logique et sérialisable :

Visit {
  id: string
  createdAt: Date
  updatedAt: Date
  general: GeneralInfo
  location: Location
  exterior: Exterior
  commonAreas: CommonAreas
  utilities: Utilities
  windows: Windows
  notes: Notes
  photos: Photo[]
  isFavorite: boolean
}

Tous les champs sont typés et optionnels pour permettre une saisie progressive.

Services

StorageService : Couche d'abstraction pour IndexedDB

• save() : Sauvegarder un élément
• getById() : Récupérer par ID
• getAll() : Récupérer tous les éléments
• delete() : Supprimer un élément
• exportAll() / importAll() : Backup/Restore

VisitService : Logique métier des visites

• createVisit() : Créer une nouvelle visite
• saveVisit() : Sauvegarder une visite
• getVisitById() : Récupérer une visite
• deleteVisit() : Supprimer une visite
• toggleFavorite() : Marquer/démarquer favori
• addPhoto() / deletePhoto() : Gestion des photos

Composants réutilisables

• TextInputComponent : Champ texte ou numérique
• ToggleComponent : Bouton on/off (boolean)
• SelectComponent : Liste déroulante
• TextareaComponent : Zone de texte multiligne
• SectionComponent : Section pliable

Tous les composants implémentent ControlValueAccessor pour l'intégration avec ngModel.

💾 Stockage des données

Les données sont stockées localement dans IndexedDB :

• Base de données : visit-immobilier-db
• Object Store : visits
• Index : by-date, by-favorite

Les données persistent même après fermeture du navigateur.

🎨 Personnalisation

Tailwind CSS

Le fichier tailwind.config.js permet de personnaliser :

• Couleurs
• Fonts
• Espacements
• Breakpoints

Ajout de nouveaux champs

1. Modifier l'interface dans models/visit.model.ts
2. Mettre à jour la fonction de création par défaut
3. Ajouter le champ dans le formulaire visit-detail.component.ts

📱 Progressive Web App (PWA)

L'application est prête pour être installée comme PWA :

1. Le fichier manifest.json est configuré
2. Les meta tags sont en place dans index.html
3. Pour activer complètement le mode PWA, ajouter un Service Worker

🔄 Migration vers Flutter

Cette architecture a été pensée pour faciliter la migration future :

• Modèles de données : Directement transposables en classes Dart
• Services : La séparation permet de remplacer facilement l'implémentation
• UI Components : Les composants peuvent être réimplémentés en Flutter Widgets
• Stockage : Remplacer IndexedDB par Hive, Isar ou SQLite

🧪 Tests

Pour ajouter des tests :

npm test

🚢 Déploiement

Hébergement statique

L'application peut être déployée sur :

• Netlify
• Vercel
• GitHub Pages
• Firebase Hosting

npm run build
# Les fichiers sont dans dist/visit-immobilier

Docker

FROM nginx:alpine
COPY dist/visit-immobilier /usr/share/nginx/html

📝 Notes importantes

Sécurité

• Les données sont stockées uniquement en local
• Aucune connexion serveur n'est nécessaire
• Les photos sont encodées en Base64

Limites

• Taille maximale des photos : Dépend du navigateur (généralement ~10MB par photo)
• Nombre de visites : Limité par le quota IndexedDB du navigateur (généralement ~50% de l'espace disque disponible)

Compatibilité navigateurs

• Chrome 87+
• Firefox 78+
• Safari 14+
• Edge 88+

🐛 Résolution de problèmes

IndexedDB ne fonctionne pas

• Vérifier que le navigateur supporte IndexedDB
• Désactiver le mode navigation privée
• Vérifier les permissions du navigateur

Les photos ne s'affichent pas

• Vérifier la taille du fichier (< 10MB recommandé)
• Utiliser des formats standards (JPEG, PNG, WebP)

L'application ne se lance pas

# Nettoyer et réinstaller
rm -rf node_modules package-lock.json
npm install
npm start

📚 Ressources

• Angular Documentation
• Tailwind CSS
• IndexedDB API
• idb Library

🤝 Contribution

Ce projet est un MVP personnel. Pour l'étendre :

1. Fork le projet
2. Créer une branche (git checkout -b feature/AmazingFeature)
3. Commit (git commit -m 'Add some AmazingFeature')
4. Push (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

📄 Licence

MIT License - Libre d'utilisation et de modification

👤 Auteur

Créé avec ❤️ pour gérer efficacement les visites immobilières

---

Bon courage pour vos visites ! 🏡