FOMO MVP

Application de découverte d'événements en temps réel - Version Beta

🚀 Démarrage rapide

Prérequis

• Node.js 18+
• npm ou yarn

Installation

# Installer les dépendances
npm install

# Backend
cd backend
npm install

Configuration

1. Backend : Créer backend/.env (voir backend/.env.example)

   GOOGLE_SERVICE_ACCOUNT_KEY=./service-account.json
   GOOGLE_SPREADSHEET_ID=your_spreadsheet_id
   PORT=3001
   CORS_ORIGIN=http://localhost:5173
   IMGBB_API_KEY=your_imgbb_api_key
   # MapTiler (utilisé pour tiles + géocodage)
   MAPLIBRE_ACCESS_TOKEN=your_maptiler_token
   # Note: Mapbox n'est plus utilisé (migré vers MapTiler)

2. Frontend : Créer .env.local (optionnel, mais recommandé pour Pexels)

   VITE_PEXELS_API_KEY=your_pexels_key
   VITE_MAPLIBRE_ACCESS_TOKEN=your_maplibre_token

   Note : .env.local est ignoré par git (voir .gitignore). Pour obtenir une clé Pexels gratuite : https://www.pexels.com/api/

Démarrage

Option 1: Scripts automatiques

./fomo/start.sh

Option 2: Manuel

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend
npm run dev

Build pour production

npm run build

📁 Structure

├── src/                 # Code source frontend (React + TypeScript)
│   ├── components/      # Composants React réutilisables
│   ├── contexts/         # Contextes React (Auth, Data, etc.)
│   ├── pages/          # Pages principales
│   ├── map/            # Composants de carte
│   ├── hooks/          # Hooks personnalisés
│   ├── utils/           # Utilitaires
│   └── styles/          # CSS (base, layout, components)
├── backend/            # API Express + Google Sheets
│   ├── controllers/    # Contrôleurs
│   ├── routes/         # Routes API
│   └── services/       # Services (géocodage, etc.)
└── dist/               # Build de production

🔧 Technologies

• Frontend: React 18, TypeScript, Vite, MapLibre GL
• Backend: Express, Google Sheets API
• Maps: MapLibre GL, Mapbox Geocoding
• Storage: Google Sheets (temporaire, migration Firebase prévue)

📚 Documentation

• Backend README - Documentation API
• Scripts - Scripts de gestion
• Styles - Guide de styles CSS

🔖 Bookmarklet FOMO

Le bookmarklet permet d'extraire des événements Facebook et de les ajouter directement à FOMO.

Installation

1. Ouvrir le fichier public/bookmarklet.js
2. Modifier l'URL de l'API : Remplacer API_BASE_URL par votre URL de production (ex: https://votre-domaine.vercel.app/api)
3. Minifier le code (optionnel, pour réduire la taille)
4. Créer un nouveau bookmarklet dans votre navigateur :
   • Chrome/Edge: chrome://bookmarks/ → Organiser → Ajouter une page
   • Firefox: Clic droit sur la barre de favoris → Nouveau favori
   • Safari: Clic droit sur la barre de favoris → Ajouter un favori
5. Coller le code minifié dans l'URL du bookmarklet

Utilisation

1. Ouvrir une page d'événement Facebook (ex: facebook.com/events/...)
2. Cliquer sur le bookmarklet FOMO
3. Entrer le mot de passe FOMO (configuré dans FOMO_KEY côté serveur)
4. Vérifier/modifier les données extraites dans le formulaire
5. Cliquer sur "Envoyer"

Configuration Backend

Ajouter dans backend/.env :

FOMO_KEY=votre_mot_de_passe_secret

⚠️ Sécurité: Le mot de passe est demandé à chaque utilisation du bookmarklet. Ne le partagez qu'avec les utilisateurs autorisés.

🔒 Sécurité

⚠️ Important:

• Ne jamais commiter backend/service-account.json ou .env
• Tous les secrets doivent être dans les variables d'environnement
• Consultez .gitignore pour la liste complète des fichiers exclus

📝 Développement

Voir les règles du projet dans .cursor/rules/ pour :

• Guidelines CSS/React/TypeScript
• Workflow de développement
• Règles de commit/PR

🚢 Déploiement

Configuration Vercel dans vercel.json.

📄 License

MIT