Étude de cas 03 / 03 · Location de voitures / Application métier
Car Rental
Un site de réservation de location de voitures. Les clients cherchent une voiture par dates et par type, puis la réservent à la journée. L'équipe gère les voitures et les réservations depuis un espace d'administration.
- Rôle
- Seul · full-stack
- Statut
- Démo fonctionnelle · vraie base PostgreSQL
- Technologies
- Next.js · PostgreSQL · Prisma
- Mis à jour
- sept. 2026
01
Ce qu'il fallait, et ce que j'ai construit
Une agence de location doit montrer aux clients quelles voitures sont libres à leurs dates, et les laisser réserver. Le prix ne doit pas changer après la réservation. L'âge minimum du conducteur doit être vérifié partout de la même façon. Et l'équipe a besoin d'un moyen simple de gérer les voitures et les réservations.
01 · Disponibilité
ProblèmeLes clients doivent voir quelles voitures sont libres à leurs dates, et une voiture ne doit jamais être réservée deux fois.
ConstruitRecherche par dates, et les dates sont revérifiées face aux réservations existantes avant d'enregistrer la réservation.
La vérification de chevauchement et l'insertion se font dans une transaction ; une contrainte d'exclusion en base est la prochaine étape pour la rendre infaillible
02 · Prix
ProblèmeLe prix ne doit pas changer une fois la réservation faite.
ConstruitLe total est calculé et enregistré à la réservation : un changement de tarif ensuite ne le modifie pas.
03 · Règles
ProblèmeL'âge minimum du conducteur doit être vérifié de la même façon partout.
ConstruitUne seule règle d'âge est partagée par la recherche, la page de la voiture et la réservation.
Le serveur la revérifie à chaque réservation, car une requête directe peut contourner le formulaire
Toutes les fonctionnalités (10)
- Recherche par catégorie, boîte de vitesses et carburant, ou avec l'assistant « find my car » étape par étape
- Réservation à la journée avec un calendrier. Le prix total est enregistré au moment de réserver, donc si le tarif change plus tard, votre réservation ne bouge pas
- Pas de double réservation : avant d'enregistrer une réservation, elle est vérifiée contre les réservations existantes de la voiture à ces dates, et la recherche cache les voitures déjà prises
- Les conducteurs doivent avoir 18 ans ou plus. C'est vérifié dans la recherche, le formulaire de réservation et l'administration
- Connexion avec Google ou avec email et mot de passe (haché avec bcrypt), le tout avec Auth.js
- Seuls les clients qui ont terminé une réservation peuvent laisser un avis, et un seul par réservation
- Administration des voitures et des réservations. Une voiture qui a des réservations ne peut pas être supprimée, seulement archivée, pour garder l'historique
- Un vrai écran de confirmation après la réservation, pas juste un retour à l'accueil
- Les formulaires et l'administration marchent sur mobile, y compris des corrections pour les champs de date qui cassaient la mise en page sur Safari iOS
- De vrais aperçus de lien : partager le site sur les réseaux sociaux affiche une carte avec le titre et une image
02
Comment c'est construit
J'ai construit une application Next.js avec un assistant de recherche « find my car », une page par voiture avec les avis, et un parcours de réservation qui vérifie l'âge du conducteur et réserve à la journée. Après la réservation, le client voit un vrai écran de confirmation. L'équipe a un espace d'administration pour les voitures et les réservations.
- Frontend
- Next.js 16 (App Router) + TypeScript + Tailwind v4Des server components pour les pages avec beaucoup de données, comme la liste des voitures et les réservations. Des client components seulement là où l'utilisateur interagit.
- Base de données
- PostgreSQL (Supabase) + Prisma 7Les voitures, les réservations et les avis sont liés, donc une base relationnelle convient. Prisma donne des requêtes typées au lieu de SQL brut.
- Authentification
- Auth.js (NextAuth v5)Un seul système pour la connexion Google et email/mot de passe. L'adaptateur Prisma enregistre les utilisateurs et les sessions dans la base.
- Animation
- MotionUtilisé dans le parcours de réservation là où ça aide, pas sur chaque élément.
- Hébergement
- VercelFait pour Next.js, sans serveur à gérer.
03
Ce qui était difficile
- Garder des prix justes. Le prix total est calculé et enregistré au moment de la réservation, au lieu d'être recalculé avec le tarif actuel de la voiture.
- Garder l'historique des réservations. Une voiture avec des réservations ne peut pas être supprimée (onDelete: Restrict). L'archivage est la façon normale de retirer une voiture, donc les admins ne tombent pas sur des erreurs.
- Le mobile a demandé plusieurs séries de corrections : des champs de date qui chevauchaient le choix de l'heure, des champs de recherche à empiler sur toute la largeur, et un débordement qui n'apparaissait que sur Safari iOS.
- Les builds échouaient sur Vercel parce que le client Prisma n'était pas généré. Je l'ai corrigé en générant le client à l'installation.
- Auth.js ne fait confiance à l'en-tête Host automatiquement que sur Vercel et Cloudflare. Ailleurs, il faut l'autoriser soi-même, et c'est une décision de sécurité, pas un réglage à activer sans réfléchir.
04
Résultat
Elle est en ligne comme démo fonctionnelle sur Vercel, avec une vraie base Postgres. Tout le parcours marche : rechercher, réserver, confirmer, et gérer les voitures et les réservations en admin. Le site indique clairement que c'est une démo de portfolio, pas une vraie agence de location.
05
Écrans
8 écrans · touchez pour agrandir
Besoin d'un système de réservation comme celui-ci ?
Disponibilités par date, prix fixés à la réservation, et une administration pour votre équipe.