🗼 Documentation

Vue d'ensemble

Weekend in Paris est développé avec Next.js 14 (Pages Router) et déployé sur Vercel. Il présente les événements, attractions et restaurants de Paris avec des cartes interactives et un système multilingue.

Structure des dossiers

01_weekend_in_paris/
├── components/          # Composants React réutilisables
│   ├── Header.jsx       # Navigation + logo bannière
│   ├── Footer.jsx       # Pied de page
│   ├── AttractionCard.jsx
│   ├── Gallery.jsx      # Galerie photo
│   ├── Map.jsx          # Carte Mapbox (attractions)
│   └── MapEvents.jsx    # Carte Mapbox (événements)
├── context/
│   └── LanguageContext.jsx  # Gestion i18n (FR / EN / ZH)
├── data/
│   └── parisImages.js   # URLs d'images (Pexels/Pixabay)
├── lib/
│   └── supabaseClient.js   # Client Supabase + fonctions CRUD
├── pages/               # Pages Next.js
│   ├── _app.jsx
│   ├── _document.jsx
│   ├── index.jsx        # Accueil — événements + galerie + carte
│   ├── attractions.jsx
│   ├── restaurants.jsx
│   └── api/seed.js
├── public/
│   ├── locales/         # Fichiers de traduction (fr, en, zh)
│   ├── logo_banner.jpg  # Logo paysage (header du site)
│   └── logo_portrait.jpg # Logo portrait (Instagram)
├── scripts/
│   └── seedDatabase.js  # Peuplement Supabase
├── .env.local           # Variables d'environnement
├── next.config.js
└── tailwind.config.js

Couleurs du thème (Tailwind)

Composants principaux

Catégories d'événements

Table attractions

Table restaurants

Table contacts

Fonctions disponibles

Fichier : lib/supabaseClient.js

// Récupérer toutes les attractions triées par note
getAttractions()

// Récupérer une attraction par son ID
getAttractionById(id)

// Récupérer tous les restaurants
getRestaurants()

// Soumettre un formulaire de contact
submitContact(contactData)

Seeding de la base

# Depuis le dossier du projet
cd /Users/fl3m/Documents/Claude/Projects/01_weekend_in_paris
node scripts/seedDatabase.js

Le site supporte 3 langues. La langue par défaut est le français. Le choix est persisté dans localStorage.

Implémentation

Le système est géré par context/LanguageContext.jsx qui expose :

• LanguageProvider — wrapper à placer dans _app.jsx, charge le fichier JSON de la langue sélectionnée
• useLanguage() — hook donnant accès à language et switchLanguage(lang)
• useTranslation() — hook qui retourne la fonction t(key)

import { useTranslation } from '../context/LanguageContext';

export default function MyComponent() {
  const { t } = useTranslation();

  return <h1>{t('home.hero_title')}</h1>;
}

Structure des fichiers de traduction

{
  "home": {
    "title": "...",
    "hero_title": "...",
    "hero_subtitle": "..."
  },
  "evenements": {
    "hero_title": "...",
    "all": "Tous",
    "culturel": "Culturel",
    "events": {
      "foire_du_trone": {
        "title": "...",
        "dates": "...",
        "lieu": "...",
        "address": "...",
        "description": "...",
        "tarif": "..."
      }
    }
  }
}

ℹ️ Chaque événement dans EVENT_DATA a un slug qui correspond à une clé dans evenements.events. Les 50 événements sont tous traduits en FR, EN et ZH.

Processus de déploiement

Development (local)
       ↓
   git push origin main
       ↓
   GitHub (fl3m-ia/weekend-in-paris)
       ↓
   Vercel (détection automatique)
       ↓
   Build Next.js (npm run build)
       ↓
   Production : https://weekend-in-paris.vercel.app

Commandes git importantes

# Configuration obligatoire avant tout commit
git config user.email 'fl3m.ia@gmail.com'
git config user.name 'fl3m-ia'

# Déployer une modification
git add <fichiers>
git commit -m "description du changement"
git push origin main

Variables d'environnement (Vercel)

Prérequis

• Node.js 18+
• npm
• Un compte Supabase (gratuit)
• Un token Mapbox (gratuit)

Installation

# 1. Se placer dans le dossier du projet
cd /Users/fl3m/Documents/Claude/Projects/01_weekend_in_paris

# 2. Installer les dépendances
npm install

# 3. Lancer le serveur de développement
npm run dev

# 4. Ouvrir dans le navigateur
open http://localhost:3000

Fichier .env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
NEXT_PUBLIC_MAPBOX_TOKEN=pk.eyJ1IjoiZmwz...

Scripts npm

Ajouter un nouvel événement

1. Ajouter l'objet dans le tableau EVENT_DATA de pages/index.jsx :

{
  id: 51,
  slug: 'mon_evenement',
  category: 'culturel',
  dateStart: '2026-07-14',
  icon: '🇫🇷',
  image: parisImages.art,
  longitude: 2.3376,
  latitude: 48.8606,
  link: 'https://...'
}

2. Ajouter les traductions dans les 3 fichiers de locales sous la clé evenements.events.mon_evenement :

"mon_evenement": {
  "title": "Mon Événement",
  "dates": "14 juillet 2026",
  "lieu": "Champs-Élysées",
  "address": "Avenue des Champs-Élysées, 75008 Paris",
  "description": "Description de l'événement...",
  "tarif": "Gratuit"
}

3. Committer et pousser → Vercel redéploie automatiquement.