Retour au Portfolio !

LogPose

Image du projet LogPose

Documentation & Histoire du projet

Log Pose : Dossier de Projet Complet
Résumé
Log Pose est une application web et mobile de glossaire social et collaboratif, conçue pour les étudiants et les apprenants. Elle permet aux utilisateurs de créer, gérer et partager des collections de notes et de définitions (appelées "bibliothèques") dans un environnement moderne et interactif. Au-delà d'un simple outil de prise de notes, Log Pose intègre des fonctionnalités sociales (suivi d'utilisateurs, likes, fil d'actualité), des outils d'étude avancés comme un mode quiz, et une assistance par IA pour la génération de contenu, le tout dans une interface responsive à double thème (clair/sombre).

L'Histoire du Projet
Tout a commencé avec une idée simple mais puissante : un étudiant souhaitant créer un glossaire pour la rentrée, mais qui refusait la banalité d'un document Word ou d'un bloc-notes. L'ambition initiale était de créer une interface avec "un design de fou".

Le projet a débuté comme un simple glossaire personnel, stockant ses données dans un fichier JSON. Cependant, l'ambition a rapidement grandi. La première évolution majeure fut l'introduction d'un système de comptes utilisateurs, transformant l'outil personnel en une plateforme. Ce changement a nécessité une refonte architecturale complète :

Migration de la base de données : Le simple fichier JSON a été abandonné au profit d'une base de données relationnelle SQL (MySQL), capable de gérer des relations complexes entre les utilisateurs, les bibliothèques, les mots, les partages, etc.

Restructuration des fichiers : L'arborescence a été professionnalisée en séparant le code public (/public) du code interne (/src, /templates) pour plus de clarté et de sécurité.

À partir de cette nouvelle fondation solide, le projet a connu une explosion de fonctionnalités. Chaque étape a ajouté une nouvelle couche de complexité et de valeur : le CRUD complet pour les bibliothèques et les mots, le support du Markdown, le système de tags, les profils utilisateurs avec avatars, le partage privé et public, un système de followers et de likes, un fil d'actualité personnalisé, et un mode quiz interactif.

Le code lui-même a évolué, passant d'un style procédural à une architecture en Programmation Orientée Objet (POO), rendant le projet plus robuste et maintenable. Enfin, pour atteindre l'ambition initiale d'un "design de fou", une interface moderne a été développée, incluant un double thème, un design responsive et des animations d'arrière-plan interactives. La touche finale fut l'intégration d'une IA générative pour assister à la création de contenu, faisant de Log Pose un outil véritablement avant-gardiste.

Utilité & Public Cible
Log Pose est conçu pour les étudiants, les autodidactes, et les groupes de travail qui cherchent à centraliser et à partager leurs connaissances.

Son utilité principale est de transformer la prise de notes, souvent une activité solitaire et statique, en une expérience d'apprentissage collaborative et dynamique.

Centralisation : Fini les notes éparpillées. Toutes les définitions et concepts clés sont organisés en "bibliothèques" thématiques.

Collaboration & Découverte : Les utilisateurs peuvent rendre leurs bibliothèques publiques pour aider la communauté ou les partager en privé avec leur groupe de travail. Le fil d'actualité et la page "Explorer" encouragent la découverte.

Apprentissage Actif : Le mode "Quiz/Flashcards" transforme la révision passive en un exercice de mémorisation actif.

Productivité : Le support du Markdown permet de créer des notes riches et structurées, tandis que l'assistance par IA accélère la création de contenu.

Fonctionnalités Détaillées
Gestion de Compte & Social
Authentification : Inscription sécurisée (mots de passe hachés), connexion et gestion de session.

Profils Utilisateurs : Chaque utilisateur a un profil public affichant ses bibliothèques publiques, sa date d'inscription et ses statistiques.

Gestion de Compte : Une page privée "Mon Compte" permet de modifier son pseudo, sa photo de profil, et son mot de passe, ainsi que de supprimer son compte.

Système de Followers : Possibilité de suivre d'autres utilisateurs pour voir leurs créations dans un fil d'actualité.

Système de Likes : Possibilité d'aimer les bibliothèques pour mettre en avant le contenu de qualité.

Gestion de Contenu
Bibliothèques : CRUD complet (Créer, Lire, Modifier, Supprimer) pour les bibliothèques, avec options de nom, description et visibilité (publique/privée).

Mots & Définitions : CRUD complet pour les mots au sein des bibliothèques, géré en AJAX pour une expérience sans rechargement.

Éditeur Markdown : Le champ de définition supporte la syntaxe Markdown pour du texte riche (gras, listes, blocs de code, etc.).

Système de Tags : Chaque mot peut être associé à plusieurs tags pour une organisation flexible et une recherche transversale.

Expérience Utilisateur (UX/UI)
Design Responsive : L'interface s'adapte à toutes les tailles d'écran, du grand moniteur au smartphone.

Double Thème : Un sélecteur permet de basculer entre un thème sombre "Obsidian Flow" et un thème clair "Éditorial", avec mémorisation du choix.

Arrière-plan Interactif : Un fond animé de "bulles flottantes" réagit aux mouvements de la souris, créant une interface vivante.

Menu Hamburger : La navigation sur mobile est gérée par un menu "hamburger" propre et fonctionnel.

Architecture Technique
Backend :

Langage : PHP 8+ (en Programmation Orientée Objet)

Base de Données : MySQL

Serveur Web : Apache (via WAMP)

Frontend :

Langages : HTML5, CSS3, JavaScript (ES6+)

Techniques : AJAX (via l'API fetch) pour la communication asynchrone, CSS Flexbox & Grid pour la mise en page.

Framework Mobile :

Capacitor : Pour transformer l'application web en une application mobile native pour Android.

Outils & Environnement :

WAMP : Environnement de développement local.

phpMyAdmin : Outil de gestion de la base de données.

ngrok : Service de tunneling pour les tests sur mobile.

Git : (implicite) Pour le suivi des versions..

Technologies utilisées

HTML CSS PHP SQL JavaScript Capacitor Ajax API REST API Gemini Android Studio JSON

Liens

Voir le site

Le code source de ce projet n'est pas public.

Discutez avec mon assistant IA

Bonjour ! Je suis l'assistant IA de Marouane. Posez-moi une question sur son parcours, ses compétences ou ses projets.