À propos du projet
FlashCard est une application web de révision développée avec Symfony 7.4 et PHP 8.2. Elle permet de créer des decks de cartes personnalisées (classiques, QCM, avec images) et de les réviser selon un algorithme de répétition espacée SM-2, qui adapte automatiquement la fréquence des révisions en fonction des performances de l'utilisateur.
Fonctionnalités principales :
- Trois modes d'étude : classique, écriture et chronométré
- Synthèse vocale (TTS) avec sélecteur de voix groupé par langue
- Interface disponible en 12 langues
- Système de succès (12 badges) débloqués selon la progression
- Exploration de decks publics avec recherche et pagination
- Partage de deck via lien privé
- Export des cartes en CSV
- Dark mode complet
- Panel d'administration (membres, decks, statistiques)
- Authentification sécurisée : inscription, vérification e-mail, réinitialisation du mot de passe
Fonctionnalités principales :
- Trois modes d'étude : classique, écriture et chronométré
- Synthèse vocale (TTS) avec sélecteur de voix groupé par langue
- Interface disponible en 12 langues
- Système de succès (12 badges) débloqués selon la progression
- Exploration de decks publics avec recherche et pagination
- Partage de deck via lien privé
- Export des cartes en CSV
- Dark mode complet
- Panel d'administration (membres, decks, statistiques)
- Authentification sécurisée : inscription, vérification e-mail, réinitialisation du mot de passe
FlashCard
05/2026
25 commits
Un site de révision de Flashcard, QCM !
Technologies utilisées
PHP
MySQL
JavaScript
Symfony
Bootstrap
Twig
Connexion & Inscription
L'inscription requiert un nom d'utilisateur (3 à 30 caractères, lettres, chiffres et underscore uniquement), une adresse e-mail valide et un mot de passe d'au moins 6 caractères. L'acceptation des conditions d'utilisation est obligatoire avant de valider le formulaire.
Une fois inscrit, un e-mail de confirmation est automatiquement envoyé. Le compte ne devient actif qu'après avoir cliqué sur le lien de vérification, ce qui garantit que l'adresse e mail appartient bien à l'utilisateur.
Le mot de passe n'est jamais stocké en clair : il est haché via le composant PasswordHasher de Symfony avant d'être enregistré en base de données. En cas d'oubli, un système de réinitialisation par lien temporaire signé permet de définir un nouveau mot de passe de façon sécurisée.
Une fois inscrit, un e-mail de confirmation est automatiquement envoyé. Le compte ne devient actif qu'après avoir cliqué sur le lien de vérification, ce qui garantit que l'adresse e mail appartient bien à l'utilisateur.
Le mot de passe n'est jamais stocké en clair : il est haché via le composant PasswordHasher de Symfony avant d'être enregistré en base de données. En cas d'oubli, un système de réinitialisation par lien temporaire signé permet de définir un nouveau mot de passe de façon sécurisée.
Traduction complète
Le site est disponible en 12 langues toutes séparer dans l'url :
- http://127.0.0.1:8000/fr/
- http://127.0.0.1:8000/en/
- http://127.0.0.1:8000/fr/
- http://127.0.0.1:8000/en/
Profil
Onglet "Mon profil" :
- Cet onglet affiche une vue d'ensemble du compte en lecture seule. En haut, l'avatar est cliquable pour uploader une photo (JPG, PNG, WebP, GIF, max 2 Mo). Trois statistiques rapides sont affichées : le nombre de decks créés, le nombre de cartes et le streak de révision en jours consécutifs. Un calendrier d'activité sur 5 semaines permet de visualiser les jours de révision sous forme de heatmap, avec un tooltip au survol indiquant le nombre de sessions. Enfin, les informations du compte (pseudo, email, statut de vérification, rôle) sont affichées de façon lisible.
Onglet "Modifier" :
- Cet onglet regroupe tous les paramètres modifiables du compte. Le pseudo (3 à 30 caractères, lettres, chiffres et underscore uniquement) et la biographie (250 caractères max avec compteur en temps réel) peuvent être modifiés directement via des formulaires dépliants. Le changement d'email passe par un lien de confirmation envoyé à la nouvelle adresse pour valider la modification. Le thème clair ou sombre est sélectionnable via des boutons, la préférence est sauvegardée en localStorage. Les sons d'interface (correct, erreur, timer) peuvent être activés ou désactivés. Des actions rapides permettent de changer le mot de passe ou de se déconnecter. Une zone "Danger" permet la suppression définitive du compte après confirmation via une modale.
Onglet "Succès" :
- Cet onglet affiche les 12 badges du système de succès sous forme de grille. Chaque badge est représenté par une icône et un nom. Les badges débloqués apparaissent en doré avec leur date d'obtention, les badges non encore obtenus sont grisés. Les succès couvrent différentes actions : créer un premier deck, effectuer des sessions de révision, maintenir un streak, suivre un utilisateur, ou encore partager un deck.
- Cet onglet affiche une vue d'ensemble du compte en lecture seule. En haut, l'avatar est cliquable pour uploader une photo (JPG, PNG, WebP, GIF, max 2 Mo). Trois statistiques rapides sont affichées : le nombre de decks créés, le nombre de cartes et le streak de révision en jours consécutifs. Un calendrier d'activité sur 5 semaines permet de visualiser les jours de révision sous forme de heatmap, avec un tooltip au survol indiquant le nombre de sessions. Enfin, les informations du compte (pseudo, email, statut de vérification, rôle) sont affichées de façon lisible.
Onglet "Modifier" :
- Cet onglet regroupe tous les paramètres modifiables du compte. Le pseudo (3 à 30 caractères, lettres, chiffres et underscore uniquement) et la biographie (250 caractères max avec compteur en temps réel) peuvent être modifiés directement via des formulaires dépliants. Le changement d'email passe par un lien de confirmation envoyé à la nouvelle adresse pour valider la modification. Le thème clair ou sombre est sélectionnable via des boutons, la préférence est sauvegardée en localStorage. Les sons d'interface (correct, erreur, timer) peuvent être activés ou désactivés. Des actions rapides permettent de changer le mot de passe ou de se déconnecter. Une zone "Danger" permet la suppression définitive du compte après confirmation via une modale.
Onglet "Succès" :
- Cet onglet affiche les 12 badges du système de succès sous forme de grille. Chaque badge est représenté par une icône et un nom. Les badges débloqués apparaissent en doré avec leur date d'obtention, les badges non encore obtenus sont grisés. Les succès couvrent différentes actions : créer un premier deck, effectuer des sessions de révision, maintenir un streak, suivre un utilisateur, ou encore partager un deck.
Mes Flashcards
La page "Mes Flashcards" centralise l'ensemble des decks créés par l'utilisateur. Chaque deck est affiché sous forme de carte avec son nom, sa description, ses tags, le nombre de cartes qu'il contient et son statut (public ou privé). Une barre de filtres permet de rechercher un deck par nom, de les filtrer par visibilité (tous / publics / privés) et de les trier par date de création, ordre alphabétique ou nombre de cartes.
Depuis cette page, il est possible de créer un nouveau deck via une modale : nom, description, tags (séparés par espace ou virgule) et visibilité publique ou privée. Chaque deck existant peut être modifié ou supprimé directement depuis sa carte, toujours via une modale ou une confirmation. Un clic sur "Ouvrir" redirige vers le détail du deck et ses cartes.
Depuis cette page, il est possible de créer un nouveau deck via une modale : nom, description, tags (séparés par espace ou virgule) et visibilité publique ou privée. Chaque deck existant peut être modifié ou supprimé directement depuis sa carte, toujours via une modale ou une confirmation. Un clic sur "Ouvrir" redirige vers le détail du deck et ses cartes.
Page Explorer
La page Explorer permet de découvrir les decks publiés par l'ensemble des utilisateurs de la plateforme. Une barre de recherche en haut de page permet de filtrer les decks par nom, et le nombre total de résultats est affiché en temps réel. Les decks sont présentés en grille (3 colonnes, responsive) avec pour chaque carte : le nom du deck, sa description, la note moyenne en étoiles si des avis ont été laissés, le nombre de cartes, ainsi que l'avatar et le pseudo cliquable de son créateur.
Deux actions sont disponibles par deck : Étudier, qui lance directement le mode révision, et Prévisualiser, qui ouvre une modale listant toutes les cartes du deck avec la possibilité de révéler la réponse au clic pour les cartes classiques, ou d'afficher les options avec la bonne réponse mise en évidence pour les QCM. Les utilisateurs connectés peuvent également ajouter ou retirer un deck de leurs favoris via un bouton cœur, sans rechargement de la page (requête AJAX).
La pagination affiche 12 decks par page avec une navigation intelligente qui masque les pages éloignées via des points de suspension.
Deux actions sont disponibles par deck : Étudier, qui lance directement le mode révision, et Prévisualiser, qui ouvre une modale listant toutes les cartes du deck avec la possibilité de révéler la réponse au clic pour les cartes classiques, ou d'afficher les options avec la bonne réponse mise en évidence pour les QCM. Les utilisateurs connectés peuvent également ajouter ou retirer un deck de leurs favoris via un bouton cœur, sans rechargement de la page (requête AJAX).
La pagination affiche 12 decks par page avec une navigation intelligente qui masque les pages éloignées via des points de suspension.
Page Favoris
La page Favoris regroupe tous les decks qu'un utilisateur a mis en favori depuis la page Explorer. Chaque deck est affiché sous forme de carte avec son nom, sa description, le pseudo de son créateur et le nombre de cartes. Deux actions sont disponibles : Étudier, qui lance directement le mode révision, et Prévisualiser, qui ouvre une modale permettant de consulter toutes les cartes du deck et de révéler les réponses au clic.
Le bouton cœur permet de retirer un deck des favoris instantanément et sans rechargement : la carte disparaît avec une animation de fondu. Si la liste devient vide après suppression, la page se recharge automatiquement pour afficher un état vide invitant l'utilisateur à explorer de nouveaux decks.
La page gère également les decks privés partagés via lien : si un deck n'est pas public mais possède un token de partage, il reste accessible et jouable depuis les favoris.
Le bouton cœur permet de retirer un deck des favoris instantanément et sans rechargement : la carte disparaît avec une animation de fondu. Si la liste devient vide après suppression, la page se recharge automatiquement pour afficher un état vide invitant l'utilisateur à explorer de nouveaux decks.
La page gère également les decks privés partagés via lien : si un deck n'est pas public mais possède un token de partage, il reste accessible et jouable depuis les favoris.
Pages Statistiques
La page Statistiques offre une vue d'ensemble des performances de révision de l'utilisateur. Quatre indicateurs clés sont affichés en haut de page : le nombre total de sessions effectuées, le nombre total de cartes révisées, le score moyen sur l'ensemble des sessions et le meilleur score obtenu.
Un graphique à barres représente l'activité sur les 30 derniers jours, avec une barre par jour dont la hauteur est proportionnelle au nombre de sessions. Un tooltip apparaît au survol de chaque barre pour afficher la date et le nombre de sessions correspondantes. Le graphique est entièrement réalisé en CSS, sans bibliothèque externe.
En dessous, l'historique des sessions est listé chronologiquement. Chaque ligne affiche le nom du deck, la date et l'heure de la session, le nombre de cartes réussies sur le total, ainsi qu'un badge de score coloré (vert au-dessus de 80 %, orange entre 60 et 79 %, rouge en dessous). Si le deck appartient à l'utilisateur, un bouton "Relancer" permet de relancer une session d'étude directement depuis l'historique. Les decks supprimés restent affichés dans l'historique avec une mention indiquant qu'ils n'existent plus.
Un graphique à barres représente l'activité sur les 30 derniers jours, avec une barre par jour dont la hauteur est proportionnelle au nombre de sessions. Un tooltip apparaît au survol de chaque barre pour afficher la date et le nombre de sessions correspondantes. Le graphique est entièrement réalisé en CSS, sans bibliothèque externe.
En dessous, l'historique des sessions est listé chronologiquement. Chaque ligne affiche le nom du deck, la date et l'heure de la session, le nombre de cartes réussies sur le total, ainsi qu'un badge de score coloré (vert au-dessus de 80 %, orange entre 60 et 79 %, rouge en dessous). Si le deck appartient à l'utilisateur, un bouton "Relancer" permet de relancer une session d'étude directement depuis l'historique. Les decks supprimés restent affichés dans l'historique avec une mention indiquant qu'ils n'existent plus.
Pages Fil d'actualité
La page Fil d'actualité affiche les decks publics publiés par les utilisateurs que l'on suit. Chaque deck est présenté sous forme de carte avec son nom, le pseudo cliquable de son auteur et le nombre de cartes qu'il contient. Un bouton "Étudier" permet de lancer directement une session de révision sans quitter la page.
Si l'utilisateur ne suit personne ou que les personnes suivies n'ont pas de decks publics, un état vide s'affiche avec un lien vers la page Explorer pour découvrir de nouveaux profils à suivre.
Si l'utilisateur ne suit personne ou que les personnes suivies n'ont pas de decks publics, un état vide s'affiche avec un lien vers la page Explorer pour découvrir de nouveaux profils à suivre.
Page Notifications
La page Notifications centralise les alertes reçues par l'utilisateur. Deux types de notifications sont gérés : les abonnements (lorsqu'un utilisateur commence à vous suivre) et les favoris (lorsqu'un utilisateur ajoute un de vos decks à ses favoris). Chaque notification affiche le pseudo de l'auteur de l'action, le contexte (nom du deck concerné pour les favoris) et le temps écoulé depuis l'événement, affiché de façon relative ("à l'instant", "5min", "2h" ou la date complète selon l'ancienneté).
Les notifications non lues apparaissent avec un fond violet clair et un point bleu distinctif. Si aucune notification n'a été reçue, un état vide s'affiche.
Les notifications non lues apparaissent avec un fond violet clair et un point bleu distinctif. Si aucune notification n'a été reçue, un état vide s'affiche.
Crée un nouveau deck & cartes
Création du deck
La création d'un deck s'effectue via une modale accessible depuis la page "Mes Flashcards". Le formulaire demande un nom (obligatoire, 100 caractères max), une description optionnelle (255 caractères max) et des tags permettant de catégoriser le deck (saisis sous la forme #tag, séparés par des espaces ou des virgules). Une case à cocher permet de définir si le deck est public (visible par tous dans la page Explorer) ou privé (accessible uniquement par son propriétaire). La soumission est protégée par un token CSRF pour sécuriser la requête.
Ajouts de cartes au deck
L'ajout d'une carte se fait via une modale accessible depuis la page détail d'un deck. Le formulaire propose deux types de cartes sélectionnables via des onglets :
Carte classique : un champ recto (255 caractères max, obligatoire), un champ verso (texte libre), et la possibilité d'ajouter une image au recto et/ou au verso.
Carte QCM : un champ question au recto, puis un constructeur de réponses dynamique permettant d'ajouter autant d'options que souhaité. Chaque option comporte un champ texte et une case à cocher pour la marquer comme correcte. Les options peuvent être supprimées individuellement.
Le formulaire s'adapte automatiquement selon le type sélectionné : les champs du verso classique et ceux du QCM s'affichent ou se masquent en temps réel sans rechargement. La soumission est protégée par un token CSRF. Il est également possible d'importer des cartes en masse via un fichier CSV.
Carte classique : un champ recto (255 caractères max, obligatoire), un champ verso (texte libre), et la possibilité d'ajouter une image au recto et/ou au verso.
Carte QCM : un champ question au recto, puis un constructeur de réponses dynamique permettant d'ajouter autant d'options que souhaité. Chaque option comporte un champ texte et une case à cocher pour la marquer comme correcte. Les options peuvent être supprimées individuellement.
Le formulaire s'adapte automatiquement selon le type sélectionné : les champs du verso classique et ceux du QCM s'affichent ou se masquent en temps réel sans rechargement. La soumission est protégée par un token CSRF. Il est également possible d'importer des cartes en masse via un fichier CSV.
Système de révision
Les différents types de modes de révisions
La page détail d'un deck centralise toutes les actions liées à un deck et à ses cartes. L'en-tête affiche le nom, la description, le statut (public/privé), les tags et le nombre de cartes. Depuis cet en-tête, il est possible de lancer une session d'étude, de démarrer une révision SRS (répétition espacée), de modifier les informations du deck via une modale ou de le supprimer avec une confirmation.
Pour les decks privés, une bannière de partage permet de générer un lien privé unique à partager sans nécessiter de compte. Le lien peut être copié en un clic ou révoqué à tout moment.
La liste des cartes est affichée en grille. Les cartes classiques sont présentées sous forme de flip cards animées (recto/verso au survol), tandis que les cartes QCM affichent la question et les options de réponse avec la bonne réponse mise en évidence. Chaque carte peut être modifiée ou supprimée individuellement via des boutons d'action avec confirmation.
Les cartes peuvent également être importées en masse via un fichier CSV ou exportées au format CSV pour une utilisation externe.
Pour les decks privés, une bannière de partage permet de générer un lien privé unique à partager sans nécessiter de compte. Le lien peut être copié en un clic ou révoqué à tout moment.
La liste des cartes est affichée en grille. Les cartes classiques sont présentées sous forme de flip cards animées (recto/verso au survol), tandis que les cartes QCM affichent la question et les options de réponse avec la bonne réponse mise en évidence. Chaque carte peut être modifiée ou supprimée individuellement via des boutons d'action avec confirmation.
Les cartes peuvent également être importées en masse via un fichier CSV ou exportées au format CSV pour une utilisation externe.
Mode Classique
Chaque carte est affichée recto face visible. Un clic (ou la touche Espace) la retourne avec une animation 3D pour révéler le verso. L'utilisateur indique ensuite s'il connaissait la réponse via les boutons "Je savais" ou "Je ne savais pas" (ou les touches → / ←). Les cartes QCM affichent les options à cocher et un bouton "Valider" révèle les bonnes et mauvaises réponses avec un code couleur vert/rouge/orange.
Mode Ecriture
La question est affichée et l'utilisateur doit taper la réponse dans un champ texte. La correction est tolérante aux fautes de frappe légères grâce à un algorithme de distance de Levenshtein (0 à 2 erreurs selon la longueur du mot). Si la réponse est incorrecte, la bonne réponse est affichée. La validation se fait au clic ou avec la touche Entrée.
Mode Chronomètre
Identique au mode classique ou écriture, mais avec un compte à rebours configurable (10s, 15s, 30s ou 60s). Une barre de progression se vide en temps réel et passe au rouge dans les dernières secondes, accompagnée d'un son d'urgence. Si le temps s'écoule avant une réponse, la carte est automatiquement comptée comme incorrecte.
×
![Image en grand]()