⚽ FC Provence — Plateforme Club

Application fullstack (React + Express) pour gérer un club de football : 📅 matchs, 👥 équipes, 📸 galeries et 📊 tableau de bord admin.

• Front-end : Vite + React + TypeScript, styles SCSS modulaires avec méthodologie BEM
• API : Express en TypeScript avec CORS et parsing JSON
• Base de données : MySQL via mysql2/promise configurée par variables d'environnement
• Démarrage : Simultané front/back grâce à concurrently
• Routing : React Router DOM pour navigation SPA
• Formulaires : React Hook Form + Zod pour validation

• Node.js ≥ 18 (compatible Vite 7 et TypeScript 5.9)
• npm (inclus avec Node)
• MySQL accessible (local ou distant)

# 1) Installer les dépendances globales (concurrently)
npm install

# 2) Installer le front
cd client && npm install

# 3) Installer le back
cd ../server && npm install

DB_HOST=localhost
DB_USER=***********
DB_PASS=************
DB_NAME=fcprovence
PORT=3000

Les valeurs par défaut sont prévues dans connect.ts mais il est conseillé d'utiliser un fichier .env.

• Lancer front + back depuis la racine :

    npm run dev

-   Front : http://localhost:5173
-   API : http://localhost:3000

• Lancer uniquement le front :

    npm run dev --prefix client

• Lancer uniquement l'API :

    npm run dev --prefix server

• BEM (Block Element Modifier) pour nommer les classes
• SCSS avec variables globales (:root)
• Responsive : mobile-first avec breakpoints à 600px et 968px

Exemple :

.header {
	&__container {
	}
	&__logo {
	}
	&__nav {
	}
}

• npm run dev : Lance front + back simultanément

• npm run dev : Serveur de développement Vite
• npm run build : Build de production
• npm run preview : Prévisualisation du build
• npm run lint : Linter ESLint

• npm run dev : Serveur Express avec hot-reload (ts-node-dev)
• npm run build : Compilation TypeScript
• npm start : Lance le serveur compilé (production)

• TypeScript : Typage strict activé
• ESLint : Configuration React + TypeScript
• Prettier : Formatage automatique (recommandé)
• Nommage :
  • Composants : PascalCase (Header.tsx)
  • Fichiers SCSS : kebab-case avec underscore (_header.scss)
  • Classes CSS : BEM (header__logo, btn--primary)
• Architecture : Séparation logique/style (composant .tsx + fichier .scss séparé)

• React Documentation
• Vite Documentation
• React Router Documentation
• TypeScript Documentation
• SCSS Documentation
• BEM Methodology

Alyaesub

Projet personnel - Tous droits réservés