← Retour aux réalisations
NEXT.JS 15
Hotel Booking
Migration Angular → Next.js 15 headless. Application de réservation hôtelière full-stack, projet de certification Bloc 3. 102 établissements, paiement Stripe, emails transactionnels, admin Medusa.js.
102Hôtels
HeadlessStack
Bloc 3Certification
À propos du projet
CONTEXTE
Projet de certification Bloc 3 — refonte complète de mon application "Book Your Travel" (Bloc 2, Angular + MySQL) vers une architecture headless moderne. Objectif : concevoir une application production-ready en documentant la progression Angular → React.
STACK TECHNIQUE
Frontend : Next.js 15 App Router, React 18, TypeScript 5, Tailwind CSS
Backend/Admin : Medusa.js 2.0 (port 9000), Node.js
Base de données : PostgreSQL 16 + Prisma 6 ORM
Auth : JWT custom avec jose + bcryptjs, middleware routes protégées
Paiement : Stripe avec formulaire carte multi-champs custom
Emails : Nodemailer via Gmail SMTP
Déploiement cible : Google Cloud Platform (Cloud Run, Cloud SQL, Cloud Storage)
FONCTIONNALITÉS CLIENT
Homepage avec hero carousel animé, moteur de recherche, offres et destinations. Listing hôtels avec pagination, filtres et recherche. Pages détail hôtel avec navigation par onglets (description, chambres, avis, localisation). Flux de réservation complet : formulaire → paiement Stripe → confirmation. Espace utilisateur : profil, historique réservations, annulation, suppression de compte (soft delete avec vérification mot de passe). Emails transactionnels : bienvenue, confirmation réservation, annulation, réinitialisation mot de passe, formulaire contact. Page contact avec Google Maps.
FONCTIONNALITÉS ADMIN (Medusa Admin)
Dashboard personnalisé avec pages custom : gestion hôtels CRUD complet, gestion utilisateurs (rôles, historique réservations), gestion réservations. Navigation latérale fonctionnelle, lignes de tableau cliquables.
ARCHITECTURE
Architecture hybride : Medusa comme framework admin + base PostgreSQL séparée gérée par Prisma. Dual authentication : cookie-based + API key. Gestion CORS entre port 8000 (Next.js) et port 9000 (Medusa). Routes API bridges entre les deux systèmes.
POINTS TECHNIQUES NOTABLES
Gestion des conflits de routage Medusa (renommage reservations → bookings pour éviter les collisions avec routes natives). Pattern soft delete pour préserver l'historique. Génération de numéros de confirmation uniques. Emails HTML compatibles tous clients (tables HTML plutôt que flexbox). Typage TypeScript strict sur l'ensemble du projet.
Informations
Client
Projet personnel — Certification Bloc 3
Date
2025 - en cours de finalisation
Stack technique
Next.js 15React 18TypeScriptMedusa.js 2.0PostgreSQLPrisma 6StripeNodemailerJWTTailwind CSS