Capture d'ecran de site web Origin Float - Blog Multilingue
Retour aux projets Voir le site

Origin Float - Blog Multilingue

Création de A à Z d'un module de publication multilingue. Modélisation d'une base de données relationnelle scalable, développement d'un back-office intuitif avec éditeur riche, et intégration front-end "pixel-perfect" sur un thème complexe existant.

📝 Le Contexte

Pour répondre aux besoins d'internationalisation d'une plateforme dédiée au bien-être, il fallait concevoir et intégrer un système de blog complet. L'objectif était de fournir une interface de rédaction bilingue fluide côté serveur, tout en garantissant un affichage public irréprochable et respectueux de la charte graphique existante.

🧗‍♂️ Le Défi Technique

Le challenge principal résidait dans l'intégration front-end. Le site fonctionnait déjà sous un constructeur de pages rigide. Il a fallu injecter des grilles modernes et des bannières panoramiques en neutralisant les classes CSS restrictives du thème, le tout de manière chirurgicale, sans altérer les fichiers natifs de la plateforme.

🛠️ Solutions Déployées & Fonctionnalités

1. Architecture Back-end & Base de données

  • Modélisation Évolutive : Conception d'une architecture relationnelle isolant les traductions pour permettre l'ajout futur de nouvelles langues sans modifier la structure de la base de données principale.

  • Traitement Asynchrone : Développement d'une logique API pour l'upload et la suppression des médias à la volée directement depuis l'éditeur de texte.

2. Expérience Back-Office (UI/UX)

  • Interface Bilingue : Intégration d'un système d'onglets permettant de basculer instantanément entre la rédaction française et anglaise.

  • Gestion centralisée : Mise en place d'un tableau de bord dynamique via DataTables avec recherche native, badges de statuts (Publié/Brouillon) et aperçu des miniatures.

3. Intégration Front-End "Pixel Perfect"

  • Neutralisation des conflits CSS : Création d'un conteneur Flexbox isolé pour garantir des espacements symétriques et un alignement parfait des cartes d'articles.

  • Hero Banners : Utilisation avancée des unités de viewport pour forcer les images d'en-tête à s'afficher en pleine largeur d'écran, s'échappant des conteneurs rigides du thème.

  • Responsive Design : Restructuration des grilles pour un affichage fluide sur mobile.

Stack Technique

Rôles

  • Concepteur (Architecture BDD)

  • Intégrateur

  • Développeur

Back-end

💡 Le Résultat

Un module de publication robuste et élégant, doté d'une administration pensée pour les rédacteurs finaux et d'un code source standardisé aux normes Laravel pour faciliter la maintenance future.

Capture section blog back offices
capture la création d'un article en FR
capture la création d'un article en EN

Projet confié par : NjakaDev

Autres projets