// Accueil // Blog // Projets Web // Qui suis-je ? // Contact
Accueil / Projets Web / Luxury Taxi Assistant
pilou2506.vercel.app
Luxury Taxi Assistant — capture d'écran sur ordinateur

Luxury Taxi Assistant

ReactTypeScriptViteTailwind CSSSupabasePWAMagic UI

Le problème

Les réservations de taxis passaient par un cahier et des post-it. Une confirmation oubliée, et un client attend devant l'entrée avec ses valises pour un vol qui, lui, n'attendra pas. Il fallait un outil qui surveille l'heure à la place de l'équipe.

Ce que fait l'appli

  • Tableau de bord en direct à l'heure de l'hôtel : prochain départ avec compte à rebours, réservations du jour, des 60 prochaines minutes, à confirmer, voiture à l'entrée.
  • Cycle de statut Demandé → Confirmé → Voiture à l'entrée → Parti (ou Annulé / No-show), chaque changement horodaté.
  • Alertes : « pas encore confirmé » à moins de 45 min, « en retard » une fois l'heure passée, avec centre de notifications et notifications du navigateur.
  • Écran Lobby pour une télévision à l'entrée : tableau des départs à volets (split-flap), globe centré sur Fukuoka, anglais et japonais en alternance, initiales des clients seulement.
  • Rapport d'équipe en japonais (registre interne poli) ou en anglais, passation de fin de service en un clic, statistiques sur 7 / 30 jours, palette de commandes (Ctrl K), export CSV et feuille du jour imprimable.
  • Écran de confidentialité : après 5 minutes d'inactivité, un voile masque tous les noms des clients.

Sous le capot

React 19, TypeScript strict, Vite et Tailwind CSS v4, avec une cinquantaine de composants Magic UI et Motion (tous coupés avec prefers-reduced-motion), la View Transitions API et un service worker écrit à la main pour le hors ligne. Les données vivent dans le navigateur et peuvent être partagées entre plusieurs postes en temps réel avec Supabase (Realtime), derrière une interface de stockage unique.

🔒 La démo

La démo est construite sans connexion Supabase : elle démarre vide et vos réservations restent dans votre navigateur (localStorage). Le bouton « Load sample data » de l'écran vide remplit une journée fictive pour tout essayer. Aucune réservation réelle n'est accessible.

🎯 Le but du projet

Ne plus jamais rater un départ : savoir d'un coup d'œil quel taxi arrive, lesquels ne sont pas encore confirmés, et transmettre la journée proprement à l'équipe suivante.

📁 Structure du projet · 198 fichiers

  • luxury_taxi_assistant/
    • dist/
      • assets/
        • bodoni-moda-latin-400-normal-9rKXKbpF.woff
        • bodoni-moda-latin-400-normal-CIWtV3SY.woff2
        • bodoni-moda-latin-500-normal-B12im5S-.woff
        • bodoni-moda-latin-500-normal-CtAcMono.woff2
        • bodoni-moda-latin-ext-400-normal-Dc1RgLRZ.woff2
        • bodoni-moda-latin-ext-400-normal-Do8lbhET.woff
        • bodoni-moda-latin-ext-500-normal-BYrod4Pn.woff2
        • bodoni-moda-latin-ext-500-normal-CIarxZXv.woff
        • bodoni-moda-math-400-normal-BJZYRKLS.woff
        • bodoni-moda-math-400-normal-BlAlXPk8.woff2
        • bodoni-moda-math-500-normal-2cdbsrD_.woff
        • bodoni-moda-math-500-normal-BMcHOREo.woff2
        • bodoni-moda-symbols-400-normal-BF8K6fhx.woff2
        • bodoni-moda-symbols-400-normal-XozWO_2V.woff
        • bodoni-moda-symbols-500-normal-CGBoXmFg.woff
        • bodoni-moda-symbols-500-normal-DQl8rlM2.woff2
        • confetti.module-BYDB1iN2.js
        • index-AeWPqfFW.css
        • index-BpjETnMm.js
        • jost-cyrillic-300-normal-Da-u_v9v.woff
        • jost-cyrillic-300-normal-DcIdRxLM.woff2
        • jost-cyrillic-400-normal-bVZEi0jL.woff2
        • jost-cyrillic-400-normal-Dk3McGkH.woff
        • jost-cyrillic-500-normal-DlHwnXyv.woff
        • jost-cyrillic-500-normal-DtB2bvF0.woff2
        • jost-latin-300-normal-Ckm9JHl_.woff
        • jost-latin-300-normal-DkBQXsFU.woff2
        • jost-latin-400-normal-C7S-3Ky6.woff
        • jost-latin-400-normal-q-RKOgPK.woff2
        • jost-latin-500-normal-41lBe9I9.woff2
        • jost-latin-500-normal-B-AtzreL.woff
        • jost-latin-ext-300-normal--ixxmfGr.woff2
        • jost-latin-ext-300-normal-DIStW2bt.woff
        • jost-latin-ext-400-normal-CpdMQIMr.woff2
        • jost-latin-ext-400-normal-Dsyb2mtt.woff
        • jost-latin-ext-500-normal-BkvHgcKf.woff2
        • jost-latin-ext-500-normal-Cpxiadwk.woff
        • LobbyScreen-DgzKbQ4Z.js
        • motion-oQ9zFCvq.js
        • react-D7OUFyTX.js
        • rolldown-runtime-CbXtAM7H.js
        • StatsView-mIvdjojp.js
      • brand/
        • favicon.svg
        • lta-icon.svg
        • lta-logo-horizontal.svg
        • lta-logo-stacked.svg
        • lta-mark.svg
      • apple-touch-icon.png
      • favicon.ico
      • favicon.svg
      • icon-192.png
      • icon-512.png
      • icon-maskable-512.png
      • index.html
      • lta-icon.svg
      • manifest.webmanifest
      • sw.js
    • docs/
      • SUPABASE.md
    • public/
      • brand/
        • favicon.svg
        • lta-icon.svg
        • lta-logo-horizontal.svg
        • lta-logo-stacked.svg
        • lta-mark.svg
      • apple-touch-icon.png
      • favicon.ico
      • favicon.svg
      • icon-192.png
      • icon-512.png
      • icon-maskable-512.png
      • lta-icon.svg
      • manifest.webmanifest
    • src/
      • components/
        • magicui/
          • animated-beam.tsx
          • animated-circular-progress-bar.tsx
          • animated-gradient-text.tsx
          • animated-list.tsx
          • animated-shiny-text.tsx
          • animated-subscribe-button.tsx
          • arc-timeline.tsx
          • aurora-text.tsx
          • avatar-circles.tsx
          • backlight.tsx
          • bento-grid.tsx
          • blur-fade.tsx
          • border-beam.tsx
          • box-reveal.tsx
          • confetti.ts
          • cool-mode.ts
          • copy-button.tsx
          • dock.tsx
          • dot-matrix-clock.tsx
          • dot-pattern.tsx
          • dotted-map.tsx
          • flickering-grid.tsx
          • flip-text.tsx
          • globe.tsx
          • highlighter.tsx
          • hyper-text.tsx
          • interactive-grid-pattern.tsx
          • interactive-hover-button.tsx
          • kinetic-text.tsx
          • lens.tsx
          • light-rays.tsx
          • line-shadow-text.tsx
          • magic-card.tsx
          • meteors.tsx
          • morphing-text.tsx
          • neon-gradient-card.tsx
          • number-ticker.tsx
          • orbiting-circles.tsx
          • particles.tsx
          • progressive-blur.tsx
          • ripple-button.tsx
          • ripple.tsx
          • scroll-progress.tsx
          • shimmer-button.tsx
          • shine-border.tsx
          • sparkles-text.tsx
          • spinning-text.tsx
          • striped-pattern.tsx
          • terminal.tsx
          • text-3d-flip.tsx
          • text-animate.tsx
          • typing-animation.tsx
          • velocity-scroll.tsx
          • word-rotate.tsx
        • ActivityLog.tsx
        • AlertsBell.tsx
        • AlertStack.tsx
        • BottomNav.tsx
        • CommandPalette.tsx
        • DayNav.tsx
        • DayTimeline.tsx
        • DeparturesTicker.tsx
        • Footer.tsx
        • Header.tsx
        • HeaderClock.tsx
        • Icons.tsx
        • InstallGuide.tsx
        • LangToggle.tsx
        • LobbyScreen.tsx
        • NowButton.tsx
        • Overview.tsx
        • ReservationDrawer.tsx
        • ReservationForm.tsx
        • ReservationRow.tsx
        • Screensaver.tsx
        • ShiftHandover.tsx
        • SpecialNotes.tsx
        • Splash.tsx
        • StaffReport.tsx
        • StatsView.tsx
        • StatusBadge.tsx
        • Tabs.tsx
        • Tour.tsx
        • WeekArc.tsx
        • WhatsNew.tsx
      • hooks/
        • useDialog.ts
        • useHashRoute.ts
        • useHotelNow.ts
        • useI18n.ts
        • useInstall.ts
        • useReservations.ts
        • useSwipe.ts
      • lib/
        • alerts.ts
        • csv.ts
        • demo.ts
        • format.ts
        • messages.ts
        • places.ts
        • printText.ts
        • pwa.ts
        • special.ts
        • storage.ts
        • sun.ts
        • supabase.ts
        • supabaseStore.ts
        • time.ts
        • transition.ts
        • utils.ts
        • version.ts
      • styles/
        • app.css
        • global.css
      • sw/
        • sw-template.js
      • App.tsx
      • i18n.ts
      • main.tsx
      • types.ts
      • vite-env.d.ts
    • supabase/
      • migrations/
        • 0001_reservations.sql
        • 0002_reservations_owner_rls.sql
    • index.html
    • package-lock.json
    • package.json
    • README.md
    • tsconfig.json
    • tsconfig.node.json
    • vercel.json
    • vite.config.ts

Autres projets