Webapp moderne et immersive pour une agence de voyage temporel de luxe (fictive), créée avec de l'IA générative de code. Le site met en scène l'agence et ses 3 destinations — Paris 1889, le Crétacé -65M et Florence 1504 — avec un chatbot IA, un quiz de recommandation personnalisée et un formulaire de réservation.
Projet supervisé IA M1/M2 — Session 2 : Webapp & IA Agents.
- Page d'accueil — Hero immersif (image de fond + halo animé), présentation de l'agence, CTA.
- Galerie des destinations — 3 cards interactives avec animations au survol et modale détaillée (programme, prix, durée) par époque.
- Agent conversationnel (chatbot IA) — Widget flottant en bas à droite, branché sur l'API Groq, avec la personnalité du « Concierge Temporel ». Répond aux questions sur les destinations, les prix et conseille une époque. Clé API gardée côté serveur (jamais exposée au navigateur).
- Quiz de recommandation personnalisée — 4 questions → algorithme de scoring qui recommande la destination idéale.
- Formulaire de réservation — Sélection destination + date + voyageurs, avec validation automatique et confirmation.
- Animations — Framer Motion (fade-in au scroll, micro-interactions, transitions douces, barre de progression du quiz).
- Responsive — Mobile-first, menu burger, design en thème sombre et accents dorés.
- React 18 + Vite (build ultra-rapide)
- Tailwind CSS (thème sombre custom, accents dorés)
- Framer Motion (animations)
- Node + Express (proxy API en local) / fonctions serverless (déploiement)
- API Groq (LLM
llama-3.3-70b-versatile) pour le chatbot
- Node.js 18+ installé.
- Une clé API Groq gratuite : https://console.groq.com/keys
npm installCopiez le fichier d'exemple et renseignez votre clé :
cp .env.example .envPuis éditez .env :
GROQ_API_KEY=gsk_votre_cle_ici
Placez vos 3 images dans public/images/ :
paris.jpg·cretace.jpg·florence.jpg
(Voir public/images/README.txt pour le détail.)
npm run dev- Front (Vite) : http://localhost:5173
- API (Express) : http://localhost:3001 (le front la contacte automatiquement via proxy)
npm run devlance les deux serveurs en parallèle. Le chatbot ne fonctionne que si l'API tourne et que la clé Groq est configurée.
npm run build # génère le dossier dist/
npm run start # sert dist/ + l'API sur le port 3001- Poussez le repo sur GitHub.
- Importez le projet sur vercel.com.
- Ajoutez la variable d'environnement
GROQ_API_KEYdans les Settings → Environment Variables. - Déployez. Le dossier
api/chat.jsest automatiquement déployé en fonction serverless.
- Build command :
npm install && npm run build - Start command :
npm run start - Variable d'environnement :
GROQ_API_KEY
- Code : généré et assemblé avec Claude (Anthropic) via Claude Code.
- Chatbot : Groq — modèle
llama-3.3-70b-versatile. - Visuels : images générées en Session 1 (à placer dans
public/images/).
timetravel-agency/
├── api/chat.js # Proxy serverless vers Groq (clé sécurisée)
├── server.js # Serveur Express (dev local + hébergement Node)
├── public/
│ ├── favicon.svg
│ └── images/ # Vos 3 visuels Session 1
├── src/
│ ├── App.jsx
│ ├── main.jsx
│ ├── index.css
│ ├── data/destinations.js # Données des 3 destinations
│ └── components/
│ ├── Navbar.jsx
│ ├── Hero.jsx
│ ├── Destinations.jsx # Cards + modale détaillée
│ ├── Quiz.jsx # Recommandation personnalisée
│ ├── Booking.jsx # Formulaire de réservation validé
│ ├── Footer.jsx
│ └── Chatbot.jsx # Widget IA (Groq)
├── tailwind.config.js
├── vite.config.js
└── vercel.json
Projet pédagogique — M1/M2 Digital & IA. Univers fictif, à but éducatif.