🎓 ACADEMIE NUMERIQUE

Plateforme d'enseignement en ligne moderne, responsive et sécurisée avec système d'authentification complet, gestion de cours par matière, upload de fichiers/vidéos, et conférences vidéo en temps réel.

✨ Caractéristiques Principales

🔐 Authentification & Sécurité

• ✅ Système d'authentification sécurisé avec hashage bcryptjs
• ✅ Rôles d'utilisateurs : Élève / Administrateur
• ✅ Création de plusieurs comptes avec le même email
• ✅ Stockage sécurisé en base de données SQLite

📚 Gestion des Cours

• ✅ Matières disponibles : SVT, Français, Mathématiques, Physique-Chimie, Histoire, Géographie, Philosophie, Anglais
• ✅ Création de cours (Admin uniquement)
• ✅ Inscription aux cours (Élèves)
• ✅ Ressources pédagogiques par cours

👤 Profils Utilisateurs

• ✅ Photo de profil personnalisée
• ✅ Upload et stockage des photos
• ✅ Affichage en temps réel de tous les utilisateurs
• ✅ Sélection de plusieurs classes

📤 Gestion de Contenus

• ✅ Upload de fichiers (PDF, DOC, ZIP, etc.)
• ✅ Upload de vidéos (MP4, WebM, etc.)
• ✅ Lecture vidéo intégrée
• ✅ Téléchargement de ressources

🎥 Conférences Vidéo

• ✅ Création de salles Jitsi Meet (Admin)
• ✅ Rejoindre les conférences (Élèves)
• ✅ Affichage en temps réel des participants
• ✅ Support multi-matière

📊 Tableau de Bord

• ✅ Affichage de votre profil
• ✅ Statistiques en temps réel
• ✅ Liste des utilisateurs connectés
• ✅ Recherche d'utilisateurs

🎨 Interface

• ✅ Design moderne avec dégradé (violet/bleu)
• ✅ Interface responsive (mobile, tablette, desktop)
• ✅ Animations fluides
• ✅ Footer personnalisé "Design by Leonard"

🏗️ Architecture Technique

Frontend

• React 18 - Framework JavaScript
• Vite - Build tool ultra-rapide
• CSS3 - Responsive design avec media queries
• Fetch API - Communication avec le backend

Backend

• Node.js - Runtime JavaScript
• Express.js - Framework web
• SQLite3 - Base de données
• Multer - Upload de fichiers
• bcryptjs - Hashage des mots de passe
• CORS - Gestion des requêtes cross-origin

Base de Données (SQLite)

- users (id, email, password, identifier, country, classes, role, profilePhoto)
- courses (id, title, subject, description, instructorId)
- enrollments (id, courseId, userId)
- materials (id, courseId, title, type, fileName, uploadedBy)
- conference_rooms (id, title, subject, createdBy, jitsiRoomName, startTime)
- room_participants (id, roomId, userId)

🚀 Installation et Démarrage Rapide

Prérequis

• Node.js 16+ et npm
• Un navigateur moderne

Installation

1. Cloner ou accéder au dossier du projet

cd "c:\Users\HP\OneDrive\Desktop\numerique"

2. Installer les dépendances

npm install

Démarrage

Option 1 : Lancer les deux serveurs séparément

Terminal 1 - Backend

npm run dev:server

Terminal 2 - Frontend

npm run dev

Option 2 : Démarrage automatique (Windows)

Double-cliquez sur START.bat

Option 3 : Lancer les deux en parallèle

npm run dev:all

Accès

• Frontend : http://localhost:5173
• Backend : http://localhost:5000

📝 Guide d'Utilisation

1️⃣ Inscription

1. Cliquez sur "S'inscrire"
2. Entrez votre email
3. Créez un mot de passe sécurisé
4. Entrez un nom d'utilisateur
5. Sélectionnez votre pays
6. Sélectionnez votre/vos classe(s) (plusieurs possibles)
7. Choisissez votre rôle : Élève ou Admin (test)
8. Cliquez sur "S'inscrire"

2️⃣ Connexion

1. Entrez votre email
2. Entrez votre mot de passe
3. Cliquez sur "Se connecter"

3️⃣ Tableau de Bord

• Photo de profil : Cliquez sur votre avatar pour uploader une photo
• Profil : Consultez vos informations
• Statistiques : Nombre d'utilisateurs, admins, etc.
• Utilisateurs en temps réel : Voyez qui est connecté maintenant

4️⃣ Gestion des Cours (Admin)

1. Accédez à l'onglet "🔧 Admin"
2. Cliquez sur "📚 Créer Cours"
3. Entrez le titre et la matière
4. Ajoutez une description (optionnel)
5. Cliquez sur "Créer le Cours"

5️⃣ Inscription aux Cours (Élève)

1. Allez à "Cours"
2. Parcourez les matières disponibles
3. Cliquez sur "S'inscrire" pour un cours
4. Une fois inscrit, cliquez sur "Voir ressources"

6️⃣ Upload de Fichiers/Vidéos (Admin)

1. Allez dans l'onglet "Admin"
2. Cliquez sur "📤 Upload Fichiers"
3. Glissez vos fichiers ou cliquez pour en sélectionner
4. Supports : PDF, DOC, MP4, WebM, etc.

7️⃣ Conférences Vidéo (Admin)

1. Allez dans l'onglet "Admin"
2. Cliquez sur "🎥 Créer Salle Visio"
3. Entrez un titre et une matière (optionnel)
4. Cliquez sur "Créer la Salle"
5. Copiez le lien généré pour le partager

8️⃣ Rejoindre une Conférence (Élève)

1. Allez à "Conférences"
2. Consultez les salles disponibles
3. Voyez qui est connecté
4. Cliquez sur "🎤 Rejoindre (Jitsi Meet)"
5. Jitsi Meet s'ouvre dans un nouvel onglet

👤 Comptes de Test

Pour tester les différentes fonctionnalités :

Compte Admin

• Email : admin@academie.fr
• Mot de passe : Admin123!
• Identifiant : Administrator
• Rôle : Administrateur

Compte Élève

• Email : eleve@academie.fr
• Mot de passe : Eleve123!
• Identifiant : Eleve123
• Rôle : Élève

Vous pouvez créer vos propres comptes avec la même adresse email

📁 Structure du Projet

numerique/
├── src/
│   ├── App.jsx                    # Composant principal
│   ├── App.css                    # Styles globaux (responsive)
│   ├── main.jsx                   # Point d'entrée React
│   ├── index.css                  # Styles de base
│   └── components/
│       ├── Login.jsx              # Page de connexion
│       ├── Register.jsx           # Page d'inscription
│       ├── Dashboard.jsx          # Tableau de bord
│       ├── CourseManager.jsx      # Gestion des cours
│       ├── Conference.jsx         # Gestion des conférences
│       └── AdminPanel.jsx         # Panneau admin
│
├── server/
│   ├── server.js                  # Serveur Express
│   ├── academie.db                # Base de données SQLite
│   └── uploads/
│       ├── profiles/              # Photos de profil
│       ├── files/                 # Fichiers pédagogiques
│       └── videos/                # Vidéos
│
├── dist/                          # Build production
├── package.json                   # Dépendances
├── vite.config.js                 # Configuration Vite
├── START.bat                      # Script de démarrage
└── README.md                      # Cette documentation

🔧 Commandes Disponibles

# Démarrage du backend uniquement
npm run dev:server

# Démarrage du frontend uniquement
npm run dev

# Démarrage des deux en parallèle
npm run dev:all

# Build pour production
npm run build

# Aperçu du build production
npm run preview

# Linting du code
npm run lint

📤 Uploads de Fichiers

Types supportés

Fichiers

• PDF (application/pdf)
• Documents : DOC, DOCX, TXT
• Archives : ZIP, RAR
• Autres formats bureautiques

Vidéos

• MP4 (video/mp4)
• WebM (video/webm)
• Ogg (video/ogg)
• Autres formats vidéo standard

Limites

• Taille maximale : 50 MB
• Les fichiers sont stockés dans /server/uploads/
• Accessibles via http://localhost:5000/uploads/

🌍 Pays Disponibles

France, Belgique, Suisse, Canada, Maroc, Sénégal, Côte d'Ivoire, Autre

📚 Matières Disponibles

• 📖 SVT (Sciences de la Vie et de la Terre)
• 📝 Français
• 🔢 Mathématiques
• ⚗️ Physique-Chimie
• 📜 Histoire
• 🗺️ Géographie
• 🤔 Philosophie
• 🌐 Anglais

🎓 Niveaux Disponibles

6ème, 5ème, 4ème, 3ème, 2nde, 1ère, Terminale, Licence, Master

🌐 Fonctionnalités Temps Réel

• ✅ Mise à jour automatique de la liste des utilisateurs (toutes les 3 secondes)
• ✅ Affichage en direct des participants aux conférences
• ✅ Synchronisation instantanée des inscriptions aux cours
• ✅ Photos de profil mises à jour en temps réel

🔒 Sécurité

• ✅ Hachage des mots de passe avec bcryptjs
• ✅ Validation côté serveur
• ✅ CORS configuré
• ✅ Restrictions d'accès par rôle
• ✅ Stockage sécurisé des fichiers

📊 Production Build

npm run build

Les fichiers compilés seront dans le dossier /dist/

Pour servir en production :

npm run preview

🐛 Troubleshooting

"Erreur de connexion au serveur"

• Vérifiez que le backend est lancé (npm run dev:server)
• Vérifiez le port 5000 : netstat -ano | findstr :5000

"CORS error"

• Assurez-vous que le backend est lancé avant le frontend
• Vérifiez que les ports ne sont pas en conflit

"Erreur lors de l'upload"

• Vérifiez que le dossier uploads/ existe
• Vérifiez les permissions du dossier
• Vérifiez la taille du fichier (max 50 MB)

📞 Support

Pour toute question ou problème, consultez les logs du serveur :

• Terminal du backend : npm run dev:server
• Terminal du frontend : npm run dev

📄 Licence

Projet privé - ACADEMIE NUMERIQUE

🎨 Design & Footer

Tous les éléments respectent le design moderne avec dégradé violet/bleu. Le footer affiche "Design by Leonard" avec la date actuelle mise à jour automatiquement.

---

Version : 2.0.0 (Avec Backend & Base de Données)
Dernière mise à jour : 24 février 2026
Design by Leonard © 2026

🚀 Site en production à l'adresse http://localhost:5173