← 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

Galerie