Je vais créer un prototype d'application web de réservation de places de parking pour une école en utilisant Next.js et shadcn/ui. Voici une implémentation qui couvre toutes les fonctionnalités demandées.

Voici un prototype d'application web de réservation de places de parking pour une école, implémenté avec Next.js et shadcn/ui. L'application couvre toutes les fonctionnalités demandées :

1. Authentification

• Page de connexion avec email/mot de passe
• Option "Mot de passe oublié"
• Support pour les étudiants et enseignants

2. Tableau de bord principal

• Affichage des places disponibles/occupées via une carte interactive et une liste
• Bouton "Réserver une place"

3. Réservation

• Sélection de la date, heure et durée
• Option "Voiture électrique" pour accéder aux bornes de recharge
• Confirmation par notification

4. Gestion des réservations

• Annulation/modification d'une réservation
• Historique des réservations passées avec statut

5. Profil utilisateur

• Informations personnelles (nom, véhicule, statut étudiant/enseignant)
• Bouton "Déconnexion"

6. UI/UX

• Design moderne et accessible avec un système de couleurs cohérent
• Feedback visuel (notifications de succès/erreur, états de chargement)
• Interface responsive pour mobile et desktop

Structure de l'application

L'application est organisée en plusieurs pages principales :

1. Page d'accueil (app/page.tsx) - Page de présentation avec accès à la connexion
2. Connexion (app/login/page.tsx) - Formulaire de connexion avec options d'authentification
3. Mot de passe oublié (app/forgot-password/page.tsx) - Processus de récupération de mot de passe
4. Tableau de bord (app/dashboard/page.tsx) - Vue principale avec carte du parking et réservations actuelles
5. Réservations (app/reservations/page.tsx) - Gestion complète des réservations
6. Profil (app/profile/page.tsx) - Gestion des informations personnelles et préférences

Composants clés

• ParkingMap - Affichage visuel des places de parking
• ParkingList - Liste des places avec filtres et recherche
• ReservationDialog - Formulaire de réservation avec sélection de date et heure

Cette implémentation peut servir de base pour créer vos maquettes Figma, car elle contient tous les écrans et flux utilisateurs demandés. Vous pouvez vous inspirer de cette structure et de ces composants pour créer votre prototype haute fidélité.