Une application web moderne de gestion médicale développée avec Angular 19, simulant la plateforme Doctolib avec des fonctionnalités complètes de gestion des rendez-vous, des médecins et des patients.
Application hébergée sur Vercel : Voir la démo
- Connexion/Déconnexion avec gestion des sessions
- Inscription avec validation des données
- 3 Rôles utilisateur : Patient, Médecin, Administrateur
- Guards de protection des routes sensibles
- Dashboard avec statistiques personnalisées
- Gestion des rendez-vous (confirmer, terminer, annuler)
- Planning hebdomadaire avec vue calendrier
- Gestion des patients avec historique complet
- Profil médecin modifiable
- Recherche de médecins par spécialité, localisation, tarif
- Prise de rendez-vous en ligne
- Gestion des RDV (voir, annuler)
- Historique médical complet
- Profil patient modifiable
- Dashboard avec statistiques globales
- Gestion des médecins (créer, modifier, activer/désactiver)
- Gestion des patients (voir, activer/désactiver)
- Vue d'ensemble de la plateforme
- Angular 19 - Framework principal
- TypeScript - Langage de programmation
- Tailwind CSS - Framework CSS
- Angular Signals - Gestion d'état réactive
- Angular Router - Navigation et routing
- Angular Forms - Gestion des formulaires
- ESLint - Linting du code
- Prettier - Formatage du code
- Husky - Git hooks
- Angular CLI - Outils de développement
- Domain-Driven Design (DDD) - Architecture modulaire
- Standalone Components - Composants autonomes
- Dependency Injection - Injection de dépendances
- localStorage - Persistance des données
src/
├── app/
│ ├── core/ # Services et guards centraux
│ │ ├── guards/ # Guards d'authentification
│ │ └── services/ # Services globaux
│ ├── features/ # Modules fonctionnels
│ │ ├── auth/ # Authentification
│ │ ├── doctors/ # Gestion des médecins
│ │ ├── patients/ # Gestion des patients
│ │ ├── appointments/ # Gestion des rendez-vous
│ │ ├── admin/ # Interface administrateur
│ │ └── dashboard/ # Tableaux de bord
│ ├── shared/ # Composants partagés
│ │ ├── components/ # Composants réutilisables
│ │ └── services/ # Services partagés
│ └── infrastructure/ # Configuration et utilitaires
├── environments/ # Variables d'environnement
└── assets/ # Ressources statiques
- Node.js (version 18 ou supérieure)
- npm ou yarn
- Angular CLI
# Cloner le repository
cd final-project-angular
# Installer les dépendances
npm install
# Démarrer le serveur de développement
npm start
# L'application sera accessible sur http://localhost:4200# Build pour la production
ng build --configuration production
# Les fichiers seront générés dans le dossier dist/- Email : admin@doctolib.com
- Mot de passe : admin123
- Email : dr.martin@doctolib.com
- Mot de passe : doctor123
- Email : patient@doctolib.com
- Mot de passe : patient123
Le projet utilise des variables d'environnement pour la configuration :
// src/environments/environment.ts
export const environment = {
production: false,
appName: 'final-project-angular'
};L'application utilise localStorage pour la persistance des données :
doctolib_users- Utilisateurs enregistrésdoctolib_doctors- Profils des médecinsdoctolib_appointments- Rendez-vousdoctolib_currentUser- Utilisateur connecté
- Design moderne avec Tailwind CSS
- Responsive pour mobile, tablette et desktop
- Navigation intuitive avec breadcrumbs
- Feedback visuel pour toutes les actions
- Modales pour les interactions complexes
- Navigation clavier complète
- Contraste respecté
- Labels appropriés
- Focus visible
# Lancer les tests unitaires
ng test
# Tests avec couverture
ng test --code-coverage# Lancer les tests end-to-end
ng e2e- Statuts multiples : Programmé, Confirmé, Terminé, Annulé
- Automatisation : Les RDV passés sont automatiquement marqués comme terminés
- Filtrage par date, statut, médecin
- Validation des créneaux disponibles
- Filtres multiples : Spécialité, localisation, tarif, note
- Recherche en temps réel
- Tri par pertinence, note, tarif
- Confirmations d'actions
- Alertes d'erreur
- Messages de succès
- Validation côté client
- Sessions sécurisées avec localStorage
- Protection des routes sensibles
- Validation des entrées utilisateur
- Sanitisation des données
- Persistance locale sécurisée
# Installer Vercel CLI
npm i -g vercel
# Déployer
vercel
# Déploiement automatique avec Git
# Connecter votre repository GitHub à Vercel- Netlify :
ng build && netlify deploy - Firebase :
ng build && firebase deploy - AWS S3 :
ng build && aws s3 sync dist/ s3://bucket-name
- Fork le projet
- Créer une branche feature (
git checkout -b feature/nouvelle-fonctionnalite) - Commit vos changements (
git commit -m 'Ajout nouvelle fonctionnalité') - Push vers la branche (
git push origin feature/nouvelle-fonctionnalite) - Ouvrir une Pull Request
- ESLint pour le linting
- Prettier pour le formatage
- Conventional Commits pour les messages
- Tests obligatoires pour les nouvelles fonctionnalités
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
Votre Nom
- GitHub: @votre-username
- LinkedIn: Votre Profil
- Email: votre.email@example.com
- Angular Team pour le framework exceptionnel
- Tailwind CSS pour les styles magnifiques
- Vercel pour l'hébergement gratuit
- Communauté open source pour l'inspiration
Pour toute question ou problème :
- Issues GitHub : Ouvrir une issue
- Email : support@example.com
- Discord : Rejoindre le serveur
⭐ N'hésitez pas à donner une étoile si ce projet vous a aidé !