Foot Factory Pro
Guide Déploiement
← Accueil
Guide de Déploiement

Mettre Foot Factory Pro en ligne en moins de 10 minutes. Hébergement gratuit, URL publique, accessible depuis n'importe quel appareil.

✓ Hébergement gratuit✓ HTTPS automatique✓ URL personnalisée⚡ Déploiement en 5 min
Checklist de déploiement
0%
Télécharger tous les fichiers (14 fichiers dans le même dossier)
Créer un compte GitHub (github.com) — gratuit
Créer un repository GitHub et uploader les fichiers
Créer un compte Vercel (vercel.com) — gratuit avec GitHub
Connecter le repository GitHub à Vercel
Déployer — cliquer "Deploy" dans Vercel
Tester la plateforme via l'URL Vercel fournie
(Optionnel) Configurer Firebase pour la sync multi-appareils
(Optionnel) Connecter un domaine personnalisé
🔺 Vercel est la solution recommandée pour FFP. Déploiement instantané depuis GitHub, HTTPS gratuit, URL en ffp.vercel.app, CDN mondial. Plan gratuit suffisant pour toute la plateforme.
Option A — Interface Web (Sans code)
1
Créer un compte GitHub
Aller sur github.com → Sign up → Compte gratuit. Si vous en avez déjà un, passer à l'étape 2.
2
Créer un nouveau repository
GitHub → New repository → Nom : foot-factory-pro → Public → Create repository
3
Uploader les 14 fichiers FFP
Dans le repository → Add file → Upload files → Glisser-déposer les 14 fichiers → Commit changes
⚠️ Tous les fichiers doivent être à la racine du repository (pas dans un sous-dossier). Vérifier que ffp-accueil.html, ffp-coach.html, ffp-coach.js, etc. sont bien à la racine.
4
Connecter Vercel
Aller sur vercel.com → Continue with GitHub → Autoriser → Import le repository foot-factory-pro
5
Configurer le déploiement
Dans Vercel :
• Framework Preset : Other
• Root Directory : ./ (laisser par défaut)
• Build Command : laisser vide
• Output Directory : ./ (laisser par défaut)
→ Cliquer Deploy
6
🎉 Votre URL est prête !
Vercel génère automatiquement une URL du type :
https://foot-factory-pro.vercel.app

Accès immédiat depuis n'importe quel appareil, iPhone, Android, PC.
Option B — Via terminal (Git)
// 1. Installer Vercel CLI
npm install -g vercel

// 2. Aller dans le dossier FFP
cd chemin/vers/foot-factory-pro

// 3. Déployer
vercel

// Suivre les instructions :
// ? Set up and deploy current directory? Y
// ? Which scope? (votre compte)
// ? Link to existing project? N
// ? Project name: foot-factory-pro
// ? Directory: ./
// → URL déployée !

Node.js requis : nodejs.org

Fichier vercel.json (déjà créé ✓)
Ce fichier est inclus dans votre dossier FFP. Il configure Vercel pour servir correctement les fichiers HTML.
{
  "version": 2,
  "builds": [{ "src": "*.html", "use": "@vercel/static" }],
  "routes": [
    { "src": "/(.*)", "dest": "/$1" }
  ],
  "headers": [{
    "source": "/(.*)",
    "headers": [
      { "key": "Cache-Control", "value": "public, max-age=3600" },
      { "key": "X-Frame-Options", "value": "SAMEORIGIN" }
    ]
  }]
}
🌐 Netlify est une alternative solide à Vercel. Interface simple, drag-and-drop possible, HTTPS automatique. Légèrement plus simple pour les débutants.
Déploiement Drag & Drop — 2 minutes
1
Créer un compte
Aller sur app.netlify.com → Sign up with GitHub (ou email)
2
Drag & Drop
Dashboard Netlify → Onglet Sites → Glisser votre dossier FFP directement dans la zone "Drag and drop your site folder here"
⚠️ Glisser le dossier entier (pas les fichiers un par un). Le dossier doit contenir ffp-accueil.html, ffp-coach.js, etc.
3
URL automatique
Netlify génère une URL comme :
https://amazing-koala-12345.netlify.app

Renommer : Site settings → Change site name → foot-factory-pro
Via CLI
// Installer Netlify CLI
npm install -g netlify-cli

// Déployer
cd chemin/vers/foot-factory-pro
netlify deploy --prod --dir=.

// Suivre les instructions
// → URL déployée !
🔥 Firebase Hosting de Google. Idéal si vous utilisez déjà Firebase pour la synchronisation des données. Un seul projet Firebase pour tout.
Configuration Firebase Hosting
1
Créer un projet Firebase
Aller sur console.firebase.google.com → Add project → Nom : foot-factory-pro → Créer
2
Installer Firebase CLI
npm install -g firebase-tools
firebase login
3
Initialiser et déployer
cd chemin/vers/foot-factory-pro
firebase init hosting
# Public directory: .
# Single-page app: No
# Overwrite index.html: No

firebase deploy
firebase.json (déjà créé ✓)
{
  "hosting": {
    "public": ".",
    "ignore": ["firebase.json", ".gitignore"],
    "rewrites": [{
      "source": "/",
      "destination": "/ffp-accueil.html"
    }],
    "headers": [{
      "source": "**/*.@(js|html|css)",
      "headers": [{
        "key": "Cache-Control",
        "value": "max-age=3600"
      }]
    }]
  }
}
🐙 GitHub Pages est 100% gratuit mais nécessite de nommer la page d'accueil index.html. Léger ajustement à faire.
Étapes GitHub Pages
1
Renommer le fichier d'accueil
GitHub Pages utilise index.html comme page d'entrée. Renommer ffp-accueil.html en index.html dans votre dossier (ou créer une copie).
// Option 1 : copier
cp ffp-accueil.html index.html

// Option 2 : créer un index.html de redirection
// (contenu ci-dessous)
2
index.html de redirection
<!DOCTYPE html>
<html><head>
<meta http-equiv="refresh" content="0;url=ffp-accueil.html">
</head><body></body></html>
3
Activer GitHub Pages
Repository → Settings → Pages → Branch: main → Save

URL générée : https://votre-user.github.io/foot-factory-pro/
🟢 Supabase est un backend PostgreSQL open-source, alternative à Firebase. Il remplace localStorage par une vraie base de données accessible depuis n'importe quel appareil et navigateur.
Schéma de base de données FFP
-- Créer dans Supabase SQL Editor

-- Joueurs
CREATE TABLE joueurs (
  id SERIAL PRIMARY KEY,
  prenom TEXT NOT NULL,
  nom TEXT NOT NULL,
  poste TEXT,
  numero INT,
  date_naissance DATE,
  taille INT,
  poids INT,
  club TEXT DEFAULT 'Foot Factory Pro',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Évaluations
CREATE TABLE evaluations (
  id SERIAL PRIMARY KEY,
  joueur_id INT REFERENCES joueurs(id),
  session_date DATE DEFAULT CURRENT_DATE,
  technique JSONB,
  physique JSONB,
  tactique JSONB,
  mental JSONB,
  culture JSONB,
  score_global DECIMAL(4,2),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Événements (agenda)
CREATE TABLE evenements (
  id TEXT PRIMARY KEY,
  type TEXT,
  titre TEXT NOT NULL,
  date DATE NOT NULL,
  heure TEXT,
  lieu TEXT,
  description TEXT,
  obligatoire BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Messages
CREATE TABLE messages (
  id TEXT PRIMARY KEY,
  from_role TEXT,
  from_name TEXT,
  to_dest TEXT,
  sujet TEXT,
  corps TEXT,
  priorite TEXT DEFAULT 'normale',
  tag TEXT DEFAULT 'général',
  lu_par TEXT[],
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Matchs
CREATE TABLE matchs (
  id TEXT PRIMARY KEY,
  titre TEXT NOT NULL,
  adversaire TEXT,
  date DATE,
  lieu TEXT,
  score_home INT DEFAULT 0,
  score_away INT DEFAULT 0,
  statut TEXT DEFAULT 'setup',
  evenements JSONB,
  stats JSONB,
  notes JSONB,
  rapport TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Highlights
CREATE TABLE highlights (
  id TEXT PRIMARY KEY,
  joueur_id INT REFERENCES joueurs(id),
  match_titre TEXT,
  type TEXT,
  ia_score DECIMAL(3,1),
  tags TEXT[],
  description TEXT,
  views INT DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);
Connexion depuis FFP (JavaScript)
// Installer le client Supabase
// Dans le HTML, ajouter en head :
// <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

// Variables d'environnement
const SUPABASE_URL = 'https://xxxx.supabase.co';
const SUPABASE_KEY = 'votre-anon-public-key';

// Initialiser
const { createClient } = supabase;
const db = createClient(SUPABASE_URL, SUPABASE_KEY);

// Exemple : récupérer les joueurs
async function getJoueurs() {
  const { data, error } = await db
    .from('joueurs')
    .select('*')
    .order('nom');
  return data;
}

// Exemple : sauvegarder un événement
async function saveEvent(event) {
  const { data, error } = await db
    .from('evenements')
    .upsert(event);
  return data;
}

// Exemple : écouter les nouveaux messages (temps réel)
db.channel('messages')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' },
    (payload) => { handleNewMessage(payload.new); })
  .subscribe();
🌍 Connecter un domaine comme footfactorypro.com à votre déploiement Vercel/Netlify. Domaine : ~10€/an sur OVH, Namecheap, ou Google Domains.
Configurer un domaine sur Vercel
1
Acheter un domaine
Recommandés : OVH · Namecheap · Google Domains
Rechercher footfactorypro.com ou footfactorypro.fr
2
Ajouter dans Vercel
Vercel Dashboard → Votre projet → Settings → Domains → Add
Entrer votre domaine : footfactorypro.com
3
Configurer les DNS
Vercel vous donnera 2 enregistrements DNS à ajouter chez votre registrar :
// A Record
Nom:  @
Type: A
Valeur: 76.76.21.21

// CNAME Record
Nom:  www
Type: CNAME
Valeur: cname.vercel-dns.com

La propagation DNS prend 15 min à 48h.

4
HTTPS automatique
Vercel génère et renouvelle automatiquement le certificat SSL (HTTPS). Rien à faire de votre côté.
Idées de domaines disponibles
footfactorypro.comfootfactorypro.frffp-academy.comffp-platform.frfoot-factory.pro